+ 大屏荷接口对接

ems-ui-cloud/src/api/device/elecMeterH.js

@@ -2,11 +2,11 @@ import request from '@/utils/request'
 
 // 查询用电计量-小时列表
 export function listElecMeterH(query) {
-  return request({
-    url: '/ems/elecMeterH/list',
-    method: 'get',
-    params: query
-  })
+    return request({
+        url: '/ems/elecMeterH/list',
+        method: 'get',
+        params: query
+    })
 }
 
 /**
@@ -14,154 +14,168 @@ export function listElecMeterH(query) {
  *
  */
 export function getNumElecMeterH(query) {
-  return request({
-    url: '/ems/elecMeterH/staByTime',
-    method: 'get',
-    params: query
-  })
+    return request({
+        url: '/ems/elecMeterH/staByTime',
+        method: 'get',
+        params: query
+    })
 }
 
 // 新增用电计量-小时
 export function addElecMeterH(data) {
-  return request({
-    url: '/ems/elecMeterH',
-    method: 'post',
-    data: data
-  })
+    return request({
+        url: '/ems/elecMeterH',
+        method: 'post',
+        data: data
+    })
 }
 
 // 修改用电计量-小时
 export function updateElecMeterH(data) {
-  return request({
-    url: '/ems/elecMeterH',
-    method: 'put',
-    data: data
-  })
+    return request({
+        url: '/ems/elecMeterH',
+        method: 'put',
+        data: data
+    })
 }
 
 // 删除用电计量-小时
 export function delElecMeterH(date) {
-  return request({
-    url: '/ems/elecMeterH/delByDate?date=' + date,
-    method: 'delete'
-  })
+    return request({
+        url: '/ems/elecMeterH/delByDate?date=' + date,
+        method: 'delete'
+    })
 }
 
 // 查询用水计量-小时列表
 export function listWaterMeterH(query) {
-  return request({
-    url: '/ems/waterMeterH/list',
-    method: 'get',
-    params: query
-  })
+    return request({
+        url: '/ems/waterMeterH/list',
+        method: 'get',
+        params: query
+    })
 }
 
 // 查询用水计量-小时详细
 export function getWaterMeterH(id) {
-  return request({
-    url: '/ems/waterMeterH/' + id,
-    method: 'get'
-  })
+    return request({
+        url: '/ems/waterMeterH/' + id,
+        method: 'get'
+    })
 }
 
 // 新增用水计量-小时
 export function addWaterMeterH(data) {
-  return request({
-    url: '/ems/waterMeterH',
-    method: 'post',
-    data: data
-  })
+    return request({
+        url: '/ems/waterMeterH',
+        method: 'post',
+        data: data
+    })
 }
 
 // 修改用水计量-小时
 export function updateWaterMeterH(data) {
-  return request({
-    url: '/ems/waterMeterH',
-    method: 'put',
-    data: data
-  })
+    return request({
+        url: '/ems/waterMeterH',
+        method: 'put',
+        data: data
+    })
 }
 
 // 删除用水计量-小时
 export function delWaterMeterH(id) {
-  return request({
-    url: '/ems/waterMeterH/' + id,
-    method: 'delete'
-  })
+    return request({
+        url: '/ems/waterMeterH/' + id,
+        method: 'delete'
+    })
 }
 
 /**
  * 条件查询用能指标
  */
 export function listByFacs(queryMeter) {
-  return request({
-    url: '/ems/elecMeterH/hour/listFacsMeterTotal',
-    method: 'get',
-    params: queryMeter
-  })
+    return request({
+        url: '/ems/elecMeterH/hour/listFacsMeterTotal',
+        method: 'get',
+        params: queryMeter
+    })
 }
 
 export function listFacsMeter(queryMeter) {
-  return request({
-    url: '/ems/elecMeterH/hour/listFacsMeter',
-    method: 'get',
-    params: queryMeter
-  })
+    return request({
+        url: '/ems/elecMeterH/hour/listFacsMeter',
+        method: 'get',
+        params: queryMeter
+    })
 }
 
-export function qryElecMeterByDate(date) {
-  return request({
-    url: `/ems/elecMeterH/sum/byDate/${date}`,
-    method: 'get'
-  })
+export function qryElecMeterByDate(date, areaCode) {
+    return request({
+        url: `/ems/elecMeterH/sum/byDate/${date}`,
+        params: {
+            areaCode
+        },
+        method: 'get'
+    })
 }
 
 export function qryElecMeterByYear(date) {
-  return request({
-    url: `/ems/elecMeterH/sum/date/byYear/${date}`,
-    method: 'get'
-  })
+    return request({
+        url: `/ems/elecMeterH/sum/date/byYear/${date}`,
+        method: 'get'
+    })
 }
 
 export function qryTimeIndexElecMeterByDay(date, timeIndex) {
-  return request({
-    url: `/ems/elecMeterH/sum/timeIndex/byDate/${date}/${timeIndex}`,
-    method: 'get',
-  })
+    return request({
+        url: `/ems/elecMeterH/sum/timeIndex/byDate/${date}/${timeIndex}`,
+        method: 'get',
+    })
 }
 
 export function qryDateElecMeterByDate(date) {
-  return request({
-    url: `/ems/elecMeterH/sum/date/byDate/${date}`,
-    method: 'get',
-  })
+    return request({
+        url: `/ems/elecMeterH/sum/date/byDate/${date}`,
+        method: 'get',
+    })
 }
 
-export function qryWaterMeterByDate(date) {
-  return request({
-    url: `/ems/waterMeterH/sum/byDate/${date}`,
-    method: 'get'
-  })
+export function qryWaterMeterByDate(date, areaCode) {
+    return request({
+        url: `/ems/waterMeterH/sum/byDate/${date}`,
+        params: {
+            areaCode
+        },
+        method: 'get'
+    })
 }
 
 export function qryTimeIndexWaterMeterByDay(date, timeIndex) {
-  return request({
-    url: `/ems/waterMeterH/sum/timeIndex/byDate/${date}/${timeIndex}`,
-    method: 'get',
-  })
+    return request({
+        url: `/ems/waterMeterH/sum/timeIndex/byDate/${date}/${timeIndex}`,
+        method: 'get',
+    })
 }
 
 export function qryDateWaterMeterByDate(date) {
-  return request({
-    url: `/ems/waterMeterH/sum/date/byDate/${date}`,
-    method: 'get',
-  })
+    return request({
+        url: `/ems/waterMeterH/sum/date/byDate/${date}`,
+        method: 'get',
+    })
 }
 
 export function qryDateWaterMeterByYear(date) {
-  return request({
-    url: `/ems/waterMeterH/sum/date/byYear/${date}`,
-    method: 'get',
-  })
+    return request({
+        url: `/ems/waterMeterH/sum/date/byYear/${date}`,
+        method: 'get',
+    })
 }
 
+
+export function qryDeviceDay(param) {
+    return request({
+        url: `/ems/elecMeterH/sum/device/day`,
+        params: param,
+        method: 'get',
+    })
+}

ems-ui-cloud/src/api/device/meterDevice.js

@@ -2,65 +2,74 @@ import request from '@/utils/request'
 
 // 查询计量设备列表
 export function listDevice(query) {
-  return request({
-    url: '/ems/meterDevice/list',
-    method: 'get',
-    params: query
-  })
+    return request({
+        url: '/ems/meterDevice/list',
+        method: 'get',
+        params: query
+    })
 }
+
 //递归查询 区域 下的设备(分页)
 export function listAreaDevice(query) {
-  return request({
-    url: '/ems/meterDevice/listRecursionByArea',
-    method: 'get',
-    params: query
-  })
+    return request({
+        url: '/ems/meterDevice/listRecursionByArea',
+        method: 'get',
+        params: query
+    })
 }
 
 //根据设施获取设备树结构
-export function getDeviceTree(parentCode , meterCls, colMode) {
-  return request({
-    url: '/ems/meterDevice/getTreeByArea',
-    method: 'get',
-    params: {
-      parentCode,
-      meterCls,
-      colMode
-    }
-  })
+export function getDeviceTree(parentCode, meterCls, colMode) {
+    return request({
+        url: '/ems/meterDevice/getTreeByArea',
+        method: 'get',
+        params: {
+            parentCode,
+            meterCls,
+            colMode
+        }
+    })
 }
 
 
 // 查询计量设备详细
 export function getDevice(id) {
-  return request({
-    url: '/ems/meterDevice/' + id,
-    method: 'get'
-  })
+    return request({
+        url: '/ems/meterDevice/' + id,
+        method: 'get'
+    })
 }
 
 // 新增计量设备
 export function addDevice(data) {
-  return request({
-    url: '/ems/meterDevice',
-    method: 'post',
-    data: data
-  })
+    return request({
+        url: '/ems/meterDevice',
+        method: 'post',
+        data: data
+    })
 }
 
 // 修改计量设备
 export function updateDevice(data) {
-  return request({
-    url: '/ems/meterDevice',
-    method: 'put',
-    data: data
-  })
+    return request({
+        url: '/ems/meterDevice',
+        method: 'put',
+        data: data
+    })
 }
 
 // 删除计量设备
 export function delDevice(id) {
-  return request({
-    url: '/ems/meterDevice/' + id,
-    method: 'delete'
-  })
+    return request({
+        url: '/ems/meterDevice/' + id,
+        method: 'delete'
+    })
+}
+
+export function cntDevice(param) {
+    return request({
+        url: '/ems/meterDevice/cnt',
+        params: param,
+        method: 'get'
+    })
 }

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

@@ -36,7 +36,7 @@
 
     </CusModule>
     <CusModule class="module-top" title="新能源消纳情况">
-      <BaseChart height="350px" width="100%" :option="lineOptions" />
+      <BaseChart height="350px" width="100%" :option="lineOptions"/>
     </CusModule>
   </div>
 </template>
@@ -46,23 +46,17 @@ import BaseChart from '@/components/BaseChart/index.vue'
 import {dateFormat} from '@/utils';
 import * as echarts from 'echarts'
 import {mapState} from 'vuex';
+import {cntDevice} from "@/api/device/meterDevice";
+import {qryDeviceDay} from "@/api/device/elecMeterH";
+import {DateTool} from "@/utils/DateTool";
+
 export default {
   name: 'SocLeft',
-  data () {
+  data() {
     return {
       lineData: [],
-      meterReading: {
-        total: '50',
-        actual: '45',
-        fail: '5',
-        rate: '90'
-      },
-      energyUse: [
-        {value: 123, name: "空调", },
-        {value: 96, name: "照明"},
-        {value: 43, name: "电梯"},
-        {value: 21, name: "其他"},
-      ]
+      meterReading: {},
+      energyUse: []
     };
   },
   components: {
@@ -71,7 +65,7 @@ export default {
   },
   computed: {
     ...mapState('userState', ['areaType']),
-    pieOptions () {
+    pieOptions() {
       return {
         legend: {
           show: false,
@@ -134,7 +128,7 @@ export default {
         ],
       }
     },
-    lineOptions () {
+    lineOptions() {
       return {
         legend: {
           show: false,
@@ -179,10 +173,10 @@ export default {
                   offset: 0,
                   color: "rgba(81, 139, 152,0.8)"
                 },
-                {
-                  offset: 1,
-                  color: "rgba(81, 139, 152, 0)"
-                }
+                  {
+                    offset: 1,
+                    color: "rgba(81, 139, 152, 0)"
+                  }
                 ], false),
                 shadowColor: 'rgba(81, 139, 152, 0.5)', //阴影颜色
                 shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
@@ -195,17 +189,15 @@ export default {
     }
   },
   watch: {
-    areaType () {
-      this.lineData = this.getDatesOfLastTenDays()
-      this.getMeterReading()
+    areaType() {
+      this.qryPageDatas()
     }
   },
-  mounted () {
-    this.lineData = this.getDatesOfLastTenDays()
-    this.getMeterReading()
+  mounted() {
+    this.qryPageDatas()
   },
   methods: {
-    getDatesOfLastTenDays () {
+    getDatesOfLastTenDays() {
       var dates = [];
       var today = new Date();
       for (var i = 0; i < 10; i++) {
@@ -219,28 +211,36 @@ export default {
         yData: parseFloat(((Math.random() * 100 + 100)).toFixed(1))
       }));
     },
-    getMeterReading () {
-      if (this.areaType == '') {
-        this.meterReading.total=120
-        this.meterReading.actual=105
-        this.meterReading.fail=15
-        this.meterReading.rate=87.5
-      } else if (this.areaType == '1') {
-        this.meterReading.total=65
-        this.meterReading.actual=54
-        this.meterReading.fail=9
-        this.meterReading.rate=83.1
-      } else if (this.areaType == '2') {
-        this.meterReading.total=55
-        this.meterReading.actual=49
-        this.meterReading.fail=6
-        this.meterReading.rate=89.1
+
+    qryPageDatas() {
+      this.getCntDevice()
+      this.getDeviceElecMeter()
+    },
+    async getCntDevice() {
+      const {data} = await cntDevice({
+        areaCode: this.areaType
+      })
+      const {
+        totalDevice,
+        onlineDevice
+      } = data
+      this.meterReading = {
+        total: totalDevice,
+        actual: onlineDevice,
+        fail: totalDevice - onlineDevice,
+        rate: (onlineDevice / totalDevice * 100).toFixed(1)
       }
-      this.energyUse = this.energyUse.map(item => ({
-        ...item,
-        value:parseFloat(((Math.random() * 100 + 100)).toFixed(1))
+    },
+    async getDeviceElecMeter() {
+      const {data} = await qryDeviceDay({
+        areaCode: this.areaType,
+        startRecTime: DateTool.now()
+      })
+      this.energyUse = data.map(item => ({
+        name: item.deviceName,
+        value: item.elecQuantity.toFixed(1)
       }))
-    }
+    },
   }
 }
 </script>

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

@@ -26,13 +26,13 @@
               {{ item.name }}
             </div>
             <CusProgress :value="item.value" :total="ranking.reduce((a, b) => a + b.value, 0)" :color="item.color"
-              :labelWidth="95" unit="kW·h" showLabel></CusProgress>
+                         :labelWidth="95" unit="kW·h" showLabel></CusProgress>
           </div>
         </div>
       </div>
     </CusModule>
     <CusModule class="module-top" title="用能趋势预测">
-      <BaseChart height="350px" width="100%" :option="lineOptions" />
+      <BaseChart height="350px" width="100%" :option="lineOptions"/>
     </CusModule>
   </div>
 </template>
@@ -41,17 +41,19 @@ import CusModule from '../components/CusModule.vue';
 import CusProgress from '../components/CusProgress.vue';
 import BaseChart from '@/components/BaseChart/index.vue'
 import * as echarts from 'echarts'
-import {dateFormat} from '@/utils'
+import {dateFormat, numToStr} from '@/utils'
 import {mapState} from 'vuex';
+import {qryElecMeterByDate, qryWaterMeterByDate} from "@/api/device/elecMeterH";
+import {DateTool} from "@/utils/DateTool";
+
 export default {
   name: 'SocRight',
-  data () {
+  data() {
     return {
       socList: [
         {
           name: "电",
           image: require("@/assets/images/soc/item1.png"),
-          value: 345,
           unit: "kW·h",
         },
         // {
@@ -63,7 +65,6 @@ export default {
         {
           name: "水",
           image: require("@/assets/images/soc/item3.png"),
-          value: 8541,
           unit: "吨",
         },
       ],
@@ -105,7 +106,7 @@ export default {
   },
   computed: {
     ...mapState('userState', ['areaType']),
-    lineOptions () {
+    lineOptions() {
       return {
         grid: {
           top: "10%",
@@ -150,14 +151,14 @@ export default {
             }
           },
         },
-        {
-          type: "value",
-          name: "kW",
-          position: "right",
-          splitLine: {
-            show: false
-          },
-        }
+          {
+            type: "value",
+            name: "kW",
+            position: "right",
+            splitLine: {
+              show: false
+            },
+          }
         ],
         series: [
           {
@@ -170,14 +171,14 @@ export default {
                   offset: 0,
                   color: "#21C3E8"
                 },
-                {
-                  offset: 0.7,
-                  color: "#1484A1"
-                },
-                {
-                  offset: 1,
-                  color: "#0B2B38"
-                }
+                  {
+                    offset: 0.7,
+                    color: "#1484A1"
+                  },
+                  {
+                    offset: 1,
+                    color: "#0B2B38"
+                  }
                 ])
               }
             },
@@ -201,10 +202,10 @@ export default {
                 offset: 0,
                 color: "#A18C74"
               },
-              {
-                offset: 1,
-                color: "transparent"
-              }
+                {
+                  offset: 1,
+                  color: "transparent"
+                }
               ])
             },
             markLine: {
@@ -243,15 +244,15 @@ export default {
     }
   },
   watch: {
-    areaType () {
+    areaType() {
       this.getSocData()
     }
   },
-  mounted () {
+  mounted() {
     this.getSocData()
   },
   methods: {
-    getDatesOfLastTenDays () {
+    getDatesOfLastTenDays() {
       var dates = [];
       var today = new Date();
       for (var i = 1; i < 11; i++) {
@@ -266,17 +267,23 @@ export default {
         yData2: parseFloat(((Math.random() * 100 + 100)).toFixed(1))
       }));
     },
-    getSocData () {
+    getSocData() {
       this.lineData = this.getDatesOfLastTenDays()
-      this.socList = this.socList.map((item,index) => ({
+      this.getMeterElecWater()
+      this.ranking = this.ranking.map((item, index) => ({
         ...item,
-        value:Math.floor(Math.random() * 100+ (index+1)*100)
-      }))
-      this.ranking = this.ranking.map((item,index) => ({
-        ...item,
-        value:Math.floor(Math.random() * 100 + (index+1)*100)
+        value: Math.floor(Math.random() * 100 + (index + 1) * 100)
       })).reverse();
-    }
+    },
+    async getMeterElecWater() {
+      const {data: elecMeter} = await qryElecMeterByDate(DateTool.now(), this.areaType)
+      const {data: waterMeter} = await qryWaterMeterByDate(DateTool.now(), this.areaType)
+      const [elec, water] = this.socList
+      elec.value = numToStr(elecMeter.elecQuantity)
+      water.value = numToStr(waterMeter.waterQuantity)
+      this.socList = [elec, water]
+    },
+
   }
 }
 </script>
@@ -288,6 +295,7 @@ export default {
   justify-content: space-between;
   margin-top: 20px;
   padding: 0 40px;
+
   .soc-stats-item {
     position: relative;
     width: 120px;
@@ -363,12 +371,12 @@ export default {
   background: #1B4A64;
   font-size: 16px;
 
-  >div:first-of-type,
-  >div:last-of-type {
+  > div:first-of-type,
+  > div:last-of-type {
     flex-basis: 35%;
   }
 
-  >div {
+  > div {
     text-align: center;
   }
 }
@@ -387,12 +395,12 @@ export default {
       background: #000;
     }
 
-    >div:first-of-type,
-    >div:last-of-type {
+    > div:first-of-type,
+    > div:last-of-type {
       flex-basis: 38%;
     }
 
-    >div {
+    > div {
       text-align: center;
       font-size: 13px;
     }