首页看板、电表报表接口联调，部分接口参数更新

src/api/ems/dzjk.js

@@ -102,14 +102,14 @@ export function getPcsNameList(siteId) {
 //pcs曲线
 export function getPCSData({siteId,deviceId,startTime,endTime,dataType}) {
   return request({
-    url: `/ems/statsReport/getPCSData?siteId=${siteId}&deviceId=${deviceId}&startTime=${startTime}&endTime=${endTime}&dataType=${dataType}`,
+    url: `/ems/statsReport/getPCSData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
     method: 'get'
   })
 }
 //电池堆曲线
 export function getStackData({siteId,deviceId,startTime,endTime,dataType}) {
   return request({
-    url: `/ems/statsReport/getStackData?siteId=${siteId}&deviceId=${deviceId}&startTime=${startTime}&endTime=${endTime}&dataType=${dataType}`,
+    url: `/ems/statsReport/getStackData?siteId=${siteId}&deviceId=${deviceId}&startDate=${startTime}&endDate=${endTime}&dataType=${dataType}`,
     method: 'get'
   })
 }
@@ -153,4 +153,17 @@ export function batteryAveTemp(siteId) {
 }
 
 
-
+//电表列表
+export function getLoadNameList(siteId) {
+  return request({
+    url: `/ems/statsReport/getLoadNameList/batteryAveTemp?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+// 电表报表
+export function getAmmeterData({siteId,deviceId,dateTime}) {
+  return request({
+    url: `/ems/statsReport/getAmmeterData??siteId=${siteId}&deviceId=${deviceId}&dateTime=${dateTime}`,
+    method: 'get'
+  })
+}

src/api/ems/home.js

@@ -6,3 +6,10 @@ export function getSiteTotalInfo() {
     method: 'get'
   })
 }
+// 图表
+export function dataList() {
+  return request({
+    url: '/ems/homePage/dataList',
+    method: 'get'
+  })
+}

src/views/ems/dzjk/tjbb/dbbb/index.vue

@@ -4,15 +4,15 @@
     <!--    搜索栏-->
     <el-form :inline="true" class="select-container">
       <el-form-item label="电表">
-        <el-select v-model="search.db" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+        <el-select v-model="search.deviceId" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-          <el-option :label="item.name" :value="item.id" v-for="(item,index) in dbOptions" :key="index+'dbOptions'"></el-option>
+          <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in deviceOptions" :key="index+'dbOptions'"></el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="日报">
-        <el-select v-model="search.rb" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-          <el-option :label="item.name" :value="item.id" v-for="(item,index) in rbOptions" :key="index+'rbOptions'"></el-option>
         </el-select>
       </el-form-item>
+<!--      <el-form-item label="日报">-->
+<!--        <el-select v-model="search.rb" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
+<!--          <el-option :label="item.name" :value="item.id" v-for="(item,index) in rbOptions" :key="index+'rbOptions'"></el-option>-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
       <el-form-item label="时间选择">
         <el-date-picker
           v-model="search.date"
@@ -41,7 +41,7 @@
 <!--        汇总列-->
           <el-table-column label="汇总">
             <el-table-column
-              prop="time"
+              prop="dateTime"
               label="日期"
               width="120">
             </el-table-column>
@@ -49,53 +49,53 @@
 <!--充电量列-->
           <el-table-column  label="充电量">
             <el-table-column
-              prop="cdlJian"
+              prop="activePeakKwh"
               label="尖">
             </el-table-column>
             <el-table-column
-              prop="cdlFeng"
+              prop="activeHighKwh"
               label="峰">
             </el-table-column>
             <el-table-column
-              prop="cdlPing"
+              prop="activeFlatKwh"
               label="平">
             </el-table-column>
             <el-table-column
-              prop="cdlGu"
+              prop="activeValleyKwh"
               label="谷">
             </el-table-column>
             <el-table-column
-              prop="cdlZong"
+              prop="activeTotalKwh"
               label="总">
             </el-table-column>
           </el-table-column>
         <!--充电量列-->
           <el-table-column  label="放电量">
             <el-table-column
-              prop="fdlJian"
+              prop="reActivePeakKwh"
               label="尖">
             </el-table-column>
             <el-table-column
-              prop="fdlFeng"
+              prop="reActiveHighKwh"
               label="峰">
             </el-table-column>
             <el-table-column
-              prop="fdlPing"
+              prop="reActiveFlatKwh"
               label="平">
             </el-table-column>
             <el-table-column
-              prop="fdlGu"
+              prop="reActiveValleyKwh"
               label="谷">
             </el-table-column>
             <el-table-column
-              prop="fdlZong"
+              prop="reActiveTotalKwh"
               label="总">
             </el-table-column>
           </el-table-column>
 <!--        效率-->
           <el-table-column label="效率(%)">
             <el-table-column
-              prop="efficiency">
+              prop="effect">
             </el-table-column>
           </el-table-column>
         </el-table>
@@ -104,8 +104,12 @@
 
 
 <script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import { getAmmeterData, getLoadNameList} from '@/api/ems/dzjk'
+import {formatDate} from "@/filters/ems";
 export default {
   name:'DzjkTjbbDbbb',
+  mixins: [getQuerySiteId],
   data() {
     return {
       loading:false,
@@ -115,22 +119,13 @@ export default {
         },
       },
       defaultDate:'',//默认展示的时间
-      search:{db:'',rb:'',date:''},
+      search:{deviceId:'',date:''},
-      dbOptions:[
+      deviceOptions:[],
-        {name:'电表1',id:1},
+      // rbOptions:[
-        {name:'电表2',id:2},
+      //   {name:'日报1',id:1},
-        {name:'电表3',id:3},
+      //   {name:'日报2',id:2},
-      ],
+      // ],
-      rbOptions:[
+      tableData:[]
-        {name:'日报1',id:1},
-        {name:'日报2',id:2},
-      ],
-      tableData:[
-        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
-        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
-        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
-        {time:'2016-05',cdlJian:10,cdlFeng:20,cdlPing:100,cdlGu:30,cdlZong:100,fdlJian:20,fdlFeng:100,fdlPing:50,fdlGu:100,fdlZong:200,efficiency:80},
-      ]
     }
   },
   methods:{
@@ -140,21 +135,36 @@ export default {
     },
     // 重置
     onReset(){
-      this.search={
+      this.search.date = ''
-        db:'',rb:'',date:''
-      }
       this.getData()
     },
     // 获取数据
     getData(){
-      this.loading=false
+      this.loading=true
+      getAmmeterData({siteId:this.siteId,deviceId:this.search.deviceId,dateTime:formatDate(this.search.date)}).then(response=>{
+        this.tableData=response?.data || [];
+      }).finally(()=> {
+        this.loading = false
+      })
+    },
+    getDbList(){
+      return getLoadNameList(this.siteId).then(response=>{
+        this.deviceOptions=response?.data || [];
+        this.deviceOptions.length > 0 && (this.search.deviceId = this.deviceOptions[0].id);
+      })
+    },
+    init(){
+      this.loading = true
+      this.getDbList().then(()=>{
+        this.onReset()
+      })
     },
     getSummaries(){
 
     }
   },
+
   mounted(){
-    this.getData()
     this.defaultDate = new Date()
   }
 }

src/views/ems/dzjk/tjbb/dcdqx/index.vue

@@ -3,7 +3,7 @@
   <div v-loading="loading">
     <div class="select-container">
       <el-form :inline="true">
-        <el-form-item label="PCS">
+        <el-form-item label="电池堆">
           <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
             <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>
           </el-select>
@@ -47,7 +47,7 @@
 import * as echarts from 'echarts'
 import resize from "@/mixins/ems/resize";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import { getStackData, getPcsNameList} from '@/api/ems/dzjk'
+import { getStackData, getStackNameList} from '@/api/ems/dzjk'
 import {formatDate} from "@/filters/ems";
 export default {
   name:'DzjkTjbbDcdqx',
@@ -91,8 +91,8 @@ export default {
       this.getData()
     },
     getPcsList(){
-      return getPcsNameList(this.siteId).then(response => {
+      return getStackNameList(this.siteId).then(response => {
-        const data = response?.data || [];
+        const data = JSON.parse(JSON.stringify(response?.data || []))
         this.pcsOptions = data
         this.pcs = data.length>0?data[0].id:'';
       })

src/views/ems/home/DlzbChart.vue

@@ -3,7 +3,7 @@
   <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
     <div slot="header">
       <span class="card-title">电量指标</span>
-      <el-button style="float: right; padding: 3px 0" type="text" size="small">按年</el-button>
+<!--      <el-button style="float: right; padding: 3px 0" type="text" size="small">按年</el-button>-->
     </div>
     <div style="height: 360px" id="dlzbChart"/>
   </el-card>
@@ -12,7 +12,6 @@
 <style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
 
 export default {
@@ -22,11 +21,6 @@ export default {
       chart: null
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
   beforeDestroy() {
     if (!this.chart) {
       return
@@ -35,11 +29,15 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    initChart(data) {
-      this.chart = echarts.init(document.querySelector('#dlzbChart'), 'macarons')
+      this.chart = echarts.init(document.querySelector('#dlzbChart'))
-      this.setOptions()
+      this.setOption(data)
     },
-    setOptions() {
+    setOption(data) {
+      const source=[['日期','充电量','放电量']]
+      data.forEach(item => {
+        source.push([item.dateMonth,item.chargeEnergy,item.disChargeEnergy])
+      })
       this.chart.setOption({
         legend: {
           left: 'center',
@@ -55,7 +53,7 @@ export default {
           color:"#333333",
         },
         xAxis: {
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+          type: 'category',
           axisLine: {
             lineStyle:{
               color: '#333333',
@@ -70,10 +68,10 @@ export default {
             }
           }
         },
+        dataset:{source},
         series: [
         {
           name:'充电量',
-          data: [80,92,1,34,90,130,320,80,9,91,34,90],
           type: 'line',
           itemStyle: {
             color: '#F86F70',
@@ -85,7 +83,6 @@ export default {
           }
         },{
             name:'放电量',
-            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
             type: 'line',
             itemStyle: {
               color: '#488AFF',

src/views/ems/home/GjdjfbChart.vue

@@ -11,7 +11,6 @@
 <style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
 
 export default {
@@ -21,11 +20,6 @@ export default {
       chart: null
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
   beforeDestroy() {
     if (!this.chart) {
       return
@@ -34,11 +28,15 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    initChart(data) {
-      this.chart = echarts.init(document.querySelector('#gjdjfbChart'), 'macarons')
+      this.chart = echarts.init(document.querySelector('#gjdjfbChart'))
-      this.setOptions()
+      this.setOption(data)
     },
-    setOptions() {
+    setOption(data) {
+      const source=[['告警等级','告警数量','告警占比']]
+      data.forEach(item => {
+        source.push([item.level,item.dataNum,item.percent])
+      })
       this.chart.setOption({
         color:['#3C81FF','#FFBE29'],
         legend: {
@@ -55,7 +53,7 @@ export default {
           color:"#333333",
         },
         xAxis: {
-          data: ['A级','B级','C级','D级','E级','F级'],
+          type: 'category',
           axisLine: {
             lineStyle:{
               color: '#333333',
@@ -79,19 +77,18 @@ export default {
             onZero:false
           }
         }],
+        dataset:{source},
         series: [
-        {
+          {
-          name:'数据一',
+            name:'告警数量',
-          yAxisIndex:0,
+            yAxisIndex:0,
-          data: [80,92,1,34,90,130,320],
+            type: 'line',
-          type: 'line',
+          },
-        },
+          {
-        {
+            name:'告警占比',
-          name:'数据二',
+            yAxisIndex:1,
-          yAxisIndex:1,
+            type: 'bar',
-          data: [89,9,80,4,100,30,30],
+          }
-          type: 'bar',
-        }
           ]
       })
     }

src/views/ems/home/GjqsChart.vue

@@ -11,7 +11,6 @@
 <style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
 
 export default {
@@ -21,11 +20,6 @@ export default {
       chart: null
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
   beforeDestroy() {
     if (!this.chart) {
       return
@@ -34,11 +28,15 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    initChart(data) {
-      this.chart = echarts.init(document.querySelector('#gjqsChart'), 'macarons')
+      this.chart = echarts.init(document.querySelector('#gjqsChart'))
-      this.setOptions()
+      this.setOption(data)
     },
-    setOptions() {
+    setOption(data) {
+      const source=[['日期','告警趋势']]
+      data.forEach(item => {
+        source.push([item.dateMonth,item.alarmNum])
+      })
       this.chart.setOption({
         color:['#F86F70'],
         legend: {
@@ -55,7 +53,7 @@ export default {
           color:"#333333",
         },
         xAxis: {
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+          type: 'category',
           axisLine: {
             lineStyle:{
               color: '#333333',
@@ -70,10 +68,10 @@ export default {
             }
           }
         },
+        dataset:{source},
         series: [
         {
           name:'告警趋势',
-          data: [80,92,1,34,90,130,320,80,9,91,34,90],
           type: 'line',
           areaStyle: {}
         }]

src/views/ems/home/SbgjzbChart.vue

@@ -11,7 +11,6 @@
 <style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
 
 export default {
@@ -21,11 +20,6 @@ export default {
       chart: null
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
   beforeDestroy() {
     if (!this.chart) {
       return
@@ -34,11 +28,15 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    initChart(data) {
-      this.chart = echarts.init(document.querySelector('#sbgjzbChart'), 'macarons')
+      this.chart = echarts.init(document.querySelector('#sbgjzbChart'))
-      this.setOptions()
+      this.setOption(data)
     },
-    setOptions() {
+    setOption(data) {
+      const source= []
+      data.forEach(item => {
+        source.push({value: item.alarmNum,  name: item.type})
+      })
       this.chart.setOption({
         color:['#FFBE29','#3C81FF','#A796FF','#FC6B69','#58F3AA'],
         tooltip: {
@@ -53,13 +51,7 @@ export default {
             name: '设备告警占比',
             type: 'pie',
             radius: '50%',
-            data: [
+            data:source,
-              { value: 1048, name: '数据一' },
-              { value: 735, name: '数据二' },
-              { value: 580, name: '数据三' },
-              { value: 484, name: '数据四' },
-              { value: 300, name: '数据五' }
-            ],
             emphasis: {
               itemStyle: {
                 shadowBlur: 10,

src/views/ems/home/XtxlChart.vue

@@ -11,7 +11,6 @@
 <style scoped lang="scss"></style>
 <script>
 import * as echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
 import resize from '@/mixins/ems/resize'
 
 export default {
@@ -21,11 +20,6 @@ export default {
       chart: null
     }
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
   beforeDestroy() {
     if (!this.chart) {
       return
@@ -34,11 +28,15 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    initChart(data) {
-      this.chart = echarts.init(document.querySelector('#xtxlChart'), 'macarons')
+      this.chart = echarts.init(document.querySelector('#xtxlChart'))
-      this.setOptions()
+      this.setOption(data)
     },
-    setOptions() {
+    setOption(data) {
+      const source=[['日期','系统效率']]
+      data.forEach(item => {
+        source.push([item.dateMonth,item.systemEfficiency])
+      })
       this.chart.setOption({
         color:['#FFBE01'],
         legend: {
@@ -55,7 +53,7 @@ export default {
           color:"#333333",
         },
         xAxis: {
-          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+          type: 'category',
           axisLine: {
             lineStyle:{
               color: '#333333',
@@ -70,10 +68,10 @@ export default {
             }
           }
         },
+        dataset:{source},
         series: [
         {
           name:'系统效率',
-          data: [80,92,1,34,90,130,320,80,9,91,34,90],
           type: 'line',
         }]
       })

src/views/ems/home/index.vue

@@ -1,32 +1,29 @@
 <template>
-    <div class="ems-dashboard-editor-container">
+    <div class="ems-dashboard-editor-container" v-loading="loading">
      <zd-info></zd-info>
       <div class="ems-content-container ems-content-container-padding">
         <div class="content-title">数据概览</div>
         <el-row :gutter="32" style="background:#fff;margin:30px 0;">
           <el-col :xs="24" :sm="12" :lg="12">
-              <dlzb-chart/>
+              <dlzb-chart ref="dlzbchart"/>
           </el-col>
           <el-col :xs="24" :sm="12" :lg="12">
-              <xtxl-chart/>
+              <xtxl-chart ref="xtxlchart"/>
           </el-col>
         </el-row>
 
         <el-row :gutter="32" style="background:#fff;margin:0;">
           <el-col :xs="24" :sm="8" :lg="8">
-              <gjqs-chart/>
+              <gjqs-chart ref="gjqsChart"/>
           </el-col>
           <el-col :xs="24" :sm="8" :lg="8">
-              <sbgjzb-chart/>
+              <sbgjzb-chart ref="sbgjzbChart"/>
           </el-col>
           <el-col :xs="24" :sm="8" :lg="8">
-              <gjdjfb-chart/>
+              <gjdjfb-chart ref="gjdjfbChart"/>
           </el-col>
         </el-row>
       </div>
-
-
-
   </div>
 </template>
 
@@ -37,6 +34,7 @@ import XtxlChart from './XtxlChart.vue'
 import GjqsChart from './GjqsChart.vue'
 import SbgjzbChart from './SbgjzbChart.vue'
 import GjdjfbChart from './GjdjfbChart.vue'
+import { dataList } from '@/api/ems/home'
 export default {
   name: 'Index',
   components: {
@@ -49,10 +47,25 @@ export default {
   },
   data() {
     return {
+      loading:false,
     }
   },
   methods: {
 
+  },
+  mounted() {
+    this.loading = true
+    dataList().then(response => {
+      const data = JSON.parse(JSON.stringify(response?.data || {}))
+      this.$refs.dlzbchart.initChart(data?.elecDataList || [])
+      this.$refs.xtxlchart.initChart(data?.sysEfficList || [])
+      this.$refs.gjqsChart.initChart(data?.alarmDataList || [])
+      this.$refs.sbgjzbChart.initChart(data?.deviceAlarmList || [])
+      this.$refs.gjdjfbChart.initChart(data?.alarmLevelList || [])
+
+    }).finally(() => {
+      this.loading = false
+    })
   }
 }
 </script>