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

设备监控点击数据查看表格

Browse Source
This commit is contained in:
白菜
2025-09-13 20:36:46 +08:00
parent b61a202267
commit 4c31eeb837
9 changed files with 408 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/assets/styles/common.scss
View File

@ -50,6 +50,27 @@
background-color: transparent;
}
}
/* card标题里的时间选择器 */
.time-range-card {
&.common-card-container .el-card__header {
padding-top: 0;
padding-bottom: 0;
.time-range-header {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
.card-title {
line-height: 40px;
}
}
}
}
//描述样式 PCS、BMS总览、BMS电池簇页面公共样式
.descriptions-main{
padding:24px;

16
src/views/ems/dzjk/home/index.vue
View File

@ -199,20 +199,4 @@ export default {
}
}
}
/* card标题里的时间选择器 */
.time-range-card {
&.common-card-container .el-card__header {
padding-top: 0;
padding-bottom: 0;
.time-range-header {
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
.card-title {
line-height: 40px;
}
}
}
}
</style>

221
src/views/ems/dzjk/sbjk/PointChart.vue Normal file
View File

@ -0,0 +1,221 @@
<!--电位展示图表-->
<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"
>
<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"/>
</div>
<div style="height: 350px" id="searchChart"></div>
</el-card>
</el-dialog>
</template>
<script>
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 DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
components: {DateRangeSelect, DateTimeSelect},
mixins: [resize],
props: {
siteId:{
type: String,
required: true,
}
},
computed: {
isDtdc(){
return this.categoryName === '单体电池'
},
},
watch:{
show(val) {
if(!val){
this.pointName=''
this.categoryName=''
this.deviceId=''
this.dataUnit=1
if (!this.chart) {
return
}
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()
})
},
}
},
data(){
return{
show:false,
chart:null,
dataUnit:1,
dataRange:[],
child:[],//单体电池需要数据 暂不删除
pointName:'',
categoryName:'',
deviceId:''
}
},
methods:{
showChart({pointName,categoryName,deviceId}){
//初始化数据
this.pointName=pointName
this.categoryName=categoryName
this.deviceId=deviceId
this.show = true
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init()
this.initChart()
this.getDate()
})
},
initChart() {
this.chart = echarts.init(document.querySelector('#searchChart'))
},
showLoading(){
this.chart && this.chart.showLoading()
},
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
}
getPointValueList({siteIds:[this.siteId],dataUnit,categoryName:this.categoryName,pointName:this.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=>{
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('暂无数据')
}
console.log('图表数据',dataset)
this.chart.setOption({
legend: {
// left: 'center',
// top: '10',
},
grid: {
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
textStyle:{
color:"#333333",
},
xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
yAxis: {
type: 'value',
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100
}
],
series: dataset
})
},
updateDate(val){
this.dataRange =val || []
this.getDate()
},
handleColsed(done) {
if (!this.chart) {
return done();
}
this.chart.dispose();
this.chart = null;
done();
},
}
}
</script>
<style scoped lang="scss">
::v-deep {
.card-title .el-radio{
line-height: 40px;
}
}
</style>

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

@ -15,14 +15,18 @@
</div>
<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">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
<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)">
{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
</span>
</el-descriptions-item>
</el-descriptions>
<!-- 进度-->
<div class="process-container">
<div class="process-line-bg">
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
</div>
<div class="process">当前SOC : {{baseInfo.currentSoc}}%</div>
<div class="process pointer" @click="showChart( '当前SOC','电池簇',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div>
</div>
</div>
<el-table
@ -41,10 +45,16 @@
prop="avgData"
label="单体平均值"
>
<template slot-scope="scope">
<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>
</template>
</el-table-column>
<el-table-column
prop="minDataID"
@ -53,6 +63,9 @@
<el-table-column
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>
</template>
</el-table-column>
<el-table-column
prop="maxDataID"
@ -62,18 +75,20 @@
</el-card>
</div>
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import pointChart from "./../PointChart.vue";
import {getBMSBatteryCluster} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkBmsdcc',
mixins:[getQuerySiteId,intervalUpdate],
components:{},
components:{pointChart},
data() {
return {
loading:false,
@ -82,21 +97,36 @@ export default {
'温度':'&#8451;',
'SOC':'%'
},
tablePointNameMap:{
'电压单体最小值':'最低单体电压',
'电压单体平均值':'电压平均值',
'电压单体最大值':'最高单体电压',
'温度单体最小值':'最低单体温度',
'温度单体平均值':'温度平均值',
'温度单体最大值':'最高单体温度',
'SOC单体最小值':'最低单体SOC',
'SOC单体平均值':'',
'SOC单体最大值':'最高单体SOC',
},
baseInfoList:[],
infoData:[
{label:'簇电压',attr:'clusterVoltage',unit:'V'},
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
{label:'簇电流',attr:'clusterCurrent',unit:'A'},
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
{label:'SOH',attr:'soh',unit:'%'},
{label:'平均温度',attr:'averageTemperature',unit:'&#8451;'},
{label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;'},
{label:'簇电压',attr:'clusterVoltage',unit:'V',pointName:'簇电压'},
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh',pointName:'可充电量'},
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh',pointName:'累计充电量'},
{label:'簇电流',attr:'clusterCurrent',unit:'A',pointName:'簇电流'},
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh',pointName:'可放电量'},
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh',pointName:'累计放电量'},
{label:'SOH',attr:'soh',unit:'%',pointName:'SOH'},
{label:'平均温度',attr:'averageTemperature',unit:'&#8451;',pointName:'平均温度'},
{label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;',pointName:'绝缘电阻'},
],
}
},
methods:{
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
updateData(){
this.loading = true
getBMSBatteryCluster(this.siteId).then(response => {

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

@ -15,14 +15,18 @@
</div>
<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">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
<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)">
{{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span>
</span>
</el-descriptions-item>
</el-descriptions>
<!-- 进度-->
<div class="process-container">
<div class="process-line-bg">
<div class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
</div>
<div class="process">当前SOC : {{baseInfo.stackSoc}}%</div>
<div class="process pointer" @click="showChart('当前SOC','电池堆',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
</div>
</div>
<el-table
@ -39,26 +43,26 @@
label="簇电压"
>
<template slot-scope="scope">
<span>{{scope.row.clusterVoltage}} V</span>
<span class="pointer" @click="showChart('簇电压','电池簇',scope.row.clusterId)">{{scope.row.clusterVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="簇电流">
<template slot-scope="scope">
<span>{{scope.row.clusterCurrent}} A</span>
<span class="pointer" @click="showChart('簇电流','电池簇',scope.row.clusterId)">{{scope.row.clusterCurrent}} A</span>
</template>
</el-table-column>
<el-table-column
label="簇SOC">
<template slot-scope="scope">
<span>{{scope.row.currentSoc}} %</span>
<span class="pointer" @click="showChart('当前SOC','电池簇',scope.row.clusterId)">{{scope.row.currentSoc}} %</span>
</template>
</el-table-column>
<el-table-column
prop="maxVoltage"
label="单体最高电压">
<template slot-scope="scope">
<span>{{scope.row.maxCellVoltage}} V</span>
<span class="pointer" @click="showChart('最高单体电压','电池簇',scope.row.clusterId)">{{scope.row.maxCellVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
@ -69,7 +73,7 @@
prop="minVoltage"
label="单体最低电压">
<template slot-scope="scope">
<span>{{scope.row.minCellVoltage}} V</span>
<span class="pointer" @click="showChart('最低单体电压','电池簇',scope.row.clusterId)">{{scope.row.minCellVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
@ -79,7 +83,7 @@
<el-table-column
label="单体最高温度">
<template slot-scope="scope">
<span>{{scope.row.maxCellTemp}} &#8451;</span>
<span class="pointer" @click="showChart('最高单体温度','电池簇',scope.row.clusterId)">{{scope.row.maxCellTemp}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
@ -90,7 +94,7 @@
prop="minTemperature"
label="单体最低温度">
<template slot-scope="scope">
<span>{{scope.row.minCellTemp}} &#8451;</span>
<span class="pointer" @click="showChart('最低单体温度','电池簇',scope.row.clusterId)">{{scope.row.minCellTemp}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
@ -102,6 +106,7 @@
</el-card>
</div>
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
@ -109,27 +114,34 @@
import {getBMSOverView} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue";
export default {
name:'DzjkSbjkBmszl',
components: {pointChart,},
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
loading:false,
baseInfoList:[],
infoData:[
{label:'电池堆总电压',attr:'stackVoltage',unit:'V'},
{label:'可充电量',attr:'availableChargeCapacity',unit:'kWh'},
{label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh'},
{label:'电池堆总电流',attr:'stackCurrent',unit:'A'},
{label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh'},
{label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh'},
{label:'SOH',attr:'stackSoh',unit:'%'},
{label:'平均温度',attr:'operatingTemp',unit:'&#8451;'},
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;'},
{label:'电池堆总电压',attr:'stackVoltage',unit:'V',pointName:'电池堆电压'},
{label:'可充电量',attr:'availableChargeCapacity',unit:'kWh',pointName:'可充电量'},
{label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh',pointName:'累计充电量'},
{label:'电池堆总电流',attr:'stackCurrent',unit:'A',pointName:'电池堆总电流'},
{label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh',pointName:'可放电量'},
{label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh',pointName:'累计放电量'},
{label:'SOH',attr:'stackSoh',unit:'%',pointName:'SOH'},
{label:'平均温度',attr:'operatingTemp',unit:'&#8451;',pointName:'平均温度'},
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;',pointName:'绝缘电阻'},
]
}
},
methods:{
//todo 后续需要新增设备id
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
updateData(){
this.loading = true
getBMSOverView(this.siteId).then(response => {

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

@ -24,6 +24,7 @@
<el-table
class="common-table"
:data="zbInfo.loadDataDetailInfo"
@cell-click="handlerCell"
stripe
style="width: 100%"
>
@ -60,6 +61,7 @@
<el-table
class="common-table"
:data="cnbInfo.meteDataDetailInfo"
@cell-click="handlerCellCN"
stripe
style="width: 100%"
>
@ -69,16 +71,19 @@
</el-table-column>
</el-table>
</el-card>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import pointChart from "./../PointChart.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getAmmeterDataList } from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name: "DzjkSbjkDb",
mixins: [getQuerySiteId,intervalUpdate],
components:{pointChart},
data() {
return {
loading: false,
@ -87,6 +92,24 @@ export default {
};
},
methods: {
handlerCell(row,column){
if(column.label !== '类别'){
const arr = row.category.split('')
arr.splice(6,0,column.label[0])
this.showChart(arr.join(''),'电表')
}
},
handlerCellCN(row,column){
if(column.label !== '类别'){
const arr = row.category.split('')
arr.splice(2,arr.length-2,column.label)
this.showChart(arr.join(''),'电表')
}
},
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
updateData(){
this.loading = true;
getAmmeterDataList(this.siteId)
@ -120,6 +143,13 @@ export default {
color: #ffffff;
position: relative;
}
.el-table__row td{
&:not(:first-child){
.cell{
cursor: pointer;
}
}
}
}
}
.zb-common-card-container{

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

@ -29,32 +29,44 @@
</div>
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction" direction="vertical" :column="4" :colon="false">
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
<span class="pointer" @click="showChart(item.pointName || '','PCS设备',pcsItem.deviceId)">
{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
</span>
</el-descriptions-item>
</el-descriptions>
</div>
<div class="descriptions-main" v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'">
<el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction keep" direction="vertical" :column="4" :colon="false">
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="4" :label="'支路'+(index+1)">{{item.dischargeStatus}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流功率">{{item.dcPower}}kW</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电压">{{item.dcVoltage}}V</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电流">{{item.dcCurrent}}A</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流功率">
<span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span>
</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电压">
<span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span>
</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电流">
<span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
</el-descriptions-item>
</el-descriptions>
</div>
</el-main>
</el-container>
<el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
<!-- 电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import pointChart from "./../PointChart.vue";
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkPcs',
components:{RealTimeBaseInfo},
components:{RealTimeBaseInfo,pointChart},
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
@ -62,81 +74,30 @@ export default {
runningHeadData:{},//运行信息
pcsList:[],
infoData:[
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW'},
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh'},
{label:'A相电压',attr:'aPhaseVoltage',unit:'V'},
{label:'A相电流',attr:'aPhaseCurrent',unit:'A'},
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar'},
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh'},
{label:'B相电压',attr:'bPhaseVoltage',unit:'V'},
{label:'B相电流',attr:'bPhaseCurrent',unit:'A'},
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA'},
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;'},
{label:'C相电压',attr:'cPhaseVoltage',unit:'V'},
{label:'C相电流',attr:'cPhaseCurrent',unit:'A'},
{label:'总交流功率因数',attr:'totalPowerFactor',unit:''},
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;'},
{label:'交流频率',attr:'acFrequency',unit:'Hz'}
{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的支路列表
}
},
methods:{
problemSaved(){
this.$confirm('确认故障已复位?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
setTimeout(() => {
done();
instance.confirmButtonLoading = false;
}, 3000);
} else {
done();
}
}
}).then(() => {
//只有在故障复位成功的情况下会走到这里
this.$message({
type: 'success',
message: '故障复位成功!'
});
}).catch(() => {
//取消复位
});
},
machineClosed(){
this.$confirm('确认要关机吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
setTimeout(() => {
done();
instance.confirmButtonLoading = false;
}, 3000);
} else {
done();
}
}
}).then(() => {
//只有在关机成功的情况下会走到这里
this.$message({
type: 'success',
message: '关机成功!'
});
}).catch(() => {
//取消关机
});
//todo 后续需要新增设备id
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
//6个方块数据
getRunningHeadData(){

16
src/views/ems/search/DateTimeSelect.vue
View File

@ -43,22 +43,6 @@ export default {
}
},
watch:{
dataUnit:{
handler(newVal,oldVal){
console.log('wacth到了dataUnit的变化',newVal,oldVal)
this.init()
// if(!oldVal && newVal){
// this.init()
// }else{
// this.init()
// //为了触发调用图表接口
// this.$emit('updateDate',this.dateRange || [])
// }
},
immediate: true,
}
},
data() {
return {
loading:false,

41
src/views/ems/search/index.vue
View File

@ -6,11 +6,6 @@
prop="siteIds"
:rules="[{ required: true, message: '请选择站点' }]"
>
<!-- <el-checkbox-group v-model="form.siteIds">-->
<!-- <el-checkbox v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId" >-->
<!-- {{ item.siteName }}-->
<!-- </el-checkbox>-->
<!-- </el-checkbox-group>-->
<el-radio-group v-model="form.siteIds" >
<el-radio v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId">
{{ item.siteName }}
@ -43,13 +38,13 @@
@select="handleSelect"
></el-autocomplete>
</el-form-item>
<el-form-item label="横坐标" prop="dataUnit" :rules="[{ required: true, message: '请选择横坐标' }]">
<el-radio-group v-model="form.dataUnit">
<el-radio :label="1">分钟</el-radio>
<el-radio :label="2">小时</el-radio>
<el-radio :label="3">天</el-radio>
</el-radio-group>
</el-form-item>
<!-- <el-form-item label="横坐标" prop="dataUnit" :rules="[{ required: true, message: '请选择横坐标' }]">-->
<!-- <el-radio-group v-model="form.dataUnit">-->
<!-- <el-radio :label="1">分钟</el-radio>-->
<!-- <el-radio :label="2">小时</el-radio>-->
<!-- <el-radio :label="3">天</el-radio>-->
<!-- </el-radio-group>-->
<!-- </el-form-item>-->
</div>
<el-form-item>
<el-button type="primary" @click="submitForm">生成图表</el-button>
@ -57,8 +52,14 @@
</el-form>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
<div slot="header" class="time-range-header">
<span class="card-title"></span>
<date-time-select :data-unit="this.form.dataUnit" @initDate="((e)=>form.dataRange=e||[])" @updateDate="updateDate"/>
<span class="card-title">
<el-radio-group v-model="form.dataUnit">
<el-radio :label="1">分钟</el-radio>
<el-radio :label="2">小时</el-radio>
<el-radio :label="3">天</el-radio>
</el-radio-group>
</span>
<date-time-select ref="dateTimeSelect" :data-unit="form.dataUnit" @initDate="((e)=>form.dataRange=e||[])" @updateDate="updateDate"/>
</div>
<div style="height: 350px" id="searchChart"></div>
</el-card>
@ -92,7 +93,16 @@ export default {
!newVal && (this.form.child = [])
}
},
'form.dataUnit':{
handler(newVal,oldVal){
console.log('wacth到了dataUnit的变化',newVal,oldVal)
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init()
this.getDate()
})
// this.submitForm()
},
}
},
data() {
return {
@ -318,6 +328,7 @@ export default {
this.loading= true
this.$nextTick(()=>{
this.initChart()
this.$refs.dateTimeSelect.init()
Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(()=>this.loading=false)
})
}