+ 大屏首页接口对接

ems-ui-cloud/src/api/mgr/elecStoreH.js

@@ -8,6 +8,7 @@ export function listElecStoreH(query) {
     params: query
   });
 }
+
 // 查询储能总览
 export function dayStatistics(query) {
   return request({
@@ -25,6 +26,22 @@ export function getElecStoreH(id) {
   });
 }
 
+export function getSumHStorage(param) {
+  return request({
+    url: '/ems/elec/store/sum/h/storage',
+    params: param,
+    method: 'get'
+  });
+}
+
+export function getSumRealTimeStorage(param) {
+  return request({
+    url: '/ems/elec/store/sum/realtime/storage',
+    params: param,
+    method: 'get'
+  });
+}
+
 // 新增储能计量-小时
 export function addElecStoreH(data) {
   return request({

ems-ui-cloud/src/views/largeScreen/center.vue

@@ -80,7 +80,7 @@ export default {
 .tabs {
   position: absolute;
   top: 90px;
-  left: 403px;
+  left: 425px;
   z-index: 50;
 }
 .center {

ems-ui-cloud/src/views/largeScreen/home/left.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <CusModule title="产能情况">
-      <CusTabs slot="title-right" :tabs="dateTabs" :active.sync="dateType" @tab-click="dateTabClick" />
+      <CusTabs slot="title-right" :tabs="dateTabs" :active.sync="dateType" @tab-click="dateTabClick"/>
       <div class="production">
         <div v-for="i in productionList" :key="i.id" class="production-item"
-          :style="{ backgroundImage: `url(${i.image})` }">
+             :style="{ backgroundImage: `url(${i.image})` }">
           <div class="item-value">
             <span class="value">{{ i.value }}</span>
             <span class="unit">{{ i.unit }}</span>
@@ -14,14 +14,13 @@
       </div>
     </CusModule>
     <CusModule class="module-top" title="用能情况">
-      <CusTabs slot="title-right" :tabs="buildingTabs" :active.sync="buildingType" @tab-click="getBuildingData"/>
       <BaseChart width="100%" height="300px" :option="usePieOptions"></BaseChart>
     </CusModule>
     <CusModule class="module-top" title="储能数据">
       <div class="storage-container">
         <div class="center-spinner"></div>
         <div class="percentage-display">
-          <span class="value">{{energy}}</span><span class="unit">%</span>
+          <span class="value">{{ energy }}</span><span class="unit">%</span>
         </div>
         <div class="charge-status">
           实时充电量
@@ -30,7 +29,7 @@
       <div class="storage-grid">
         <div class="grid-item" v-for="i in storageData" :key="i.name">
           <div class="image-container">
-            <img :src="i.image" alt="" />
+            <img :src="i.image" alt=""/>
           </div>
           <div class="item-details">
             <div class="item-value">
@@ -49,35 +48,32 @@ import CusTabs from '../components/CusTabs.vue';
 import CusModule from '../components/CusModule.vue';
 import BaseChart from '@/components/BaseChart/index.vue'
 import {mapState} from 'vuex';
+import {pgSupplyTotalPv} from "@/api/screen";
+import {numToStr} from "@/utils";
+import {DateTool} from "@/utils/DateTool";
+import {listByFacs} from "@/api/device/elecMeterH";
+import {getSumHStorage, getSumRealTimeStorage} from "@/api/mgr/elecStoreH";
+import {listConfig} from "@/api/system/config";
 
 export default {
   name: 'HomeLeft',
-  data () {
+  data() {
     return {
       dateType: '1',
-      dateTabs: [{name: '当日', value: '1'}, {name: '本周', value: '2'}, {name: '本月', value: '3'}, {name: '本年', value: '4'}],
+      dateTabs: [{name: '当日', value: '1'}, {name: '本月', value: '2'}, {name: '本年', value: '3'}],
       productionList: [
         {
-          name: "装机容量",
-          value: 100,
-          unit: "kW",
-          image: require("@/assets/images/source/item_bg1.png"),
-        },
-        {
           name: "光伏发电量",
-          value: 86.3,
           unit: "kW·h",
           image: require("@/assets/images/source/item_bg1.png"),
         },
         {
           name: "负荷消耗",
-          value: 82.1,
           unit: "kW·h",
           image: require("@/assets/images/source/item_bg3.png"),
         },
         {
           name: "入网",
-          value: 78.09,
           unit: "kW·h",
           image: require("@/assets/images/source/item_bg4.png"),
         },
@@ -85,31 +81,27 @@ export default {
       buildingType: '1',
       buildingTabs: [{name: '按建筑', value: '1'}, {name: '按设施', value: '2'}],
       buildingData: [],
-      energy:'100',
+      energy: '100',
       storageData: [
         {
           name: "今日充电",
           image: require("@/assets/images/home/icon1.png"),
-          value: 250,
           unit: "kW·h",
         },
         {
           name: "今日放电",
           image: require("@/assets/images/home/icon2.png"),
-          value: 58,
           unit: "kW·h",
         },
         {
-          name: "电池温度",
+          name: "累计充电",
           image: require("@/assets/images/home/icon3.png"),
-          value: 36,
-          unit: "°C",
+          unit: "kW·h",
         },
         {
-          name: "累计充电次数",
+          name: "累计放电",
           image: require("@/assets/images/home/icon4.png"),
-          value: 289,
-          unit: "次",
+          unit: "kW·h",
         },
       ]
     };
@@ -121,7 +113,7 @@ export default {
   },
   computed: {
     ...mapState('userState', ['areaType']),
-    usePieOptions () {
+    usePieOptions() {
       return {
         calculable: true,
         tooltip: {
@@ -129,7 +121,7 @@ export default {
           formatter: (params) => {
             const {name, value, percent, seriesName} = params
             if (seriesName != '透明圆圈') {
-              return `${name} : ${value} (${percent}%)`
+              return `${name} : ${numToStr(value)}kw·h`
             }
             return ''
           }
@@ -187,42 +179,104 @@ export default {
     }
   },
   watch: {
-    areaType () {
+    areaType() {
       this.dateTabClick()
-      this.getBuildingData()
       this.getStorageData()
+      this.getPageDatas()
     }
   },
-  mounted () {
-    this.getBuildingData()
+  mounted() {
     this.getStorageData()
-   },
+    this.getPageDatas()
+  },
   methods: {
-    dateTabClick () {
-      this.productionList = this.productionList.map(item => ({
-        ...item,
-        value: parseFloat((Math.random() * 100 + (Number(this.dateType) * 100)).toFixed(1)),
-      }));
+    dateTabClick(item) {
+      this.getPvDataList()
     },
-    getBuildingData () {
-      const useStorage = ['配电泵房', '北区综合楼', '南区综合楼', '北区加油站', '南区加油站', '北区停车场', '南区停车场']
-      const facStorage = ['北区供电网', '南区供电网', '南区空调设施', '北区空调设施', '南区公共设施', '北区室外照明', '北区公共设施']
-      const fliterName = this.areaType=='1'?'北区':this.areaType=='2'?'南区':''
-      this.buildingData= this.buildingType === '1' ? useStorage.filter(item=>item.includes(fliterName)).map(item => ({
-        name: item,
-        value: Math.floor(Math.random() * 100 + 200)
-      })) : facStorage.filter(item=>item.includes(fliterName)).map(item => ({
-        name: item,
-        value: Math.floor(Math.random() * 100 + 200)
-      }))
+    getPageDatas() {
+      this.getPvDataList()
+      this.getDeviceElecMeter()
+    },
+    async getPvDataList() {
+      const {data} = await pgSupplyTotalPv({
+        areaCode: this.areaType,
+      })
+      if (!data) {
+        return
+      }
+      const {
+        thisDay,
+        thisMonth,
+        thisYear
+      } = data
+      const [prodPv, usePv, upPv] = this.productionList
+      if (this.dateType === '1') {
+        prodPv.value = numToStr(thisDay.genElecQuantity)
+        usePv.value = numToStr(thisDay.useElecQuantity)
+        upPv.value = numToStr(thisDay.upElecQuantity)
+      }
+      if (this.dateType === '2') {
+        prodPv.value = numToStr(thisMonth.genElecQuantity)
+        usePv.value = numToStr(thisMonth.useElecQuantity)
+        upPv.value = numToStr(thisMonth.upElecQuantity)
+      }
+      if (this.dateType === '3') {
+        prodPv.value = numToStr(thisYear.genElecQuantity)
+        usePv.value = numToStr(thisYear.useElecQuantity)
+        upPv.value = numToStr(thisYear.upElecQuantity)
+      }
+      this.productionList = [prodPv, usePv, upPv]
+    },
+    async getDeviceElecMeter() {
+      const params = {
+        startRecTime: DateTool.now(DateTool.DateFormat.YYYY_MM_DD_00_00_00),
+        endRecTime: DateTool.now(DateTool.DateFormat.YYYY_MM_DD_23_59_59),
+        meterCls: 45,
+        areaCode: this.areaType || -1,
+        facsCategory: 'Z',
+      };
+      listByFacs(params).then(response => {
+        this.buildingData = response.data.map(item => ({
+          name: item.objName,
+          value: item.quantity || 0,
+        }));
+      })
+    },
+
+    async getStorageData() {
+      const {rows} = await listConfig({
+        configKey: "storage-equipped-capacity",
+      })
+      if (!rows || !rows.length) {
+        return;
+      }
+      const cfg = JSON.parse(rows[0].remark)
+      const {data: thisDay} = await getSumHStorage({
+        areaCode: this.areaType,
+        startRecTime: DateTool.now(),
+      })
+      const {data: hisTotal} = await getSumHStorage({
+        areaCode: this.areaType
+      })
+      const {data: realtimeStorage = {}} = await getSumRealTimeStorage({
+        areaCode: this.areaType,
+        startRecTime: DateTool.now()
+      })
+      let equipedStorage = cfg[this.areaType] || 1
+      if (!this.areaType || this.areaType === '-1') {
+        for (let item in cfg) {
+          equipedStorage += cfg[item]
+        }
+      }
+      const realTimeStorage = realtimeStorage.currentCapacity || 0
+      this.energy = (realTimeStorage / equipedStorage * 100).toFixed(2)
+      const [thisDayCharge, thisDayDischarge, totalCharge, totalDischarge] = this.storageData
+      thisDayCharge.value = numToStr(thisDay.chargeElecQuantity)
+      thisDayDischarge.value = numToStr(thisDay.dischargeElecQuantity)
+      totalCharge.value = numToStr(hisTotal.chargeElecQuantity)
+      totalDischarge.value = numToStr(hisTotal.dischargeElecQuantity)
+      this.storageData = [thisDayCharge, thisDayDischarge, totalCharge, totalDischarge]
     },
-    getStorageData () {
-      this.energy = Math.floor(Math.random() * 100)
-      this.storageData = this.storageData.map(item => ({
-        ...item,
-        value : Math.floor(Math.random() * 100)
-      }))
-    }
   }
 }
 </script>

ems-ui-cloud/src/views/largeScreen/home/right.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="description">
             <span class="text">本月用电量</span>
-            <div class="rate">
+            <div class="rate" :style="`${useElec.trend === 'up'? 'red': 'green'}`">
               <span>环比</span>
               <img src="@/assets/images/home/down-arrow.svg" alt="">
               <span>{{ useElec.rate }}%</span>
@@ -83,30 +83,28 @@ import CusModule from '../components/CusModule.vue';
 import BaseChart from '@/components/BaseChart/index.vue'
 import vueSeamlessScroll from 'vue-seamless-scroll'
 import {mapState} from 'vuex';
+import {qryElecMeterByDate, qryWaterMeterByDate} from "@/api/device/elecMeterH";
+import {DateTool} from "@/utils/DateTool";
+import {numToStr} from "@/utils";
+import {listDeviceStatus, listDeviceType} from "@/api/device/device";
 
 export default {
   name: 'HomeRight',
   data() {
     return {
       useElec: {
-        value: '2589',
         unit: '度',
-        rate: '12'
       },
       userWater: {
-        value: '989',
         unit: '吨',
-        rate: '10'
       },
       userEnergy: {
-        value: '4892',
         unit: '元',
-        rate: '9'
       },
       equipment: [
-        {name: '设备总数', value: '2024', unit: '个', color: '#01A7F0'},
-        {name: '在线设备', value: '1800', unit: '个', color: '#B3E3E8'},
-        {name: '离线设备', value: '200', unit: '个', color: '#fff'}
+        {name: '设备总数', unit: '个', color: '#01A7F0'},
+        {name: '在线设备', unit: '个', color: '#B3E3E8'},
+        {name: '离线设备', unit: '个', color: '#fff'}
       ],
       equipmentPieData: [],
       classOption: {
@@ -183,6 +181,7 @@ export default {
             emphasis: {
               label: {
                 show: true,
+
               },
             },
             data: this.equipmentPieData,
@@ -215,34 +214,85 @@ export default {
   },
   watch: {
     areaType() {
-      this.getUseInfo()
-      this.getEquipment()
+      this.getPageDatas()
     }
   },
   mounted() {
-    this.getUseInfo()
-    this.getEquipment()
+    this.getPageDatas()
   },
   methods: {
-    getUseInfo() {
-      this.useElec.value = Math.floor(Math.random() * 100 + 2000)
-      this.useElec.rate = Math.floor(Math.random() * 10)
-      this.userWater.value = Math.floor(Math.random() * 100 + 1000)
-      this.userWater.rate = Math.floor(Math.random() * 10)
-      this.userEnergy.value = Math.floor(Math.random() * 100 + 4000)
-      this.userEnergy.rate = Math.floor(Math.random() * 10)
+    getPageDatas() {
+      this.getElecWaterCost()
+      this.getDeviceStatus()
+      this.cntListDeviceType()
     },
-    getEquipment() {
-      this.equipment = this.equipment.map(item => ({
-        ...item,
-        value: Math.floor(Math.random() * 100)
-      }))
-      const pieData = ['照明设备', '暖通设备', '电气设备', '安防设备']
-      this.equipmentPieData = pieData.map(item => ({
-        name: item,
-        value: Math.floor(Math.random() * 100)
+    async getElecWaterCost() {
+      const {data: thisMonthElecMeter} = await qryElecMeterByDate(DateTool.thisMonth(), this.areaType)
+      const {data: thisMonthWaterMeter} = await qryWaterMeterByDate(DateTool.thisMonth(), this.areaType)
+      const {data: lastMonthElecMeter} = await qryElecMeterByDate(DateTool.lastMonth(), this.areaType)
+      const {data: lastMonthWaterMeter} = await qryWaterMeterByDate(DateTool.lastMonth(), this.areaType)
+      const elec = {
+        unit: '度',
+      }
+      elec.value = numToStr(thisMonthElecMeter.quantity)
+      if (thisMonthElecMeter.quantity > lastMonthElecMeter.quantity) {
+        elec.rate = ((thisMonthElecMeter.quantity - lastMonthElecMeter.quantity) / lastMonthElecMeter.quantity * 100).toFixed(2)
+        elec.trend = 'up'
+      } else {
+        elec.rate = ((lastMonthElecMeter.quantity - thisMonthElecMeter.quantity) / lastMonthElecMeter.quantity * 100).toFixed(2)
+        elec.trend = 'down'
+      }
+      this.useElec = elec
+      const water = {
+        unit: '吨',
+      }
+      water.value = numToStr(thisMonthWaterMeter.quantity)
+      if (thisMonthWaterMeter.quantity > lastMonthWaterMeter.quantity) {
+        water.rate = ((thisMonthWaterMeter.quantity - lastMonthWaterMeter.quantity) / lastMonthWaterMeter.quantity * 100).toFixed(2)
+        water.trend = 'up'
+      } else {
+        water.rate = ((lastMonthWaterMeter.quantity - thisMonthWaterMeter.quantity) / lastMonthWaterMeter.quantity * 100).toFixed(2)
+        water.trend = 'down'
+      }
+      this.userWater = water
+      const energy = {
+        unit: '元',
+      }
+      energy.value = numToStr(thisMonthElecMeter.useCost + thisMonthWaterMeter.useCost)
+      if (thisMonthElecMeter.useCost + thisMonthWaterMeter.useCost > lastMonthElecMeter.useCost + lastMonthWaterMeter.useCost) {
+        energy.rate = ((thisMonthElecMeter.useCost + thisMonthWaterMeter.useCost - lastMonthElecMeter.useCost - lastMonthWaterMeter.useCost) / lastMonthElecMeter.useCost * 100).toFixed(2)
+        energy.trend = 'up'
+      } else {
+        energy.rate = ((lastMonthElecMeter.useCost + lastMonthWaterMeter.useCost - thisMonthElecMeter.useCost - thisMonthWaterMeter.useCost) / lastMonthElecMeter.useCost * 100).toFixed(2)
+        energy.trend = 'down'
+      }
+      this.userEnergy = energy
+    },
+    async getDeviceStatus() {
+      const {data} = await listDeviceStatus({
+        areaCode: this.areaType
+      })
+      if (!data) {
+        return
+      }
+      const [total, online, offline] = this.equipment
+      total.value = data.total
+      online.value = data.onlineCount
+      offline.value = data.offlineCount
+      this.equipment = [
+        total, online, offline
+      ]
+    },
+    async cntListDeviceType() {
+      const {data} = await listDeviceType({
+        areaCode: this.areaType
+      })
+      this.equipmentPieData = data.map(item => ({
+        name: item.typeName || '其他',
+        value: item.total
       }))
-    }
+    },
+
   }
 }
 </script>

ems-ui-cloud/src/views/largeScreen/index.vue

@@ -131,6 +131,7 @@ export default {
   height: 230px;
   text-align: center;
   background-image: url('~@/assets/images/layout/head.png');
+  background-size: 85% 100%;
   background-position: center;
   background-repeat: no-repeat;
 
@@ -154,10 +155,11 @@ export default {
   z-index: 50;
   top: 0;
   left: 0;
-  width: 403px;
+  width: 425px;
   height: 1081px;
   background-image: url('~@/assets/images/layout/left.png');
   background-repeat: no-repeat;
+  background-size: 100% 100%;
   padding-left: 7px;
   padding-right: 6px;
   padding-top: 4px;
@@ -204,10 +206,11 @@ export default {
   z-index: 40;
   top: 0;
   right: 0;
-  width: 403px;
+  width: 425px;
   height: 1081px;
   background-image: url('~@/assets/images/layout/right.png');
   background-repeat: no-repeat;
+  background-size: 100% 100%;
   padding-left: 6px;
   padding-right: 7px;
   padding-top: 4px;
@@ -264,6 +267,7 @@ export default {
   background-image: url('~@/assets/images/layout/footer.png');
   background-position: center;
   background-repeat: no-repeat;
+  background-size: 85% 100%;
   z-index: 50;
 }
 </style>