994 lines
25 KiB
Vue
994 lines
25 KiB
Vue
|
<template>
|
|||
|
|
<view class="pcs-warp">
|
|||
|
|
<view class="box">
|
|||
|
|
<view class="topology-box">
|
|||
|
|
<Section :title="$t('homePage.device.pcsTopu')" />
|
|||
|
|
<topoCanvas cId="canvas" :width="'100%'" :height="'100%'" :canvas-data="canvasData" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<Section :title="$t('homePage.device.totalAcReaPower')">
|
|||
|
|
<view slot="right" style="flex: 1">
|
|||
|
|
<view class="top-right-box">
|
|||
|
|
<span class="time">{{this.$t('homePage.device.timeGranularity')}}:</span>
|
|||
|
|
<span @click="openTimeAction" class="value">{{sampleTime}}</span>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</Section>
|
|||
|
|
<view class="chart-box">
|
|||
|
|
<zero-loading v-if="chartLoading" position="absolute"></zero-loading>
|
|||
|
|
<charts v-else id="pcsChart" :options="curve_option"></charts>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="box" style="margin-bottom: 0;">
|
|||
|
|
<Section :title="$t('homePage.device.deviceData')" />
|
|||
|
|
<zero-loading v-if="stationLoading" position="absolute"></zero-loading>
|
|||
|
|
<view v-else class="group-box">
|
|||
|
|
<view class="group-item" @click="showHistory($t('homePage.device.acPower'), 'outputPower', 'pcs', 'kW', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/zjrl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.outputPower | kWFormat }}
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.acPower')}}({{panelData.outputPower | kwUnitFormat }})</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item border-right"
|
|||
|
|
@click="showHistory($t('homePage.device.acRecPower'), 'reactivePowerPCS', 'pcs', 'kVar', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/zjrl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.reactivePowerPCS }}
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.acRecPower')}}(kVar)</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item" @click="showHistory($t('homePage.device.gridFrequency'), 'grid', 'pcs', 'Hz', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/dqgl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.grid | isNull }}
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.gridFrequency')}}(Hz)</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item border-right" @click="showHistory($t('homePage.device.abLineVol'), 'volA', 'pcs', 'V', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/zfdl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.volA | isNull }}
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.abLineVol')}}(V)</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item border-right" @click="showHistory($t('homePage.device.bcLineVol'), 'volB', 'pcs', 'V', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/zfdl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.volB | isNull }}
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.bcLineVol')}}(V)</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item" @click="showHistory($t('homePage.device.caLineVol'), 'volC', 'pcs', 'V', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/zfdl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.volC | isNull }}
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.caLineVol')}}(V)</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item border-right" @click="showHistory($t('homePage.device.acur'), 'currentA', 'pcs', 'A', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/rfdl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.currentA | isNull }}
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.acur')}}(A)</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item border-right" @click="showHistory($t('homePage.device.bcur'), 'currentB', 'pcs', 'A', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/rfdl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.currentB | isNull }}
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.bcur')}}(A)</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item" @click="showHistory($t('homePage.device.ccur'), 'currentC', 'pcs', 'A', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/rfdl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.currentC | isNull }}
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.ccur')}}(A)</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item border-right" @click="showHistory($t('homePage.device.DCPower'), 'dcPower', 'pcs', 'kW', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/dqgl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.dcPower | kWFormat }}</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.DCPower')}}({{ panelData.dcPower | kwUnitFormat}})</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item border-right" @click="showHistory($t('homePage.device.DCVol'), 'dcInputVol', 'pcs', 'V', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/zfdl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.dcInputVol | isNull }}
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.DCVol')}}(V)</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="group-item" @click="showHistory($t('homePage.device.DCCurrent'), 'dcCurrent', 'pcs', 'A', '')">
|
|||
|
|
<view class="history-icon">
|
|||
|
|
<image src="/static/aidex/images/history-icon.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-icon">
|
|||
|
|
<image src="/static/aidex/images/rfdl.png"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-con">
|
|||
|
|
<view class="item-num">{{ panelData.dcCurrent | isNull }}
|
|||
|
|
</view>
|
|||
|
|
<view class="item-title">{{this.$t('homePage.device.DCCurrent')}}(A)</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<historyModal :is-show.sync="histroyShow" :title="chartTitle" :params="hisParams" />
|
|||
|
|
<u-action-sheet :list="actionSheetList" v-model="timeShow" @click="actionSheetCallback" @close="closeTimeAction"
|
|||
|
|
:mask-close-able="false"></u-action-sheet>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import topoCanvas from '@/components/new-canvas/index.vue'
|
|||
|
|
import historyModal from '@/components/history-modal/index.vue'
|
|||
|
|
import Section from '@/components/section/index.vue'
|
|||
|
|
import charts from "@/components/charts/index";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
historyModal,
|
|||
|
|
Section,
|
|||
|
|
charts,
|
|||
|
|
topoCanvas
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
curve_option: {},
|
|||
|
|
panelData: {},
|
|||
|
|
histroyShow: false,
|
|||
|
|
chartTitle: null,
|
|||
|
|
chartLoading: false,
|
|||
|
|
stationLoading: false,
|
|||
|
|
hisParams: {},
|
|||
|
|
timeShow: false,
|
|||
|
|
time: "1",
|
|||
|
|
stationId: null,
|
|||
|
|
srcId: null,
|
|||
|
|
hnStationId: [417, 398, 416, 415, 405, 485],
|
|||
|
|
actionSheetList: this.$t('homePage.device.timesArr'),
|
|||
|
|
sampleTime:this.$t('homePage.device.timesArr')[0].label,
|
|||
|
|
canvasData: [],
|
|||
|
|
textCanvasData: [
|
|||
|
|
//0
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [
|
|||
|
|
[190, 70]
|
|||
|
|
],
|
|||
|
|
font: [{
|
|||
|
|
text: this.$t('homePage.device.acbreaker'),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
}, ],
|
|||
|
|
},
|
|||
|
|
//1
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [
|
|||
|
|
[190, 200]
|
|||
|
|
],
|
|||
|
|
font: [{
|
|||
|
|
text: this.$t('homePage.device.dcbreaker'),
|
|||
|
|
size: 12,
|
|||
|
|
color: "#333333",
|
|||
|
|
}, ],
|
|||
|
|
},
|
|||
|
|
//2
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [
|
|||
|
|
[200, 260]
|
|||
|
|
],
|
|||
|
|
font: [{
|
|||
|
|
text: "SOC：",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#999",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "20%",
|
|||
|
|
size: 12,
|
|||
|
|
color: "#000",
|
|||
|
|
left: 35
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
//3
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [
|
|||
|
|
[35, 80]
|
|||
|
|
],
|
|||
|
|
font: [{
|
|||
|
|
text: this.$t('homePage.device.dcbreaker') + ':',
|
|||
|
|
size: 14,
|
|||
|
|
color: "#999999",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 14,
|
|||
|
|
color: "#000000",
|
|||
|
|
left: 65
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
//4
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [
|
|||
|
|
[3, 100]
|
|||
|
|
],
|
|||
|
|
font: [{
|
|||
|
|
text: this.$t('homePage.device.rsState') + ':',
|
|||
|
|
size: 14,
|
|||
|
|
color: "#999999",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 14,
|
|||
|
|
color: "#000000",
|
|||
|
|
left: 98
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
//5
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [
|
|||
|
|
[3, 120]
|
|||
|
|
],
|
|||
|
|
font: [{
|
|||
|
|
text: this.$t('homePage.device.gridMode') + ':',
|
|||
|
|
size: 14,
|
|||
|
|
color: "#999999",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 14,
|
|||
|
|
color: "#000",
|
|||
|
|
left: 80
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
//6
|
|||
|
|
{
|
|||
|
|
type: "text",
|
|||
|
|
coord: [
|
|||
|
|
[35, 140]
|
|||
|
|
],
|
|||
|
|
font: [{
|
|||
|
|
text: this.$t('homePage.device.deviceState') + ':',
|
|||
|
|
size: 14,
|
|||
|
|
color: "#999",
|
|||
|
|
width: 50,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
text: "",
|
|||
|
|
size: 14,
|
|||
|
|
color: "#000",
|
|||
|
|
left: 65
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
],
|
|||
|
|
imageCanvasData: [{
|
|||
|
|
//AC/DC
|
|||
|
|
type: "image",
|
|||
|
|
url: "/static/topology/DC.png",
|
|||
|
|
coord: [
|
|||
|
|
[155, 110],
|
|||
|
|
[30, 30],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
//电池
|
|||
|
|
type: "image",
|
|||
|
|
url: "/static/topology/battary.png",
|
|||
|
|
coord: [
|
|||
|
|
[144, 240],
|
|||
|
|
[50, 50],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
lineCanvasData: [{
|
|||
|
|
type: "line",
|
|||
|
|
coord: [
|
|||
|
|
[60, 30],
|
|||
|
|
[280, 30],
|
|||
|
|
],
|
|||
|
|
color: "#19875c",
|
|||
|
|
width: 2,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "line",
|
|||
|
|
coord: [
|
|||
|
|
[170, 30],
|
|||
|
|
[170, 240],
|
|||
|
|
],
|
|||
|
|
color: "#19875c",
|
|||
|
|
width: 2,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
rectCanvasData: [{
|
|||
|
|
type: "rect",
|
|||
|
|
background: "#19875c",
|
|||
|
|
coord: [
|
|||
|
|
[160, 50],
|
|||
|
|
[20, 30],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "rect",
|
|||
|
|
background: "#19875c",
|
|||
|
|
coord: [
|
|||
|
|
[160, 180],
|
|||
|
|
[20, 30],
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
currentStation() {
|
|||
|
|
return this.vuex_currentStation;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
currentStation: {
|
|||
|
|
handler(val) {
|
|||
|
|
this.stationId = val.id;
|
|||
|
|
},
|
|||
|
|
deep: true,
|
|||
|
|
immediate: true,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
getData(srcId) {
|
|||
|
|
this.srcId = srcId
|
|||
|
|
this.getChart()
|
|||
|
|
this.getStatus()
|
|||
|
|
},
|
|||
|
|
getChart() {
|
|||
|
|
const self = this
|
|||
|
|
self.chartLoading = true;
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
self.$u.api.deviceList
|
|||
|
|
.GetPCSCurve({
|
|||
|
|
stationId: this.stationId,
|
|||
|
|
sampleTime: this.time,
|
|||
|
|
srcId: this.srcId,
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
self.chartLoading = false;
|
|||
|
|
self.initChargeChart(res.data);
|
|||
|
|
// this.getStatus();
|
|||
|
|
resolve(res);
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
reject("错误");
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
self.chartLoading = false;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
initChargeChart(val) {
|
|||
|
|
const gonglv = [];
|
|||
|
|
const soc = [];
|
|||
|
|
const xAxis = [];
|
|||
|
|
val.forEach((v) => {
|
|||
|
|
xAxis.push(v.data);
|
|||
|
|
gonglv.push(v.pcsRealTimeCurve);
|
|||
|
|
soc.push(v.inCoreDataCurve);
|
|||
|
|
});
|
|||
|
|
this.curve_option = {
|
|||
|
|
color: ["#009C77", "#BFE49F"],
|
|||
|
|
animationDuration: 500,
|
|||
|
|
animationEasing: "cubicInOut",
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: "axis",
|
|||
|
|
axisPointer: {},
|
|||
|
|
confine: true,
|
|||
|
|
textStyle: {
|
|||
|
|
textShadowBlur: 10, // 重点
|
|||
|
|
textShadowColor: 'transparent', // 重点
|
|||
|
|
},
|
|||
|
|
position: function(point, params, dom, rect, size) {
|
|||
|
|
// 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
|
|||
|
|
// 提示框位置
|
|||
|
|
var x = 0; // x坐标位置
|
|||
|
|
var y = 0; // y坐标位置
|
|||
|
|
|
|||
|
|
// 当前鼠标位置
|
|||
|
|
var pointX = point[0];
|
|||
|
|
var pointY = point[1];
|
|||
|
|
|
|||
|
|
// 外层div大小
|
|||
|
|
// var viewWidth = size.viewSize[0];
|
|||
|
|
// var viewHeight = size.viewSize[1];
|
|||
|
|
|
|||
|
|
// 提示框大小
|
|||
|
|
var boxWidth = size.contentSize[0];
|
|||
|
|
var boxHeight = size.contentSize[1];
|
|||
|
|
|
|||
|
|
// boxWidth > pointX 说明鼠标左边放不下提示框
|
|||
|
|
if (boxWidth > pointX) {
|
|||
|
|
x = 5; // 自己定个x坐标值，以防出屏
|
|||
|
|
y -= 15; // 防止点被覆盖住，可根据情况自行调节
|
|||
|
|
} else {
|
|||
|
|
// 左边放的下
|
|||
|
|
x = pointX - boxWidth - 15;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// boxHeight > pointY 说明鼠标上边放不下提示框
|
|||
|
|
if (boxHeight + 20 > pointY) {
|
|||
|
|
y = pointY + 15;
|
|||
|
|
} else if (boxHeight > pointY) {
|
|||
|
|
y = 5;
|
|||
|
|
} else {
|
|||
|
|
// 上边放得下
|
|||
|
|
y += pointY - boxHeight;
|
|||
|
|
}
|
|||
|
|
return [x, y];
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
top: "15%",
|
|||
|
|
left: "5%",
|
|||
|
|
right: "3%",
|
|||
|
|
bottom: "10%",
|
|||
|
|
containLabel: true,
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
type: "category",
|
|||
|
|
data: xAxis,
|
|||
|
|
splitLine: {
|
|||
|
|
show: false,
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
show: true,
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
formatter: function(params) {
|
|||
|
|
let newParamsName = "";
|
|||
|
|
const paramsNameNumber = params.length; // 文字总长度
|
|||
|
|
const provideNumber = 11; //一行显示几个字
|
|||
|
|
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
|
|||
|
|
if (paramsNameNumber > provideNumber) {
|
|||
|
|
for (let p = 0; p < rowNumber; p++) {
|
|||
|
|
const start = p * provideNumber;
|
|||
|
|
const end = start + provideNumber;
|
|||
|
|
const tempStr =
|
|||
|
|
p === rowNumber - 1 ?
|
|||
|
|
params.substring(start, paramsNameNumber) :
|
|||
|
|
params.substring(start, end) + "\n";
|
|||
|
|
newParamsName += tempStr;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
newParamsName = params;
|
|||
|
|
}
|
|||
|
|
return newParamsName;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
yAxis: [{
|
|||
|
|
type: "value",
|
|||
|
|
name: this.$t('homePage.device.totalActivePower') + "(kW)",
|
|||
|
|
axisLabel: {
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
},
|
|||
|
|
min: function(value) {
|
|||
|
|
return Math.floor(
|
|||
|
|
(Math.abs(value.min) < value.max ?
|
|||
|
|
-value.max * 1.05 :
|
|||
|
|
value.min * 1.05
|
|||
|
|
).toFixed(2)
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
max: function(value) {
|
|||
|
|
return Math.ceil(
|
|||
|
|
(Math.abs(value.min) < value.max ?
|
|||
|
|
value.max * 1.05 :
|
|||
|
|
-value.min * 1.05
|
|||
|
|
).toFixed(2)
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
padding: [0, 0, 0, 30],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: "value",
|
|||
|
|
name: this.$t('homePage.device.totalReactivePower') + "(kVar)",
|
|||
|
|
axisLabel: {
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {
|
|||
|
|
color: "#A3A3A3",
|
|||
|
|
},
|
|||
|
|
min: function(value) {
|
|||
|
|
return Math.floor(
|
|||
|
|
(Math.abs(value.min) < value.max ?
|
|||
|
|
-value.max * 1.05 :
|
|||
|
|
value.min * 1.05
|
|||
|
|
).toFixed(2)
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
max: function(value) {
|
|||
|
|
return Math.ceil(
|
|||
|
|
(Math.abs(value.min) < value.max ?
|
|||
|
|
value.max * 1.05 :
|
|||
|
|
-value.min * 1.05
|
|||
|
|
).toFixed(2)
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
nameTextStyle: {
|
|||
|
|
fontSize: 12,
|
|||
|
|
padding: [0, 0, 0, -90],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
dataZoom: {
|
|||
|
|
type: "inside",
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
name: this.$t('homePage.device.totalActivePower'),
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
symbol: "none",
|
|||
|
|
areaStyle: {
|
|||
|
|
opacity: 0,
|
|||
|
|
},
|
|||
|
|
// lineStyle: {
|
|||
|
|
// color: '#00C8FF'
|
|||
|
|
// },
|
|||
|
|
data: gonglv,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: this.$t('homePage.device.totalReactivePower'),
|
|||
|
|
type: "line",
|
|||
|
|
smooth: true,
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
symbol: "none",
|
|||
|
|
areaStyle: {
|
|||
|
|
opacity: 0,
|
|||
|
|
},
|
|||
|
|
// lineStyle: {
|
|||
|
|
// color: '#FBBB11'
|
|||
|
|
// },
|
|||
|
|
data: soc,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
openTimeAction() {
|
|||
|
|
this.timeShow = true;
|
|||
|
|
},
|
|||
|
|
getStatus() {
|
|||
|
|
this.stationLoading = true
|
|||
|
|
const self = this;
|
|||
|
|
|
|||
|
|
this.$u.api.deviceList
|
|||
|
|
.GetNewValue({
|
|||
|
|
stationId: this.stationId,
|
|||
|
|
srcId: this.srcId,
|
|||
|
|
colList: [
|
|||
|
|
"runState",
|
|||
|
|
"remoteInPlace",
|
|||
|
|
"onGrid",
|
|||
|
|
"offGrid",
|
|||
|
|
"stateCharging",
|
|||
|
|
"stateDischarging",
|
|||
|
|
"deviceStateStand",
|
|||
|
|
"deviceStateFault",
|
|||
|
|
"deviceStateFull",
|
|||
|
|
"deviceStateEmpty",
|
|||
|
|
"acBreaker",
|
|||
|
|
"dcBreaker",
|
|||
|
|
"soc",
|
|||
|
|
"outputPower",
|
|||
|
|
"reactivePowerPCS",
|
|||
|
|
"grid",
|
|||
|
|
"volA",
|
|||
|
|
"volB",
|
|||
|
|
"volC",
|
|||
|
|
"currentA",
|
|||
|
|
"currentB",
|
|||
|
|
"currentC",
|
|||
|
|
"dcPower",
|
|||
|
|
"dcInputVol",
|
|||
|
|
"dcCurrent",
|
|||
|
|
],
|
|||
|
|
})
|
|||
|
|
.then((res) => {
|
|||
|
|
const battery = self.updateBattery(res.data.soc?.value ? res.data.soc.value : 0);
|
|||
|
|
self.rectCanvasData.push(battery)
|
|||
|
|
this.panelData = {
|
|||
|
|
outputPower: res.data.outputPower?.value ? res.data.outputPower?.value : 0,
|
|||
|
|
reactivePowerPCS: res.data.reactivePowerPCS?.value ? res.data.reactivePowerPCS?.value :
|
|||
|
|
0,
|
|||
|
|
grid: res.data.grid?.value ? res.data.grid?.value : 0,
|
|||
|
|
volA: res.data.volA?.value ? res.data.volA?.value : 0,
|
|||
|
|
volB: res.data.volB?.value ? res.data.volB?.value : 0,
|
|||
|
|
volC: res.data.volC?.value ? res.data.volC?.value : 0,
|
|||
|
|
currentA: res.data.currentA?.value ? res.data.currentA?.value : 0,
|
|||
|
|
currentB: res.data.currentB?.value ? res.data.currentB?.value : 0,
|
|||
|
|
currentC: res.data.currentC?.value ? res.data.currentC?.value : 0,
|
|||
|
|
dcPower: res.data.dcPower?.value ? res.data.dcPower?.value : 0,
|
|||
|
|
dcInputVol: res.data.dcInputVol?.value ? res.data.dcInputVol?.value : 0,
|
|||
|
|
dcCurrent: res.data.dcCurrent?.value ? res.data.dcCurrent?.value : 0,
|
|||
|
|
};
|
|||
|
|
this.textCanvasData[2].font[1].text = res.data.soc?.value ? res.data.soc.value + "%" : 0 + "%";
|
|||
|
|
this.textCanvasData[3].font[1].text = this.workStatus(res.data.runState?.value);
|
|||
|
|
if (this.stationId === 349 || this.stationId === 362 || this.stationId === 363) {
|
|||
|
|
if (res.data.remoteInPlace?.value === 0) {
|
|||
|
|
this.textCanvasData[4].font[1].text = this.$t('homePage.device.localAutomatic')
|
|||
|
|
}
|
|||
|
|
if (res.data.remoteInPlace?.value === 1) {
|
|||
|
|
this.textCanvasData[4].font[1].text = this.$t('homePage.device.localManual')
|
|||
|
|
}
|
|||
|
|
if (res.data.remoteInPlace?.value === 2) {
|
|||
|
|
this.textCanvasData[4].font[1].text = this.$t('homePage.device.distance')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
if (res.data.remoteInPlace?.value === 0) {
|
|||
|
|
this.textCanvasData[4].font[1].text = this.$t('homePage.device.local')
|
|||
|
|
}
|
|||
|
|
if (res.data.remoteInPlace?.value === 1) {
|
|||
|
|
this.textCanvasData[4].font[1].text = this.$t('homePage.device.distance')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (!res.data.acBreaker?.value) {
|
|||
|
|
self.rectCanvasData[0].background = "rgba(25, 135, 92, 0.6y4)";
|
|||
|
|
}
|
|||
|
|
if (!res.data.dcBreaker?.value) {
|
|||
|
|
self.rectCanvasData[1].background = "rgba(25, 135, 92, 0.6y4)";
|
|||
|
|
}
|
|||
|
|
this.textCanvasData[5].font[1].text = res.data.onGrid?.value ?
|
|||
|
|
this.$t('homePage.device.grid') :
|
|||
|
|
this.$t('homePage.device.offGrid');
|
|||
|
|
if(res.data.outputPower?.value){
|
|||
|
|
this.textCanvasData[6].font[1].text = this.getFlowDirection(res.data.outputPower?.value, res
|
|||
|
|
.data.flowDirection)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.canvasData = [...this.textCanvasData, ...this.imageCanvasData, ...this
|
|||
|
|
.lineCanvasData, ...this.rectCanvasData
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
.finally((res) => {
|
|||
|
|
this.stationLoading = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
updateBattery(value) {
|
|||
|
|
//电池电量 value 为0~100
|
|||
|
|
const batteryHeight = 0.35 * value;
|
|||
|
|
const battery = {
|
|||
|
|
type: "rect",
|
|||
|
|
background: "#19875c",
|
|||
|
|
coord: [
|
|||
|
|
[156, 285 - batteryHeight],
|
|||
|
|
[25.5, batteryHeight],
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
return battery;
|
|||
|
|
},
|
|||
|
|
getRunState(value, value2) {
|
|||
|
|
if (value) {
|
|||
|
|
return this.$t('homePage.device.standby');
|
|||
|
|
} else if (value2) {
|
|||
|
|
return this.$t('homePage.device.fault');
|
|||
|
|
} else {
|
|||
|
|
return "";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 设备工作状态
|
|||
|
|
workStatus(val) {
|
|||
|
|
if (val === 0) {
|
|||
|
|
return this.$t('homePage.device.shutdown')
|
|||
|
|
} else if (val === 1) {
|
|||
|
|
return this.$t('homePage.device.run')
|
|||
|
|
} else if (val === 2) {
|
|||
|
|
return this.$t('homePage.device.standby')
|
|||
|
|
} else {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 充放电状态
|
|||
|
|
getFlowDirection(val, flowDirection) {
|
|||
|
|
if (flowDirection === 2) {
|
|||
|
|
if (+val > +1) {
|
|||
|
|
return this.$t('homePage.device.discharge')
|
|||
|
|
}
|
|||
|
|
if (+val < -1) {
|
|||
|
|
return this.$t('homePage.device.charge')
|
|||
|
|
}
|
|||
|
|
if (val < 1 || +val.abs < 1 || !val) {
|
|||
|
|
return this.$t('homePage.device.standing')
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (+val > +1) {
|
|||
|
|
return this.$t('homePage.device.charge')
|
|||
|
|
}
|
|||
|
|
if (+val < -1) {
|
|||
|
|
return this.$t('homePage.device.discharge')
|
|||
|
|
}
|
|||
|
|
if (val < 1 || +val.abs < 1 || !val) {
|
|||
|
|
return this.$t('homePage.device.standing')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
// 电池信息
|
|||
|
|
updateBattery(value) {
|
|||
|
|
//电池电量 value 为0~100
|
|||
|
|
const batteryHeight = 0.35 * value;
|
|||
|
|
const battery = {
|
|||
|
|
type: "rect",
|
|||
|
|
background: "#19875c",
|
|||
|
|
coord: [
|
|||
|
|
[156, 285 - batteryHeight],
|
|||
|
|
[25.5, batteryHeight],
|
|||
|
|
],
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return battery;
|
|||
|
|
},
|
|||
|
|
// 历史曲线
|
|||
|
|
showHistory(name, modelCol, modelType, unit) {
|
|||
|
|
this.hisParams = {
|
|||
|
|
modelCol: modelCol,
|
|||
|
|
modelType: modelType,
|
|||
|
|
unit: unit
|
|||
|
|
}
|
|||
|
|
this.chartTitle = name
|
|||
|
|
this.histroyShow = true
|
|||
|
|
},
|
|||
|
|
actionSheetCallback(index) {
|
|||
|
|
this.sampleTime = this.actionSheetList[index].text;
|
|||
|
|
this.time = this.actionSheetList[index].value;
|
|||
|
|
this.getChart()
|
|||
|
|
},
|
|||
|
|
closeTimeAction() {
|
|||
|
|
this.timeShow = false;
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.pcs-warp {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
height: 100%;
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 20rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
border: 16rpx;
|
|||
|
|
box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.topology-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 640rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-right-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
|
|||
|
|
.time {
|
|||
|
|
padding-right: 10rpx;
|
|||
|
|
display: inline-block;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 10rpx 20rpx 10rpx 20rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top-right-item {
|
|||
|
|
padding: 5rpx 10rpx;
|
|||
|
|
border: 1rpx solid #4c9ee6;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #4c9ee6;
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
|
|||
|
|
&.active {
|
|||
|
|
background: #4c9ee6;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.chart-box {
|
|||
|
|
width: 650rpx;
|
|||
|
|
height: 460rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.group-box {
|
|||
|
|
width: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.group-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 199rpx;
|
|||
|
|
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #d7e9e548;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin: 10rpx 10rpx;
|
|||
|
|
position: relative;
|
|||
|
|
padding: 10rpx 0;
|
|||
|
|
|
|||
|
|
.history-icon {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0rpx;
|
|||
|
|
top: 0rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 40rpx;
|
|||
|
|
height: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-con {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
// margin-left: 15rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.item-title {
|
|||
|
|
width: 100%;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #2a2a2a;
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-num {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #282828;
|
|||
|
|
font-weight: bold;
|
|||
|
|
max-width: 90%;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-unit {
|
|||
|
|
color: #cccccc;
|
|||
|
|
font-size: 16rpx;
|
|||
|
|
padding-left: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|