Compare commits

...

2 Commits

7 changed files with 39 additions and 57 deletions

View File

@ -49,7 +49,7 @@ export default {
methods: { methods: {
setData(res = {}){ setData(res = {}){
this.data.forEach((item)=>{ this.data.forEach((item)=>{
item.num =(res[item.attr] || res[item.attr] == 0) ? res[item.attr] : '—' item.num =(res[item.attr] || res[item.attr] === 0) ? res[item.attr] : '—'
}) })
} }
}, },

View File

@ -49,9 +49,10 @@ import {getAllSites} from '@/api/ems/zddt'
this.siteList = response.data || [] this.siteList = response.data || []
console.log("获取站点列表返回数据",response,this.siteList) console.log("获取站点列表返回数据",response,this.siteList)
// 页面初始化 设置默认选中的站点 // 页面初始化 设置默认选中的站点
const defaultSite = this.defaultSiteId //defaultSite会传来字符串类型 getAllSites接口返回的id是number类型 两个数据的类型不匹配时下拉框的默认值会显示有问题
if(defaultSite&& this.siteList.find(item=>item.id == defaultSite)){ const defaultSite = parseInt(this.defaultSiteId)
this.id = parseInt(defaultSite)//defaultSite会传来字符串类型 电站列表返回的书number类型 两个数据的类型不匹配时下拉框的默认值会显示有问题 if(defaultSite&& this.siteList.find(item=>item.id === defaultSite)){
this.id = defaultSite
}else if(!defaultSite && this.siteList.length>0){ }else if(!defaultSite && this.siteList.length>0){
this.id = this.siteList[0].id this.id = this.siteList[0].id
} }

View File

@ -14,7 +14,6 @@
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/mixins/ems/resize' import resize from '@/mixins/ems/resize'
export default { export default {
@ -37,16 +36,21 @@ export default {
this.chart = null this.chart = null
}, },
methods: { methods: {
initChart() { initChart(data) {
this.chart = echarts.init(document.querySelector('#nllzChart'), 'macarons') this.chart = echarts.init(document.querySelector('#nllzChart'))
this.setOptions()
}, },
setOptions() { setOption(data) {
const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
const source = [['日期','充电量','放电量']]
siteMonitorDataVo.forEach(item=>{
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
})
const filterValue=(num)=>{return num || num === 0 ? num : '-'}
this.chart.setOption({ this.chart.setOption({
title: [ title: [
// 右上角 // 右上角
{ {
text: '电网 实时功率:15kW', text: `电网 实时功率:${filterValue(gridNrtPower)} kW`,
top: 10, top: 10,
right: 10, right: 10,
textStyle:{ textStyle:{
@ -56,7 +60,7 @@ export default {
}, },
// 右下角 // 右下角
{ {
text: '负载 实时功率:15kW', text: `负载 实时功率:${filterValue(loadNrtPower)} kW`,
bottom: 10, bottom: 10,
right: 10, right: 10,
textStyle:{ textStyle:{
@ -67,7 +71,7 @@ export default {
// 左下角第一行 // 左下角第一行
{ {
text: '储能', text: '储能',
bottom: 56, bottom: 40,
left: 10, left: 10,
textStyle:{ textStyle:{
fontSize:12, fontSize:12,
@ -76,8 +80,8 @@ export default {
}, },
// 左下角第二行 // 左下角第二行
{ {
text: '实时功率:12kW', text: `实时功率:${filterValue(energyStorageNrtPower)} kW`,
bottom: 40, bottom: 26,
left: 10, left: 10,
textStyle:{ textStyle:{
fontSize:12, fontSize:12,
@ -86,17 +90,7 @@ export default {
}, },
// 左下角第三行 // 左下角第三行
{ {
text: 'SOC:75%', text: `可用电量:${filterValue(energyStorageAvailElec)} kWh`,
bottom: 26,
left: 10,
textStyle:{
fontSize:12,
color:'#666666'
}
},
// 左下角第四行
{
text: '可用电量12kWh',
bottom: 10, bottom: 10,
left: 10, left: 10,
textStyle:{ textStyle:{
@ -118,7 +112,7 @@ export default {
color:"#333333", color:"#333333",
}, },
xAxis: { xAxis: {
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], type: 'category',
axisLine: { axisLine: {
lineStyle:{ lineStyle:{
color: '#333333', color: '#333333',
@ -133,14 +127,15 @@ export default {
} }
} }
}, },
dataset:{
source
},
series: [ series: [
{ {
name:'充电量', name:'充电量',
data: [80,92,1,34,90,130,320,80,9,91,34,90],
type: 'line', type: 'line',
},{ },{
name:'放电量', name:'放电量',
data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
type: 'line', type: 'line',
}] }]
}) })

View File

@ -20,7 +20,7 @@
<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"> <div slot="header">
<span class="card-title">实时告警</span> <span class="card-title">实时告警</span>
<el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态<span style="color:red">超时</span></el-button> <!-- <el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态<span style="color:red">超时</span></el-button>-->
</div> </div>
<div class="ssgj-container"> <div class="ssgj-container">
<el-table <el-table
@ -36,7 +36,7 @@
label="状态" label="状态"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span class="warning-status">{{ scope.row.status == 0 ? '中断':'todo不是0是什么告警'}}</span> <span class="warning-status">{{ scope.row.status === 0 ? '中断':'todo不是0是什么告警'}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -48,7 +48,7 @@
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<nllz-chart/> <nllz-chart ref="nllzChart"/>
</div> </div>
</template> </template>
@ -96,20 +96,15 @@ export default {
methods:{ methods:{
getData(siteId){ getData(siteId){
getDzjkHomeView(siteId).then(response => { getDzjkHomeView(siteId).then(response => {
console.log(`获取单站监控id=${siteId}的基本信息`,response)
const data = response.data || {} const data = response.data || {}
this.sjglData.forEach(item=>{ this.sjglData.forEach(item=>{
item.value = (data[item.attr] || data[item.attr] == 0) ? data[item.attr] : '-' item.value = (data[item.attr] || data[item.attr] === 0) ? data[item.attr] : '-'
}) })
this.tableData = data?.siteMonitorHomeAlarmVo || [] this.tableData = data?.siteMonitorHomeAlarmVo || []
this.$refs.nllzChart.setOption(data)
}) })
} }
}, },
mounted() {
// console.log('当前页面路由参数',this.$route.query)
// const {siteId} = this.$route.query;
// this.getData(siteId)
}
} }
</script> </script>

View File

@ -27,7 +27,6 @@ export default {
}, },
methods: { methods: {
setOption(data){ setOption(data){
console.log('初始化单个站点充、放电量柱状图',data)
const source = [['日期','充电量','放电量']] const source = [['日期','充电量','放电量']]
data.forEach(item=>{ data.forEach(item=>{
source.push([item.ammeterDate, item.chargedCap,item.disChargedCap]) source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])

View File

@ -33,16 +33,11 @@ export default {
initChart() { initChart() {
// ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。 // ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
this.chart = echarts.init(document.querySelector('#zddtChart')) this.chart = echarts.init(document.querySelector('#zddtChart'))
this.setOption([])
}, },
setOption(data) { setOption(data) {
this.chart.setOption({ this.chart.setOption({
color:['#FFBD00'], color:['#FFBD00'],
backgroundColor: 'transparent', //背景色 backgroundColor: 'transparent', //背景色
// tooltip: {
// trigger: 'item',
// show: true,
// },
geo: { //地理坐标系组件 地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制 geo: { //地理坐标系组件 地理坐标系组件用于地图的绘制,支持在地理坐标系上绘制
map: 'china', //地图类型 这儿展示的是中国地图 map: 'china', //地图类型 这儿展示的是中国地图
aspectScale: 0.85, aspectScale: 0.85,

View File

@ -47,6 +47,7 @@ export default {
return { return {
singleSiteId:'', singleSiteId:'',
singleSiteName:'', singleSiteName:'',
singleSiteLocation:[],
// 单个电站 四个方块数据 // 单个电站 四个方块数据
singleZdSqaure:[ singleZdSqaure:[
{ {
@ -76,7 +77,7 @@ export default {
singleZdInfo:[{ singleZdInfo:[{
title:'电站位置', title:'电站位置',
value:'', value:'',
attr:'siteLocation' attr:'siteAddress'
},{ },{
title:'投运时间', title:'投运时间',
value:'', value:'',
@ -95,19 +96,23 @@ export default {
methods:{ methods:{
// 站点选中 // 站点选中
submitSite(id){ submitSite(id){
console.log('选中的站点id',id) if(this.singleSiteId === id){return console.log(`点击搜索按钮 搜索相同的站点id= ${id}不再调用获取基本信息接口`)}
console.log('点击搜索按钮 选中的站点id',id)
this.singleSiteId = id this.singleSiteId = id
getSingleSiteBaseInfo(id).then(response => { getSingleSiteBaseInfo(id).then(response => {
console.log('单个站点详情数据',response) console.log('单个站点详情数据',response)
const res = response.data || {} const res = response.data || {}
this.singleSiteName = res?.siteName || ''//站点名称 this.singleSiteName = res?.siteName || ''//站点名称
this.singleSiteLocation = res?.siteLocation || []//站点坐标
this.singleZdSqaure.forEach(item=>{ this.singleZdSqaure.forEach(item=>{
item.value =( res[item.attr] || res[item.attr] == 0 ) ? res[item.attr] : '-' item.value =( res[item.attr] || res[item.attr] === 0 ) ? res[item.attr] : '-'
}) })
this.singleZdInfo.forEach(item=>{ this.singleZdInfo.forEach(item=>{
item.value = ( res[item.attr] || res[item.attr] == 0 ) ? res[item.attr] : '-' item.value = ( res[item.attr] || res[item.attr] === 0 ) ? res[item.attr] : '-'
}) })
this.$refs.barChart.setOption(res?.sevenDayDischargeStats || []) this.$refs.barChart.setOption(res?.sevenDayDisChargeStats || [])
this.$refs.mapChart.setOption([{name:this.singleSiteName,value:this.singleSiteLocation}])
}) })
}, },
//跳转单站监控页面 //跳转单站监控页面
@ -120,14 +125,6 @@ export default {
}) })
} }
}, },
mounted() {
//todo 在获取到数据后更新chart
// 电站名称,坐标,样式
this.$nextTick(()=>{
console.log('this.$refs.mapChart',this.$refs)
this.$refs.mapChart.setOption([{name:'电站一',value:[121.627049,31.444993]}])
})
}
} }
</script> </script>