xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'develop' into single-develop

Browse Source
This commit is contained in:
白菜
2025-11-05 14:10:00 +08:00
parent 2a3d2fcf63 da0d3d12ef
commit c403922639
59 changed files with 4535 additions and 1971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
src/views/ems/dzjk/sbjk/PointChart.vue
View File

@ -1,25 +1,33 @@
<!--电位展示图表-->
<template>
<el-dialog
:visible.sync="show"
:title="pointName"
:close-on-click-modal="false"
show-close
destroy-on-close
lock-scroll
append-to-body
width="1000px"
class="ems-dialog"
:before-close="handleColsed"
:visible.sync="show"
:title="pointName"
:close-on-click-modal="false"
show-close
destroy-on-close
lock-scroll
append-to-body
width="1000px"
class="ems-dialog"
:before-close="handleClosed"
>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding time-range-card"
>
<div slot="header" class="time-range-header">
<el-radio-group class="card-title" v-model="dataUnit">
<el-radio :label="1">分钟</el-radio>
<el-radio :label="2">小时</el-radio>
<el-radio :label="3">天</el-radio>
</el-radio-group>
<date-time-select ref="dateTimeSelect" :data-unit="dataUnit" @initDate="((e)=>dataRange=e||[])" @updateDate="updateDate"/>
<date-time-select
ref="dateTimeSelect"
:data-unit="dataUnit"
@initDate="(e) => (dataRange = e || [])"
@updateDate="updateDate"
/>
</div>
<div style="height: 350px" id="searchChart"></div>
</el-card>
@ -29,178 +37,240 @@
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
import {getPointValueList} from "@/api/ems/search";
import { getPointValueList } from "@/api/ems/search";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
components: {DateRangeSelect, DateTimeSelect},
components: { DateRangeSelect, DateTimeSelect },
mixins: [resize],
props: {
siteId:{
siteId: {
type: String,
required: true,
}
},
},
computed: {
isDtdc(){
return this.categoryName === '单体电池'
isDtdc() {
return this.deviceCategory === "BATTERY";
},
},
watch:{
watch: {
show(val) {
if(!val){
this.pointName=''
this.categoryName=''
this.deviceId=''
this.dataUnit=1
if (!val) {
this.pointName = "";
this.deviceCategory = "";
this.deviceId = "";
this.dataUnit = 1;
this.child = "";
if (!this.chart) {
return
return;
}
this.hideLoading()
this.chart.dispose()
this.chart = null
this.hideLoading();
this.chart.dispose();
this.chart = null;
}
},
dataUnit:{
handler(newVal,oldVal){
console.log('wacth到了dataUnit的变化',newVal,oldVal)
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init()
this.getDate()
})
dataUnit: {
handler(newVal, oldVal) {
if (!this.show) return;
console.log("wacth到了dataUnit的变化", newVal, oldVal);
this.$nextTick(() => {
this.$refs.dateTimeSelect.init();
this.getDate();
});
},
}
},
},
data(){
return{
show:false,
chart:null,
dataUnit:1,
dataRange:[],
child:[],//单体电池需要数据 暂不删除
pointName:'',
categoryName:'',
deviceId:''
}
data() {
return {
show: false,
chart: null,
dataUnit: 1,
dataRange: [],
child: "", //单体电池需要数据
pointName: "",
deviceCategory: "",
deviceId: "",
};
},
methods:{
showChart({pointName,categoryName,deviceId}){
methods: {
showChart({ pointName, deviceCategory, deviceId, child = "" }) {
//初始化数据
this.pointName=pointName
this.categoryName=categoryName
this.deviceId=deviceId
this.show = true
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init()
this.initChart()
this.getDate()
})
this.pointName = pointName;
this.deviceCategory = deviceCategory;
this.deviceId = deviceId;
child && (this.child = child);
this.show = true;
this.$nextTick(() => {
this.$refs.dateTimeSelect.init();
this.initChart();
this.getDate();
});
},
initChart() {
this.chart = echarts.init(document.querySelector('#searchChart'))
this.chart = echarts.init(document.querySelector("#searchChart"));
},
showLoading(){
this.chart && this.chart.showLoading()
showLoading() {
this.chart && this.chart.showLoading();
},
hideLoading(){
this.chart && this.chart.hideLoading()
hideLoading() {
this.chart && this.chart.hideLoading();
},
getDate(){
this.showLoading()
const{dataUnit,dataRange:[start='',end=''],child}=this
let siteDeviceMap={}
child.forEach(([first,second,third])=>{
if(siteDeviceMap[first]){
siteDeviceMap[first].push(third)
}else{
siteDeviceMap[first]=[]
siteDeviceMap[first].push(third)
}
})
let startDate,endDate
if(start && dataUnit===3){
// startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
startDate = start + ' 00:00:00'
}else{
startDate=start
}
if(end && dataUnit===3){
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
endDate = end + ' 00:00:00'
}else{
endDate=end
}
getDate() {
this.showLoading();
const {
siteId,
dataUnit,
dataRange: [start = "", end = ""],
child,
deviceId,
deviceCategory,
pointName,
} = this;
let siteDeviceMap = {};
child && (siteDeviceMap[siteId] = child);
let startDate, endDate;
if (start && dataUnit === 3) {
// startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
startDate = start + " 00:00:00";
} else {
startDate = start;
}
if (end && dataUnit === 3) {
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
endDate = end + " 00:00:00";
} else {
endDate = end;
}
getPointValueList({siteIds:[this.siteId],deviceId:this.deviceId,dataUnit,categoryName:this.categoryName,pointName:this.pointName,startDate,endDate,siteDeviceMap:{}}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{
this.hideLoading()
getPointValueList({
siteIds: [siteId],
deviceId,
dataUnit,
deviceCategory,
pointName,
startDate,
endDate,
siteDeviceMap,
})
.then((response) => {
this.setOption(response?.data || []);
})
.finally(() => {
this.hideLoading();
});
},
setOption(data) {
if(!this.chart) return
this.chart.clear()
console.log('返回的数据',data)
let dataset=[]
if(data.length>0){
data.forEach((item,index)=>{
item.deviceList.forEach(inner=>{
if (!this.chart) return;
this.chart.clear();
console.log("返回的数据", data);
let dataset = [];
if (data.length > 0) {
data.forEach((item, index) => {
item.deviceList.forEach((inner) => {
dataset.push({
name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${inner.deviceId}`,
type:'line',
xdata:[],
data:[]
})
const length = dataset.length
inner.pointValueList.forEach(value=>{
dataset[length-1].xdata.push(value.valueDate)
dataset[length-1].data.push(value.pointValue)
})
})
})
}else{
this.$message.warning('暂无数据')
name: `${
this.isDtdc
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}${inner.deviceId}`
: `${inner.deviceId}`
}`,
type: "line",
markPoint: {
symbolSize: 30,
emphasis: {
disabled:false//打开 鼠标高亮
},
data: [//最大值、最小值
{
// type: 'max',
name: `最大值`,
coord:[inner.maxDate,inner.maxValue],
relativeTo:'coordinate',
label: {
position: "top",
formatter: item.dataType === 2 ? ([
`最大值:${inner.maxValue}`,
// `平均值:${inner.avgValue}`,
`差值:${inner.diffValue}`,
]).join('\n') : ([
`最大值:${inner.maxValue}`,
// `平均值:${inner.avgValue}`,
]).join('\n'),
},
},
{
// type: 'min',
name: `最小值`,
coord:[inner.minDate,inner.minValue],
relativeTo:'coordinate',
label: {
position: "top",
formatter: item.dataType === 2 ? ([
`最小值:${inner.minValue}`,
// `平均值:${inner.avgValue}`,
`差值:${inner.diffValue}`,
]).join('\n') : ([
`最小值:${inner.minValue}`,
// `平均值:${inner.avgValue}`,
]).join('\n'),
}
}
]
},
xdata: [],
data: [],
});
const length = dataset.length;
inner.pointValueList.forEach((value) => {
dataset[length - 1].xdata.push(value.valueDate);
dataset[length - 1].data.push(value.pointValue);
});
});
});
} else {
this.$message.warning("暂无数据");
}
console.log('图表数据',dataset)
console.log("图表数据", dataset);
this.chart.setOption({
legend: {
// left: 'center',
// top: '10',
},
grid: {
containLabel: true
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "cross", // 默认为直线，可选为：'line' | 'shadow'
},
},
textStyle:{
color:"#333333",
textStyle: {
color: "#333333",
},
xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
xAxis: { type: "category", data: dataset?.[0]?.xdata || [] },
yAxis: {
type: 'value',
type: "value",
},
dataZoom: [
{
type: 'inside',
type: "inside",
start: 0,
end: 100
end: 100,
},
{
start: 0,
end: 100
}
end: 100,
},
],
series: dataset
})
series: dataset,
});
},
updateDate(val){
this.dataRange =val || []
this.getDate()
updateDate(val) {
this.dataRange = val || [];
this.getDate();
},
handleColsed(done) {
handleClosed(done) {
if (!this.chart) {
return done();
}
@ -208,14 +278,13 @@ export default {
this.chart = null;
done();
},
}
}
},
};
</script>
<style scoped lang="scss">
::v-deep {
.card-title .el-radio{
.card-title .el-radio {
line-height: 40px;
}
}
</style>
</style>

17
src/views/ems/dzjk/sbjk/bmsdcc/index.vue
View File

@ -20,7 +20,7 @@
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions direction="vertical" :column="3" :colon="false">
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
<span class="pointer" @click="showChart(item.pointName || '','电池簇',baseInfo.deviceId)">
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
</span>
</el-descriptions-item>
@ -30,7 +30,7 @@
<div class="process-line-bg">
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
</div>
<div class="process pointer" @click="showChart( '当前SOC','电池簇',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div>
<div class="process pointer" @click="showChart( '当前SOC',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div>
</div>
</div>
<el-table
@ -50,14 +50,14 @@
label="单体平均值"
>
<template slot-scope="scope">
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.avgData}}</span>
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{scope.row.avgData}}</span>
</template>
</el-table-column>
<el-table-column
prop="minData"
label="单体最小值">
<template slot-scope="scope">
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.minData}}</span>
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{scope.row.minData}}</span>
</template>
</el-table-column>
<el-table-column
@ -68,7 +68,7 @@
prop="maxData"
label="单体最大值">
<template slot-scope="scope">
<span class="pointe " @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.maxData}}</span>
<span class="pointer " @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{scope.row.maxData}}</span>
</template>
</el-table-column>
<el-table-column
@ -106,7 +106,7 @@ export default {
'电压单体平均值':'电压平均值',
'电压单体最大值':'最高单体电压',
'温度单体最小值':'最低单体温度',
'温度单体平均值':'温度平均值',
'温度单体平均值':'平均单体温度',
'温度单体最大值':'最高单体温度',
'SOC单体最小值':'最低单体SOC',
'SOC单体平均值':'当前SOC',
@ -127,9 +127,8 @@ export default {
}
},
methods:{
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
showChart(pointName,deviceId){
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'CLUSTER',deviceId})
},
updateData(){
this.loading = true

23
src/views/ems/dzjk/sbjk/bmszl/index.vue
View File

@ -20,7 +20,7 @@
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions :colon="false" :column="3" direction="vertical">
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1" contentClassName="descriptions-direction" labelClassName="descriptions-label">
<span class="pointer" @click="showChart(item.pointName || '','电池堆',baseInfo.deviceId)">
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
{{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span>
</span>
</el-descriptions-item>
@ -30,7 +30,7 @@
<div class="process-line-bg">
<div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
</div>
<div class="process pointer" @click="showChart('当前SOC','电池堆',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
<div class="process pointer" @click="showChart('当前SOC',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
</div>
</div>
<el-table
@ -47,26 +47,26 @@
label="簇电压"
>
<template slot-scope="scope">
<span class="pointer" @click="showChart('簇电压','电池簇',scope.row.clusterId)">{{scope.row.clusterVoltage}} V</span>
<span class="pointer" @click="showChart('簇电压',scope.row.clusterId,'CLUSTER')">{{scope.row.clusterVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="簇电流">
<template slot-scope="scope">
<span class="pointer" @click="showChart('簇电流','电池簇',scope.row.clusterId)">{{scope.row.clusterCurrent}} A</span>
<span class="pointer" @click="showChart('簇电流',scope.row.clusterId,'CLUSTER')">{{scope.row.clusterCurrent}} A</span>
</template>
</el-table-column>
<el-table-column
label="簇SOC">
<template slot-scope="scope">
<span class="pointer" @click="showChart('当前SOC','电池簇',scope.row.clusterId)">{{scope.row.currentSoc}} %</span>
<span class="pointer" @click="showChart('当前SOC',scope.row.clusterId,'CLUSTER')">{{scope.row.currentSoc}} %</span>
</template>
</el-table-column>
<el-table-column
label="单体最高电压"
prop="maxVoltage">
<template slot-scope="scope">
<span class="pointer" @click="showChart('最高单体电压','电池簇',scope.row.clusterId)">{{scope.row.maxCellVoltage}} V</span>
<span class="pointer" @click="showChart('最高单体电压',scope.row.clusterId,'CLUSTER')">{{scope.row.maxCellVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
@ -77,7 +77,7 @@
label="单体最低电压"
prop="minVoltage">
<template slot-scope="scope">
<span class="pointer" @click="showChart('最低单体电压','电池簇',scope.row.clusterId)">{{scope.row.minCellVoltage}} V</span>
<span class="pointer" @click="showChart('最低单体电压',scope.row.clusterId,'CLUSTER')">{{scope.row.minCellVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
@ -87,7 +87,7 @@
<el-table-column
label="单体最高温度">
<template slot-scope="scope">
<span class="pointer" @click="showChart('最高单体温度','电池簇',scope.row.clusterId)">{{scope.row.maxCellTemp}} &#8451;</span>
<span class="pointer" @click="showChart('最高单体温度',scope.row.clusterId,'CLUSTER')">{{scope.row.maxCellTemp}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
@ -98,7 +98,7 @@
label="单体最低温度"
prop="minTemperature">
<template slot-scope="scope">
<span class="pointer" @click="showChart('最低单体温度','电池簇',scope.row.clusterId)">{{scope.row.minCellTemp}} &#8451;</span>
<span class="pointer" @click="showChart('最低单体温度',scope.row.clusterId,'CLUSTER')">{{scope.row.minCellTemp}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
@ -141,9 +141,8 @@ export default {
}
},
methods:{
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
showChart(pointName,deviceId,deviceCategory = 'STACK'){
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory,deviceId})
},
updateData(){
this.loading = true

244
src/views/ems/dzjk/sbjk/db/index.vue
View File

@ -1,76 +1,37 @@
<template>
<div v-loading="loading">
<el-card
shadow="always"
class="sbjk-card-container"
:class="{
'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
'running-card-container':zbInfo.emsCommunicationStatus === '0'
<el-card
v-for="(item,index) in list"
:key="index+'dbList'"
shadow="always"
class="sbjk-card-container list"
:class="{
'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
'running-card-container':item.emsCommunicationStatus === '0'
}"
>
<div slot="header">
<span class="large-title">1#{{ zbInfo.deviceName }}</span>
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
zbInfo.emsCommunicationStatus
]
}}
</div>
<div>数据更新时间：{{ zbInfo.dataUpdateTime }}</div>
</div>
</div>
<el-table
class="common-table"
:data="zbInfo.loadDataDetailInfo"
@cell-click="(row,col)=>{handlerCell(zbInfo.deviceId,row,col)}"
stripe
style="width: 100%"
>
<el-table-column prop="category" label="类别"> </el-table-column>
<el-table-column prop="totalKwh" label="总/kWh"> </el-table-column>
<el-table-column prop="peakKwh" label="尖/kWh"> </el-table-column>
<el-table-column prop="highKwh" label="峰/kWh"> </el-table-column>
<el-table-column prop="flatKwh" label="平/kWh"> </el-table-column>
<el-table-column prop="valleyKwh" label="谷/kWh"> </el-table-column>
</el-table>
</el-card>
<el-card
shadow="always"
class="sbjk-card-container"
style="margin-top: 20px"
:class="{
'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
'running-card-container':zbInfo.emsCommunicationStatus === '0'
}"
>
<div slot="header">
<span class="large-title">2#{{ cnbInfo.deviceName }}</span>
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
cnbInfo.emsCommunicationStatus
]
}}
</div>
<div>数据更新时间：{{ cnbInfo.dataUpdateTime }}</div>
</div>
</div>
<el-table
class="common-table"
:data="cnbInfo.meteDataDetailInfo"
@cell-click="(row,col)=>{handlerCellCN(cnbInfo.deviceId,row,col)}"
stripe
style="width: 100%"
>
<el-table-column prop="category" label="类别"> </el-table-column>
<el-table-column prop="activePower" label="有功功率"> </el-table-column>
<el-table-column prop="reactivePower" label="无功功率">
</el-table-column>
</el-table>
</el-card>
>
<div slot="header">
<span class="large-title">{{index+1}}#{{ item.deviceName }}</span>
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
item.emsCommunicationStatus
]
}}
</div>
<div>数据更新时间：{{ item.dataUpdateTime }}</div>
</div>
</div>
<el-row>
<el-col v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" :span="8">
<span class="pointer" @click="showChart(tempDataItem.pointName,item.deviceId)">
{{tempDataItem.name}}：{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span>
</span>
</el-col>
</el-row>
</el-card>
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
@ -87,39 +48,106 @@ export default {
data() {
return {
loading: false,
zbInfo: {},
cnbInfo: {},
list:[],
deviceIdTypeMsg:{
'LOAD':[
{
name:'正向有功电能',
attr:'forwardActive',
pointName:'正向有功电能'
},
{
name:'反向有功电能',
attr:'reverseActive',
pointName:'反向有功电能'
},
{
name:'正向无功电能',
attr:'forwardReactive',
pointName:'正向无功电能'
},
{
name:'反向无功电能',
attr:'reverseReactive',
pointName:'反向无功电能'
},
{
name:'有功功率',
attr:'activePower',
pointName:'总有功功率'
},
{
name:'无功功率',
attr:'reactivePower',
pointName:'总无功功率'
}
],
'METE':[
{
name:'正向有功电能',
attr:'forwardActive',
pointName:'正向有功电能'
},
{
name:'反向有功电能',
attr:'reverseActive',
pointName:'反向有功电能'
},
{
name:'正向无功电能',
attr:'forwardReactive',
pointName:'正向无功电能'
},
{
name:'反向无功电能',
attr:'reverseReactive',
pointName:'反向无功电能'
},
{
name:'有功功率',
attr:'activePower',
pointName:'总有功功率'
},
{
name:'无功功率',
attr:'reactivePower',
pointName:'总无功功率'
}
],
'METEGF':[
{
name:'有功电能',
attr:'activeEnergy',
pointName:'有功电能'
},
{
name:'无功电能',
attr:'reactiveEnergy',
pointName:'无功电能'
},
{
name:'有功功率',
attr:'activePower',
pointName:'总有功功率'
},
{
name:'无功功率',
attr:'reactivePower',
pointName:'总无功功率'
}
]
}
};
},
methods: {
handlerCell(id,row,column){
if(column.label !== '类别'){
const arr = row.category.split('')
arr.splice(6,0,column.label[0])
this.showChart(arr.join(''),'电表',id)
}
},
handlerCellCN(id,row,column){
if(column.label !== '类别'){
const arr = row.category.split('')
arr.splice(2,arr.length-2,column.label)
this.showChart(arr.join(''),'电表',id)
}
},
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
showChart(pointName,deviceId){
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'AMMETER',deviceId})
},
updateData(){
this.loading = true;
getAmmeterDataList(this.siteId)
.then((response) => {
this.zbInfo = JSON.parse(
JSON.stringify(response?.data?.ammeterLoadData || {})
);
this.cnbInfo = JSON.parse(
JSON.stringify(response?.data?.ammeterMeteData || {})
);
this.list = response?.data || []
})
.finally(() => {
this.loading = false;
@ -136,13 +164,25 @@ export default {
<style scoped lang="scss">
.sbjk-card-container {
::v-deep {
.el-table__row td{
&:not(:first-child){
.cell{
cursor: pointer;
}
}
&.list:not(:last-child){
margin-bottom: 25px;
}
.el-row{
background-color: #ffffff;
border:1px solid #eeeeee;
font-size: 14px;
line-height: 16px;
color: #333333;
.el-col{
padding:12px 0;
text-align: center;
position: relative;
}
.el-col{
border-bottom: 1px solid #eeeeee;
}
.el-col:not(:nth-child(3n)){
border-right: 1px solid #eeeeee;
}
}
}

31
src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
View File

@ -10,13 +10,17 @@
class="ems-dialog chart-detail-dialog"
:before-close="handleColsed"
>
<el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px">
<el-card
shadow="always"
class="common-card-container time-range-card"
style="margin-top: 20px"
>
<div slot="header" class="time-range-header">
<span class="card-title"></span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
<span class="card-title"></span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate" />
</div>
<div class="card-main" v-loading="loading">
<div id="lineChart" style="height: 310px;"></div>
<div id="lineChart" style="height: 310px"></div>
</div>
</el-card>
</el-dialog>
@ -28,7 +32,7 @@ import resize from "@/mixins/ems/resize";
import { getSingleBatteryData } from "@/api/ems/dzjk";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
components: {DateRangeSelect},
components: { DateRangeSelect },
mixins: [resize],
data() {
return {
@ -48,9 +52,9 @@ export default {
},
methods: {
// 更新时间范围 重置图表
updateDate(data){
this.dateRange=data || []
this.getData()
updateDate(data) {
this.dateRange = data || [];
this.getData();
},
handleColsed(done) {
if (!this.chart) {
@ -94,7 +98,7 @@ export default {
this.$nextTick(() => {
!this.chart &&
(this.chart = echarts.init(document.querySelector("#lineChart")));
this.$refs.dateRangeSelect.init()
this.$refs.dateRangeSelect.init();
});
},
setOption(data) {
@ -148,7 +152,6 @@ export default {
},
];
}
this.chart &&
this.chart.setOption({
color: ["#FFBD00", "#3C81FF", "#05AEA3", "#F86F70"],
@ -186,10 +189,10 @@ export default {
};
</script>
<style lang="scss" scoped>
.chart-detail-dialog{
::v-deep{
.el-dialog__body{
padding-top:0;
.chart-detail-dialog {
::v-deep {
.el-dialog__body {
padding-top: 0;
}
}
}

12
src/views/ems/dzjk/sbjk/dtdc/List.vue
View File

@ -10,14 +10,17 @@
v-for="(item, index) in tableData"
:key="index + 'dtdcList'"
:class="handleListClass(item)"
@click="chartDetail(item)"
>
<div style="font-size: 10px; font-weight: 600">
{{ item.clusterDeviceId }}
</div>
<div>#{{ item.deviceId }}</div>
<div class="dy">{{ item.voltage }}V</div>
<div class="wd">{{ item.temperature }}℃</div>
<div class="dy pointer" @click="chartDetail(item, '电压 (V)')">
{{ item.voltage }}V
</div>
<div class="wd pointer" @click="chartDetail(item, '温度 (℃)')">
{{ item.temperature }}℃
</div>
</div>
</div>
@ -101,7 +104,7 @@ export default {
//查看表格行图表
chartDetail(row, dataType = "") {
const { clusterDeviceId, deviceId } = row;
this.$emit("chart", { clusterDeviceId, deviceId, dataType });
this.$emit("chart", { ...row, dataType });
},
},
};
@ -123,7 +126,6 @@ export default {
box-sizing: content-box;
min-width: 60px;
width: auto;
cursor: pointer;
&::before {
display: block;
content: "";

22
src/views/ems/dzjk/sbjk/dtdc/Table.vue
View File

@ -8,10 +8,10 @@
>
<el-table-column prop="deviceId" label="单体编号"> </el-table-column>
<el-table-column prop="clusterDeviceId" label="簇号"> </el-table-column>
<el-table-column prop="voltage" label="电压（V）">
<el-table-column prop="voltage" label="电压 (V)">
<template slot-scope="scope">
<el-button
@click="chartDetail(scope.row, 'voltage')"
@click="chartDetail(scope.row, '电压 (V)')"
type="text"
size="small"
>
@ -19,10 +19,10 @@
</el-button>
</template>
</el-table-column>
<el-table-column prop="temperature" label="温度（℃）">
<el-table-column prop="temperature" label="温度 (℃)">
<template slot-scope="scope">
<el-button
@click="chartDetail(scope.row, 'temperature')"
@click="chartDetail(scope.row, '温度 (℃)')"
type="text"
size="small"
>
@ -30,10 +30,10 @@
</el-button>
</template>
</el-table-column>
<el-table-column prop="soc" label="SOC（%）">
<el-table-column prop="soc" label="SOC (%)">
<template slot-scope="scope">
<el-button
@click="chartDetail(scope.row, 'soc')"
@click="chartDetail(scope.row, 'SOC (%)')"
type="text"
size="small"
>
@ -41,10 +41,10 @@
</el-button>
</template>
</el-table-column>
<el-table-column prop="soh" label="SOH（%）">
<el-table-column prop="soh" label="SOH (%)">
<template slot-scope="scope">
<el-button
@click="chartDetail(scope.row, 'soh')"
@click="chartDetail(scope.row, 'SOH (%)')"
type="text"
size="small"
>
@ -52,13 +52,13 @@
</el-button>
</template>
</el-table-column>
<el-table-column label="曲线图">
<!-- <el-table-column label="曲线图">
<template slot-scope="scope">
<el-button @click="chartDetail(scope.row)" type="text" size="small">
展示
</el-button>
</template>
</el-table-column>
</el-table-column> -->
</el-table>
<!-- <el-pagination
v-show="tableData.length > 0"
@ -116,7 +116,7 @@ export default {
//查看表格行图表
chartDetail(row, dataType = "") {
const { clusterDeviceId, deviceId } = row;
this.$emit("chart", { clusterDeviceId, deviceId, dataType });
this.$emit("chart", { ...row, dataType });
},
},
};

24
src/views/ems/dzjk/sbjk/dtdc/index.vue
View File

@ -103,6 +103,7 @@
>
</el-pagination>
<chart-detail ref="chartDetail" />
<point-chart ref="pointChart" :site-id="siteId" />
</el-card>
</template>
@ -117,10 +118,17 @@ import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import ChartDetail from "./ChartDetail.vue";
import Table from "./Table.vue";
import List from "./List.vue";
import pointChart from "./../PointChart.vue";
export default {
name: "DzjkSbjkDtdc",
mixins: [getQuerySiteId],
components: { BarChart, ChartDetail, DtdcTable: Table, DtdcList: List },
components: {
BarChart,
ChartDetail,
DtdcTable: Table,
DtdcList: List,
pointChart,
},
computed: {
pointIdList() {
let obj = {};
@ -162,12 +170,14 @@ export default {
activeBtn !== menu && (this.activeBtn = menu);
},
//查看表格行图表
chartDetail({ clusterDeviceId, deviceId, dataType = "" }) {
const { siteId } = this;
this.$refs.chartDetail.initChart(
{ siteId, clusterDeviceId, deviceId },
dataType
);
chartDetail({ deviceId, clusterDeviceId, dataType = "" }) {
dataType &&
this.$refs.pointChart.showChart({
pointName: dataType,
deviceCategory:'BATTERY',
deviceId: clusterDeviceId,
child: [deviceId],
});
},
// 分页
handleSizeChange(val) {

95
src/views/ems/dzjk/sbjk/index.vue
View File

@ -1,55 +1,66 @@
<template>
<div
class="ems-dashboard-editor-container ems-content-container-padding sbjk-ems-dashboard-editor-container ems-third-menu-container"
>
<el-menu
class="ems-third-menu"
:default-active="$route.name"
background-color="#ffffff"
text-color="#666666"
active-text-color="#ffffff"
>
<el-menu-item
:index="item.name"
v-for="(item, index) in childrenRoute"
:key="index + 'dzjkChildrenRoute'"
<div class="ems-dashboard-editor-container ems-third-menu-container" v-loading="loading">
<el-menu
class="ems-third-menu"
:default-active="$route.name"
background-color="#ffffff"
text-color="#666666"
active-text-color="#ffffff"
>
<router-link
style="height: 100%; width: 100%; display: block"
:to="{ path: item.path, query: $route.query }"
>
{{ item.meta.title }}
</router-link>
</el-menu-item>
</el-menu>
<div
class="ems-content-container ems-content-container-padding sbjk-ems-content-container"
>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
<el-menu-item :index="item.name" v-for="(item,index) in categoryRouter" :key="index+'dzjkChildrenRoute'">
<router-link style="height: 100%;width: 100%;display: block" :to="{path:item.path,query:$route.query}">
{{item.meta.title}}
</router-link>
</el-menu-item>
</el-menu>
<div class="ems-content-container ems-content-container-padding sbjk-ems-content-container">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
<script>
import { dzjk } from "@/router/ems";
const childrenRoute = dzjk[0].children.find(
(item) => item.name === "DzjkSbjk"
).children; //获取到单站监控-设备监控下面的字路由
console.log("设备监控子路由", childrenRoute);
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { dzjk } from '@/router/ems'
import {mapState} from "vuex";
const childrenRoute = ((dzjk[0]?.children || []).find(item=> item.name==='DzjkSbjk').children) || []//获取到单站监控-设备监控下面的字路由
export default {
name: "DzjkSbjk",
data() {
name:'DzjkSbjk',
mixins:[getQuerySiteId],
computed:{
...mapState({
zdDeviceCategoryOptions: state => state.ems.zdDeviceCategoryOptions,
}),
locationSiteCategory(){
return this.zdDeviceCategoryOptions[this.siteId] || []
},
categoryRouter(){
const routeData =this.childrenRoute.filter(item=>this.locationSiteCategory.includes(item.meta.deviceCategory))
if(this.siteId && routeData.length > 0 && this.locationSiteCategory && this.locationSiteCategory.length >1){
const locationPageDeviceCategory = this.$route.meta?.deviceCategory || ''
if(!routeData.some(item=> item.meta.deviceCategory===locationPageDeviceCategory)){
this.$router.replace({path:'/dzjk/sbjk/ssyx',query:this.$route.query})
}
}
return routeData
}
},
data(){
return {
childrenRoute,
activeMenu: "",
};
activeMenu:'',
loading:false,
}
},
mounted() {
console.log("当前设备监控页面路由", this.$route);
},
};
methods:{
init(){
this.loading=true
this.$store.dispatch('getSiteDeviceCategory',this.siteId).finally(()=>this.loading=false)
}
}
}
</script>
<style scoped lang="scss">

361
src/views/ems/dzjk/sbjk/pcs/index.vue
View File

@ -1,69 +1,175 @@
<template>
<div v-loading="loading" class="pcs-ems-dashboard-editor-container">
<!-- 顶部六个方块-->
<real-time-base-info :data="runningHeadData"/>
<div v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'" style="margin-bottom:25px;">
<el-card :class="{
'warning-card-container':pcsItem.workStatus === '1',
'timing-card-container':pcsItem.workStatus === '2',
'running-card-container':!['1','2'].includes(pcsItem.workStatus)
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
shadow="always">
<!-- 顶部六个方块-->
<real-time-base-info :data="runningHeadData" />
<div
v-for="(pcsItem, pcsIndex) in pcsList"
:key="pcsIndex + 'PcsHome'"
style="margin-bottom: 25px"
>
<el-card
:class="{
'warning-card-container': pcsItem.workStatus === '1',
'timing-card-container': pcsItem.workStatus === '2',
'running-card-container': !['1', '2'].includes(pcsItem.workStatus),
}"
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
shadow="always"
>
<div slot="header">
<span class="large-title">{{pcsIndex+1}}#{{pcsItem.deviceName}}</span>
<span class="large-title"
>{{ pcsIndex + 1 }}#{{ pcsItem.deviceName }}</span
>
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
pcsItem.communicationStatus
]
pcsItem.communicationStatus
]
}}
</div>
<div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
</div>
<div class="alarm">
<el-badge :value="pcsItem.alarmNum || 0" class="item">
<i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
<i
class="el-icon-message-solid"
style="font-size: 26px; color: #fff; display: block"
></i>
</el-badge>
</div>
</div>
<div class="descriptions-main">
<el-descriptions :colon="false" :column="4" direction="vertical">
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="并网状态" labelClassName="descriptions-label">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态" labelClassName="descriptions-label">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="控制模式" labelClassName="descriptions-label">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
</el-descriptions>
</div>
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction" direction="vertical" labelClassName="descriptions-label">
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1">
<span class="pointer" @click="showChart(item.pointName || '','PCS',pcsItem.deviceId)">
{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
<div class="descriptions-main">
<el-descriptions :colon="false" :column="4" direction="vertical">
<el-descriptions-item
:contentClassName="`descriptions-direction ${
pcsItem.workStatus === '0' ? 'save' : 'danger'
}`"
:span="1"
label="工作状态"
labelClassName="descriptions-label"
>{{
$store.state.ems.workStatusOptions[pcsItem.workStatus]
}}</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="并网状态"
labelClassName="descriptions-label"
>{{
$store.state.ems.gridStatusOptions[pcsItem.gridStatus]
}}</el-descriptions-item
>
<el-descriptions-item
:contentClassName="`descriptions-direction ${
pcsItem.deviceStatus === '2' ? 'save' : 'danger'
}`"
:span="1"
label="设备状态"
labelClassName="descriptions-label"
>{{
$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]
}}</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="控制模式"
labelClassName="descriptions-label"
>{{
$store.state.ems.controlModeOptions[pcsItem.controlMode]
}}</el-descriptions-item
>
</el-descriptions>
</div>
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions
:colon="false"
:column="4"
contentClassName="descriptions-direction"
direction="vertical"
labelClassName="descriptions-label"
>
<el-descriptions-item
v-for="(item, index) in infoData"
:key="index + 'pcsInfoData'"
:label="item.label"
:span="1"
>
<span
class="pointer"
@click="
showChart(item.pointName || '', pcsItem.deviceId)
"
>
{{ pcsItem[item.attr] | formatNumber }}
<span v-if="item.unit" v-html="item.unit"></span>
</span>
</el-descriptions-item>
</el-descriptions>
</div>
<div v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'" class="descriptions-main">
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction keep" direction="vertical" labelClassName="descriptions-label">
<el-descriptions-item :label="'支路'+(index+1)" :span="4" contentClassName="descriptions-direction keep" labelClassName="descriptions-label">{{item.dischargeStatus}}</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流功率" labelClassName="descriptions-label">
<span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span>
</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电压" labelClassName="descriptions-label">
<span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span>
</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电流" labelClassName="descriptions-label">
<span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
</el-descriptions-item>
</el-descriptions>
</div>
</el-descriptions-item>
</el-descriptions>
</div>
<div
v-for="(item, index) in pcsItem.pcsBranchInfoList"
:key="index + 'pcsBranchInfoList'"
class="descriptions-main"
>
<el-descriptions
:colon="false"
:column="4"
contentClassName="descriptions-direction keep"
direction="vertical"
labelClassName="descriptions-label"
>
<el-descriptions-item
:label="'支路' + (index + 1)"
:span="4"
contentClassName="descriptions-direction keep"
labelClassName="descriptions-label"
>{{ item.dischargeStatus }}</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="直流功率"
labelClassName="descriptions-label"
>
<span
class="pointer"
@click="showChart('直流功率', item.deviceId,true)"
>{{ item.dcPower }}kW</span
>
</el-descriptions-item>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="直流电压"
labelClassName="descriptions-label"
>
<span
class="pointer"
@click="showChart('直流电压', item.deviceId,true)"
>{{ item.dcVoltage }}V</span
>
</el-descriptions-item>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="直流电流"
labelClassName="descriptions-label"
>
<span
class="pointer"
@click="showChart('直流电流', item.deviceId,true)"
>{{ item.dcCurrent }}A</span
>
</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
</div>
<el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
<!-- 电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
<point-chart ref="pointChart" :site-id="siteId"/>
<el-empty v-show="pcsList.length <= 0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId" />
</div>
</template>
@ -71,68 +177,127 @@
import pointChart from "./../PointChart.vue";
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
import { getRunningHeadInfo, getPcsDetailInfo } from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkPcs',
components:{RealTimeBaseInfo,pointChart},
mixins:[getQuerySiteId,intervalUpdate],
name: "DzjkSbjkPcs",
components: { RealTimeBaseInfo, pointChart },
mixins: [getQuerySiteId, intervalUpdate],
data() {
return {
loading:false,
runningHeadData:{},//运行信息
pcsList:[],
infoData:[
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW',pointName:'总交流有功电率'},
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh',pointName:'当天交流充电量 (kWh)'},
{label:'A相电压',attr:'aPhaseVoltage',unit:'V',pointName:''},
{label:'A相电流',attr:'aPhaseCurrent',unit:'A',pointName:'A相电流'},
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar',pointName:'总交流无功电率'},
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh',pointName:'当天交流放电量 (kWh)'},
{label:'B相电压',attr:'bPhaseVoltage',unit:'V',pointName:''},
{label:'B相电流',attr:'bPhaseCurrent',unit:'A',pointName:'B相电流'},
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA',pointName:'总交流视在功率'},
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;',pointName:''},
{label:'C相电压',attr:'cPhaseVoltage',unit:'V',pointName:''},
{label:'C相电流',attr:'cPhaseCurrent',unit:'A',pointName:'C相电流'},
{label:'总交流功率因数',attr:'totalPowerFactor',unit:'',pointName:'总交流功率因数'},
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;',pointName:''},
{label:'交流频率',attr:'acFrequency',unit:'Hz',pointName:'交流频率'}
loading: false,
runningHeadData: {}, //运行信息
pcsList: [],
infoData: [
{
label: "总交流有功电率",
attr: "totalActivePower",
unit: "kW",
pointName: "总交流有功电率",
},
{
label: "当天交流充电量",
attr: "dailyAcChargeEnergy",
unit: "kWh",
pointName: "当天交流充电量 (kWh)",
},
{ label: "A相电压", attr: "aPhaseVoltage", unit: "V", pointName: "" },
{
label: "A相电流",
attr: "aPhaseCurrent",
unit: "A",
pointName: "A相电流",
},
{
label: "总交流无功电率",
attr: "totalReactivePower",
unit: "kVar",
pointName: "总交流无功电率",
},
{
label: "当天交流放电量",
attr: "dailyAcDischargeEnergy",
unit: "kWh",
pointName: "当天交流放电量 (kWh)",
},
{ label: "B相电压", attr: "bPhaseVoltage", unit: "V", pointName: "" },
{
label: "B相电流",
attr: "bPhaseCurrent",
unit: "A",
pointName: "B相电流",
},
{
label: "总交流视在功率",
attr: "totalApparentPower",
unit: "kVA",
pointName: "总交流视在功率",
},
{
label: "PCS模块温度",
attr: "pcsModuleTemperature",
unit: "&#8451;",
pointName: "",
},
{ label: "C相电压", attr: "cPhaseVoltage", unit: "V", pointName: "" },
{
label: "C相电流",
attr: "cPhaseCurrent",
unit: "A",
pointName: "C相电流",
},
{
label: "总交流功率因数",
attr: "totalPowerFactor",
unit: "",
pointName: "总交流功率因数",
},
{
label: "PCS环境温度",
attr: "pcsEnvironmentTemperature",
unit: "&#8451;",
pointName: "",
},
{
label: "交流频率",
attr: "acFrequency",
unit: "Hz",
pointName: "交流频率",
},
],
pcsBranchList:[],//pcs的支路列表
}
pcsBranchList: [], //pcs的支路列表
};
},
methods:{
//todo 后续需要新增设备id
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
methods: {
showChart(pointName, deviceId,isBranch=false) {
pointName &&
this.$refs.pointChart.showChart({ pointName,deviceCategory:isBranch ? 'BRANCH' : 'PCS', deviceId });
},
//6个方块数据
getRunningHeadData(){
getRunningHeadInfo(this.siteId).then(response => {
this.runningHeadData = response?.data || {}
})
getRunningHeadData() {
getRunningHeadInfo(this.siteId).then((response) => {
this.runningHeadData = response?.data || {};
});
},
getPcsList(){
this.loading = true
getPcsDetailInfo(this.siteId).then(response => {
const data = response?.data || {}
this.pcsList = JSON.parse(JSON.stringify(data))
}).finally(()=>this.loading = false)
getPcsList() {
this.loading = true;
getPcsDetailInfo(this.siteId)
.then((response) => {
const data = response?.data || {};
this.pcsList = JSON.parse(JSON.stringify(data));
})
.finally(() => (this.loading = false));
},
updateData(){
this.getRunningHeadData()
this.getPcsList()
updateData() {
this.getRunningHeadData();
this.getPcsList();
},
init() {
this.updateData();
this.updateInterval(this.updateData);
},
init(){
this.updateData()
this.updateInterval(this.updateData)
}
},
}
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

150
src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
View File

@ -1,107 +1,125 @@
<template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header">
<span class="card-title">储能功率曲线</span>
<span class="card-title">PCS有功功率/PCS无功功率</span>
</div>
<div style="height: 360px" id="cnglqxChart"/>
<div style="height: 360px" id="cnglqxChart" />
</el-card>
</template>
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {storagePower} from '@/api/ems/dzjk'
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { formatDate } from "@/filters/ems";
import { storagePower } from "@/api/ems/dzjk";
export default {
mixins: [resize],
data() {
return {
chart: null
}
chart: null,
};
},
mounted() {
this.chart = echarts.init(document.querySelector('#cnglqxChart'))
this.chart = echarts.init(document.querySelector("#cnglqxChart"));
},
beforeDestroy() {
if (!this.chart) {
return
return;
}
this.chart.dispose()
this.chart = null
this.chart.dispose();
this.chart = null;
},
methods: {
init(siteId){
this.chart.showLoading()
const x = []
const data1 =[],data2 =[]
storagePower(siteId).then(response => {
const source = response?.data?.energyStoragePowList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data1.push(item.pcsTotalActPower)
data2.push(item.pcsTotalReactivePower)
init(siteId) {
this.chart.showLoading();
const x = [];
const data1 = [],
data2 = [];
storagePower(siteId)
.then((response) => {
this.setOption(response?.data?.pcsPowerList || []);
})
this.setOption(x,data1,data2)
}).finally(()=>{
this.chart.hideLoading()
})
.finally(() => {
this.chart.hideLoading();
});
},
setOption(x,data1,data2) {
setOption(data) {
// data=[{deviceId:'pcs1',energyStoragePowList:[{createDate,deviceId,pcsTotalActPower,pcsTotalReactivePower}]}]
let xdata = [],
series = [];
data.forEach((element, index) => {
if (index === 0) {
xdata = (element.energyStoragePowList || []).map((i) => i.createDate);
}
series.push(
{
type: "line",
name: `${element.deviceId}有功功率`,
areaStyle: {
// color:'#FFBD00'
},
data: (element.energyStoragePowList || []).map(
(i) => i.pcsTotalActPower
),
},
{
type: "line",
name: `${element.deviceId}无功功率`,
areaStyle: {
// color:'#FFBD00'
},
data: (element.energyStoragePowList || []).map(
(i) => i.pcsTotalReactivePower
),
}
);
});
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
legend: {
left: 'center',
top: '10',
left: "center",
top: "5",
itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
},
grid: {
containLabel: true
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
textStyle:{
color:"#333333",
textStyle: {
color: "#333333",
},
xAxis: {type:'category',data:x},
xAxis: { type: "category", data: xdata },
yAxis: {
type: 'value',
type: "value",
},
dataZoom: [
{
type: 'inside',
type: "inside",
start: 0,
end: 100
end: 100,
},
{
start: 0,
end: 100
}
end: 100,
},
],
series: [
{
name:'PCS实时有功功率',
type: 'line',
areaStyle: {
color:'#FFBD00'
},
data: data1,
},{
name:'PCS实时无功功率',
type: 'line',
areaStyle: {
color: '#3C81FF'
},
data: data2
}]
})
}
}
}
series,
});
},
},
};
</script>

127
src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue
View File

@ -1,99 +1,106 @@
<template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header">
<span class="card-title">电池平均SOC</span>
<span class="card-title">平均SOC</span>
</div>
<div style="height: 360px" id="dcpjsocChart"/>
<div style="height: 360px" id="dcpjsocChart" />
</el-card>
</template>
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {batteryAveSoc} from '@/api/ems/dzjk'
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { formatDate } from "@/filters/ems";
import { batteryAveSoc } from "@/api/ems/dzjk";
export default {
mixins: [resize],
data() {
return {
chart: null
}
chart: null,
};
},
mounted() {
this.chart = echarts.init(document.querySelector('#dcpjsocChart'))
this.chart = echarts.init(document.querySelector("#dcpjsocChart"));
},
beforeDestroy() {
if (!this.chart) {
return
return;
}
this.chart.dispose()
this.chart = null
this.chart.dispose();
this.chart = null;
},
methods: {
init(siteId){
this.chart.showLoading()
const x = []
const data =[]
batteryAveSoc(siteId).then(response => {
const source = response?.data?.batteryAveSOCList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data.push(item.batterySOC)
init(siteId) {
this.chart.showLoading();
batteryAveSoc(siteId)
.then((response) => {
this.setOption(response?.data?.batteryAveSOCList || []);
})
this.setOption(x,data)
}).finally(()=>{
this.chart.hideLoading()
})
.finally(() => {
this.chart.hideLoading();
});
},
setOption(x,data) {
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
// legend: {
// left: 'center',
// bottom: '10',
// },
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
setOption(data) {
let xdata = [],
ydata = [];
data.forEach((element) => {
xdata.push(element.createDate);
ydata.push(element.batterySOC);
});
xdata = this.chart.setOption({
legend: {
left: "center",
top: "5",
itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
},
grid: {
containLabel: true
containLabel: true,
},
textStyle:{
color:"#333333",
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
xAxis: {type:'category',data:x},
textStyle: {
color: "#333333",
},
xAxis: { type: "category", data: xdata },
yAxis: {
type: 'value',
type: "value",
},
dataZoom: [
{
type: 'inside',
type: "inside",
start: 0,
end: 100
end: 100,
},
{
start: 0,
end: 100
}
end: 100,
},
],
series: [
{
name:'电池平均SOC',
data: data,
type: 'line',
type: "line",
name: `平均SOC`,
areaStyle: {
color:'#FFBD00'
}
}]
})
}
}
}
// color:'#FFBD00'
},
data: ydata,
},
],
});
},
},
};
</script>

125
src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue
View File

@ -1,99 +1,110 @@
<template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header">
<span class="card-title">电池平均温度</span>
</div>
<div style="height: 360px" id="dcpjwdChart"/>
<div style="height: 360px" id="dcpjwdChart" />
</el-card>
</template>
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {batteryAveTemp} from '@/api/ems/dzjk'
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { formatDate } from "@/filters/ems";
import { batteryAveTemp } from "@/api/ems/dzjk";
export default {
mixins: [resize],
data() {
return {
chart: null
}
chart: null,
};
},
mounted() {
this.chart = echarts.init(document.querySelector('#dcpjwdChart'))
this.chart = echarts.init(document.querySelector("#dcpjwdChart"));
},
beforeDestroy() {
if (!this.chart) {
return
return;
}
this.chart.dispose()
this.chart = null
this.chart.dispose();
this.chart = null;
},
methods: {
init(siteId){
this.chart.showLoading()
const x = []
const data1 =[],data2 =[]
batteryAveTemp(siteId).then(response => {
const source = response?.data?.batteryAveTempList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data1.push(item.batteryTemp)
init(siteId) {
this.chart.showLoading();
const x = [];
const data1 = [],
data2 = [];
batteryAveTemp(siteId)
.then((response) => {
this.setOption(response?.data?.batteryAveTempList || []);
})
this.setOption(x,data1,data2)
}).finally(()=>{
this.chart.hideLoading()
})
.finally(() => {
this.chart.hideLoading();
});
},
setOption(x,data) {
this.chart.setOption({
color:['#3C81FF'],
// legend: {
// left: 'center',
// bottom: '10',
// },
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
setOption(data) {
let xdata = [],
ydata = [];
data.forEach((element) => {
xdata.push(element.createDate);
ydata.push(element.batteryTemp);
});
xdata = this.chart.setOption({
legend: {
left: "center",
top: "5",
itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
},
grid: {
containLabel: true
containLabel: true,
},
textStyle:{
color:"#333333",
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
xAxis: {type:'category',data:x},
textStyle: {
color: "#333333",
},
xAxis: { type: "category", data: xdata },
yAxis: {
type: 'value',
type: "value",
},
dataZoom: [
{
type: 'inside',
type: "inside",
start: 0,
end: 100
end: 100,
},
{
start: 0,
end: 100
}
end: 100,
},
],
series: [
{
name:'电池平均温度',
data: data,
type: 'line',
type: "line",
name: `电池平均温度`,
areaStyle: {
color:'#3C81FF'
// color:'#FFBD00'
},
}]
})
}
}
}
data: ydata,
},
],
});
},
},
};
</script>

129
src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
View File

@ -1,96 +1,109 @@
<template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<el-card
shadow="always"
class="common-card-container common-card-container-body-no-padding"
>
<div slot="header">
<span class="card-title">PCS平均温度</span>
<span class="card-title">PCS最高温度</span>
</div>
<div style="height: 360px" id="pocpjwdChart"/>
<div style="height: 360px" id="pocpjwdChart" />
</el-card>
</template>
<style scoped lang="scss"></style>
<script>
import * as echarts from 'echarts'
import resize from '@/mixins/ems/resize'
import {formatDate} from "@/filters/ems";
import {stackAveTemp} from '@/api/ems/dzjk'
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { formatDate } from "@/filters/ems";
import { pcsMaxTemp } from "@/api/ems/dzjk";
export default {
mixins: [resize],
data() {
return {
chart: null
}
chart: null,
};
},
mounted() {
this.chart = echarts.init(document.querySelector('#pocpjwdChart'))
this.chart = echarts.init(document.querySelector("#pocpjwdChart"));
},
beforeDestroy() {
if (!this.chart) {
return
return;
}
this.chart.dispose()
this.chart = null
this.chart.dispose();
this.chart = null;
},
methods: {
init(siteId){
this.chart.showLoading()
const x = []
const data =[]
stackAveTemp(siteId).then(response => {
const source = response?.data?.stackAveTempList || []
source.forEach(item=>{
x.push(formatDate(item.createDate,false,true))
data.push(item.temp)
init(siteId) {
this.chart.showLoading();
const x = [];
const data = [];
pcsMaxTemp(siteId)
.then((response) => {
this.setOption(response?.data?.pcsMaxTempList || []);
})
this.setOption(x,data)
}).finally(()=>{
this.chart.hideLoading()
})
.finally(() => {
this.chart.hideLoading();
});
},
setOption(x,data) {
setOption(data) {
let xdata = [],
series = [];
data.forEach((element, index) => {
if (index === 0) {
xdata = (element.maxTempVoList || []).map((i) => i.createDate);
}
series.push({
type: "line",
name: `${element.deviceId}最高温度`,
areaStyle: {
// color:'#FFBD00'
},
data: (element.maxTempVoList || []).map((i) => i.temp),
});
});
this.chart.setOption({
color:['#FFBD00','#3C81FF'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
legend: {
left: "center",
top: "5",
itemWidth: 10,
itemHeight: 5,
textStyle: {
fontSize: 9,
},
},
grid: {
containLabel: true
containLabel: true,
},
textStyle:{
color:"#333333",
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
xAxis: {type:'category',data:x},
textStyle: {
color: "#333333",
},
xAxis: { type: "category", data: xdata },
yAxis: {
type: 'value',
type: "value",
},
dataZoom: [
{
type: 'inside',
type: "inside",
start: 0,
end: 100
end: 100,
},
{
start: 0,
end: 100
}
end: 100,
},
],
series: [
{
name:'PCS平均温度',
data: data,
type: 'line',
areaStyle: {
color:'#FFBD00'
}
}]
})
}
}
}
series,
});
},
},
};
</script>

117
src/views/ems/dzjk/sbjk/yl/index.vue
View File

@ -1,19 +1,24 @@
<template>
<div v-loading="loading">
<div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0','yl-normal-item-container':item.workMode === '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
<div class="header">
<div class="header-title">{{item.systemName}}</div>
<div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
<div>当前温度：<span class="header-values">{{item.currentTemperature}}&#8451;</span></div>
<el-card
v-for="(item,index) in list"
:key="index+'ylLise'"
class="sbjk-card-container running-card-container"
shadow="always">
<div slot="header">
<span class="large-title">{{index+1}}#{{item.deviceName}}</span>
</div>
<div class="content">
<el-row>
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">{{tempDataItem.title}}：{{item[tempDataItem.attr]}}&#8451;</el-col>
</el-row>
</div>
</div>
<el-row>
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">
<span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
{{tempDataItem.title}}：{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span>
</span>
</el-col>
</el-row>
</el-card>
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
@ -22,25 +27,30 @@
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getCoolingDataList} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue";
export default {
name:'DzjkSbjkYl',
mixins:[getQuerySiteId,intervalUpdate],
components:{pointChart},
data() {
return {
loading:false,
list:[],
tempData:[
{title:'制热开启点',attr:'heatingStartPoint'},
{title:'制冷开启点',attr:'coolingStartPoint'},
{title:'高温告警点',attr:'highTempAlarmPoint'},
{title:'制热停止点',attr:'heatingStopPoint'},
{title:'制冷停止点',attr:'coolingStopPoint'},
{title:'低温告警点',attr:'lowTempAlarmPoint'},
{title:'供水温度',attr:'gsTemp',unit:'&#8451;'},
{title:'回水温度',attr:'hsTemp',unit:'&#8451;'},
{title:'供水压力',attr:'gsPressure',unit:'bar'},
{title:'回水压力',attr:'hsPressure',unit:'bar'},
{title:'冷源水温度',attr:'lysTemp',unit:'&#8451;'},
{title:'VB01开度',attr:'vb01Kd',unit:'%'},
{title:'VB02开度',attr:'vb02Kd',unit:'%'},
]
}
},
methods:{
showChart(pointName,deviceId){
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'COOLING',deviceId})
},
updateData(){
this.loading = true
getCoolingDataList(this.siteId).then(response => {
@ -59,72 +69,27 @@ export default {
</script>
<style scoped lang="scss">
.yl-item-container{
border-radius: 5px;
.sbjk-card-container{
&:not(:last-child){
margin-bottom: 25px;
}
.header{
line-height: 40px;
.el-row{
background-color: #ffffff;
border:1px solid #eeeeee;
font-size: 14px;
>div{
display: inline-block;
margin-right: 40px;
}
.header-title{
border-radius: 5px 0 5px 0;
color:#ffffff;
width: 120px;
height: 40px;
font-size: 16px;
line-height: 16px;
color: #333333;
.el-col{
padding:12px 0;
text-align: center;
position: relative;
}
.header-values{
font-weight: 500;
.el-col{
border-bottom: 1px solid #eeeeee;
}
}
.content{
padding:25px;
.el-row{
background-color: #ffffff;
border:1px solid #eeeeee;
line-height: 14px;
color: #333333;
font-size: 12px;
.el-col{
padding:10px 0;
text-align: center;
}
.el-col:nth-child(-n+3){
border-bottom: 1px solid #eeeeee;
}
.el-col:not(:nth-child(3n)){
border-right: 1px solid #eeeeee;
}
.el-col:not(:nth-child(3n)){
border-right: 1px solid #eeeeee;
}
}
}
.yl-warn-item-container{
background-color: #FFF1F0;
.header{
.header-title{
background-color: #FC6B69;
}
.header-values{
color: #FC6B69;
}
}
}
.yl-normal-item-container{
background-color: #EBF6F6;
.header{
.header-title{
background-color: #05AEA3;
}
.header-values{
color: #05AEA3;
}
}
}
</style>