+ 首页接口联调

ems-ui-application/src/utils/DateTool.js

@@ -32,6 +32,19 @@ export const DateTool = {
   now: (format = DateTool.DateFormat.YYYY_MM_DD) => {
     return dayjs().format(format);
   },
+
+  lastMonth: (format = DateTool.DateFormat.YYYY_MM) => {
+    return dayjs().subtract(1, 'month').format(format);
+  },
+  lastYear: (format = DateTool.DateFormat.YYYY) => {
+    return dayjs().subtract(1, 'year').format(format);
+  },
+  thisYear: (format = DateTool.DateFormat.YYYY) => {
+    return dayjs().format(format);
+  },
+  thisMonth: (format = DateTool.DateFormat.YYYY_MM) => {
+    return dayjs().format(format);
+  },
   /**
    * 获取一段时间的日期
    * @param start 开始时间

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

@@ -8,6 +8,7 @@ export function listElecMeterH(query) {
     params: query
   })
 }
+
 /**
  * 查询设施用能统计数据
  *
@@ -19,6 +20,7 @@ export function getNumElecMeterH(query) {
     params: query
   })
 }
+
 // 新增用电计量-小时
 export function addElecMeterH(data) {
   return request({
@@ -87,6 +89,7 @@ export function delWaterMeterH(id) {
     method: 'delete'
   })
 }
+
 /**
  * 条件查询用能指标
  */
@@ -105,3 +108,46 @@ export function listFacsMeter(queryMeter) {
     params: queryMeter
   })
 }
+
+export function qryElecMeterByDate(date) {
+  return request({
+    url: `/ems/elecMeterH/sum/byDate/${date}`,
+    method: 'get'
+  })
+}
+
+export function qryTimeIndexElecMeterByDay(date) {
+  return request({
+    url: `/ems/elecMeterH/sum/timeIndex/byDate/${date}`,
+    method: 'get',
+  })
+}
+
+export function qryDateElecMeterByDate(date) {
+  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 qryTimeIndexWaterMeterByDay(date) {
+  return request({
+    url: `/ems/waterMeterH/sum/timeIndex/byDate/${date}`,
+    method: 'get',
+  })
+}
+
+export function qryDateWaterMeterByDate(date) {
+  return request({
+    url: `/ems/waterMeterH/sum/date/byDate/${date}`,
+    method: 'get',
+  })
+}
+

ems-ui-cloud/src/utils/DateTool.js

@@ -60,4 +60,16 @@ export const DateTool = {
     return month;
   },
 
+  lastMonth: (format = DateTool.DateFormat.YYYY_MM) => {
+    return dayjs().subtract(1, 'month').format(format);
+  },
+  lastYear: (format = DateTool.DateFormat.YYYY) => {
+    return dayjs().subtract(1, 'year').format(format);
+  },
+  thisYear: (format = DateTool.DateFormat.YYYY) => {
+    return dayjs().format(format);
+  },
+  thisMonth: (format = DateTool.DateFormat.YYYY_MM) => {
+    return dayjs().format(format);
+  },
 };

ems-ui-cloud/src/utils/index.js

@@ -411,6 +411,21 @@ export const uuid = () => {
   return UUID.generate();
 };
 
+export const  numToStr=(num, fixed = 2) =>{
+  const million = 10000; // 一万
+  const billion = 100000000; // 一亿
+  let unit = "";
+  let result = Number(num);
+  if (num >= billion) {
+    unit = "亿";
+    result = num / billion;
+  } else if (num >= million) {
+    unit = "万";
+    result = num / million;
+  }
+  return result.toFixed(fixed) + unit;
+}
+
 /**
  * 对象浅拷贝，防止嵌套对象的引用还是原来的对象
  * @param obj

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

@@ -6,7 +6,8 @@
           <span>能耗汇总</span>
           <div class="header-right">
             <div :class="{ 'selected': activeDate === item.value }" v-for="item in dateList" :key="item.name"
-              @click="dateChange(item)">{{ item.name }}</div>
+                 @click="dateChange(item)">{{ item.name }}
+            </div>
           </div>
         </div>
         <div class="summary">
@@ -18,11 +19,11 @@
               <div class="summary-title">
                 <div>电消耗</div>
                 <div class="summary-value">
-                  <span class="value">122</span>
+                  <span class="value">{{ numToStr(decimalFormat(elecMeter.elecQuantity)) }}</span>
                   <span class="unit">kW·h</span>
                 </div>
                 <div class="summary-value">
-                  <span class="value">182</span>
+                  <span class="value">{{ numToStr(decimalFormat(elecMeter.useElecCost)) }}</span>
                   <span class="unit">元</span>
                 </div>
               </div>
@@ -34,11 +35,11 @@
               <div class="summary-title">
                 <div>水消耗</div>
                 <div class="summary-value">
-                  <span class="value">132</span>
+                  <span class="value">{{ numToStr(decimalFormat(waterMeter.waterQuantity)) }}</span>
                   <span class="unit">吨</span>
                 </div>
                 <div class="summary-value">
-                  <span class="value">162</span>
+                  <span class="value">{{ numToStr(decimalFormat(waterMeter.useWaterCost)) }}</span>
                   <span class="unit">元</span>
                 </div>
               </div>
@@ -48,9 +49,9 @@
             <SubTitle title="费用【单位：元】" style="padding-left: 30px;"/>
             <div class="cost">
               <span>总费用</span>
-              <span>344元</span>
+              <span>{{ numToStr(decimalFormat(waterMeter.useWaterCost + elecMeter.useElecCost)) }}元</span>
             </div>
-            <BaseChart  width="100%" height="250px" :option="useOptions" />
+            <BaseChart width="100%" height="250px" :option="sumCost"/>
           </div>
 
         </div>
@@ -62,10 +63,11 @@
         <span>用能趋势分析</span>
         <div class="header-right">
           <div :class="{ 'selected': activeDimension === item.value }" v-for="item in dimensionList" :key="item.name"
-            @click="dimensionChange(item)">{{ item.name }}</div>
+               @click="dimensionChange(item)">{{ item.name }}
+          </div>
         </div>
       </div>
-      <BaseChart width="100%" height="250px" :option="energyOptions" />
+      <BaseChart width="100%" height="250px" :option="energyOptions"/>
     </el-card>
   </div>
 </template>
@@ -73,20 +75,85 @@
 <script>
 import BaseChart from '@/components/BaseChart'
 import SubTitle from '@/components/SubTitle/index.vue'
+import {qryElecMeterByDate, qryWaterMeterByDate} from "@/api/device/elecMeterH";
+import {copyObj, numToStr} from "@/utils";
+import {DateTool} from "@/utils/DateTool";
+
+const sumCostConst = {
+  tooltip: {
+    trigger: 'item',
+  },
+  legend: {
+    show: false,
+    orient: 'vertical',
+    top: '5%',
+    left: '5%'
+  },
+  series: [
+    {
+      name: '费用',
+      type: 'pie',
+      radius: ['35%', '55%'],
+      data: [],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+        }
+      },
+      label: {
+        show: true,
+        position: 'outside',
+        formatter: '{b}\n{d}%',
+      },
+      labelLine: {
+        show: true,
+        length: 30, // 标签线长度
+        lineStyle: {
+          width: 1,
+          type: 'dashed', // 设置虚线样式
+        }
+      }
+    }
+  ]
+}
 export default {
   name: "Index",
-  data () {
+  data() {
     return {
       activeDate: '1',
       dateList: [
-        {name: '上月', value: '1'},
-        {name: '本月', value: '2'},
-        {name: '去年', value: '3'},
-        {name: '本年', value: '4'},
+        {
+          name: '上月',
+          value: '1',
+          date: () => {
+            return DateTool.lastMonth()
+          }
+        },
+        {
+          name: '本月', value: '2', date: () => {
+            return DateTool.thisMonth()
+          }
+        },
+        {
+          name: '去年', value: '3',
+          date: () => {
+            return DateTool.lastYear()
+          }
+        },
+        {
+          name: '本年', value: '4',
+          date: () => {
+            return DateTool.thisYear()
+          }
+        },
       ],
-      activeDimension: '1',
+      sumCost: {},
+      waterMeter: {},
+      elecMeter: {},
+      activeDimension: '2',
       dimensionList: [
-        {name: '小时', value: '1'},
         {name: '天', value: '2'},
         {name: '月', value: '3'},
         {name: '年', value: '4'},
@@ -101,66 +168,9 @@ export default {
       ]
     };
   },
-  components: {BaseChart,SubTitle},
+  components: {BaseChart, SubTitle},
   computed: {
-    useOptions () {
-      return {
-        tooltip: {
-          trigger: 'item',
-        },
-        legend: {
-          show: false,
-          orient: 'vertical',
-          top: '5%',
-          left: '5%'
-        },
-        series: [
-          {
-            name: '费用',
-            type: 'pie',
-            radius: ['35%', '55%'],
-            data: [{
-              name: '水费', value: '162',
-              itemStyle: {
-                normal: {
-                  color: '#1396DB'
-                }
-              }
-            }, {
-              name: '电费', value: '182',
-              itemStyle: {
-                normal: {
-                  color: '#F4EA29'
-                }
-              }
-            }],
-            emphasis: {
-              itemStyle: {
-                shadowBlur: 10,
-                shadowOffsetX: 0,
-                shadowColor: 'rgba(0, 0, 0, 0.5)',
-              }
-            },
-            label: {
-              show: true,
-              position: 'outside',
-              formatter: '{b}\n{d}%',
-            },
-
-            labelLine: {
-              show: true,
-              length: 30, // 标签线长度
-              lineStyle: {
-                width: 1,
-                type: 'dashed', // 设置虚线样式
-              }
-            }
-          }
-        ]
-      }
-
-    },
-    energyOptions () {
+    energyOptions() {
       const dataArr = []
       let dataObj = {
         name: "用能趋势分析",
@@ -275,13 +285,52 @@ export default {
 
     }
   },
+  mounted() {
+    this.sumWaterElecMeter(DateTool.lastMonth())
+  },
   methods: {
-    dateChange (item) {
+    numToStr,
+    decimalFormat(value) {
+      if (!isNaN(value)) {
+        return Number(value).toFixed(2);
+      }
+      return value;
+    },
+    dateChange(item) {
       this.activeDate = item.value
+      this.sumWaterElecMeter(item.date())
     },
-    dimensionChange (item) {
+    dimensionChange(item) {
       this.activeDimension = item.value
-    }
+    },
+    async sumWaterElecMeter(date) {
+      const {data: elecMeter} = await qryElecMeterByDate(date)
+      const {data: waterMeter} = await qryWaterMeterByDate(date)
+      const copy = copyObj(sumCostConst)
+      copy.series[0].data = [
+        {
+          name: '水费',
+          value: this.decimalFormat(waterMeter.useWaterCost),
+          itemStyle: {
+            normal: {
+              color: '#1396DB'
+            }
+          }
+        },
+        {
+          name: '电费',
+          value: this.decimalFormat(elecMeter.useElecCost),
+          itemStyle: {
+            normal: {
+              color: '#F4EA29'
+            }
+          }
+        }
+      ]
+      this.sumCost = copy
+      this.waterMeter = waterMeter
+      this.elecMeter = elecMeter
+    },
   },
 };
 </script>
@@ -316,7 +365,7 @@ export default {
       font-weight: normal;
       font-size: 14px;
 
-      >div {
+      > div {
         display: flex;
         align-items: center;
         cursor: pointer;
@@ -340,27 +389,30 @@ export default {
 .summary {
   display: flex;
   justify-content: space-around;
+
   .summay-chart {
     flex: 1;
     position: relative;
-    .cost{
+
+    .cost {
       position: absolute;
       top: 53%;
       left: 50%;
-      transform: translate(-50%,-50%);
+      transform: translate(-50%, -50%);
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }
   }
+
   .summary-item {
     flex: 1;
     flex-shrink: 0;
     display: flex;
     justify-content: space-around;
 
-    >div {
+    > div {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -388,7 +440,7 @@ export default {
       .summary-title {
         margin-left: 10px;
 
-        >div:first-child {
+        > div:first-child {
           font-weight: bold;
           color: #333;
           margin-bottom: 10px;

ems-ui-cloud/vue.config.js

@@ -35,9 +35,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-         //target: 'http://172.192.13.95:9091/',
-         //target: 'http://172.192.13.80:9100/',
-         target: 'http://172.192.13.80:9100/',
+        target: 'http://172.192.13.95:9100/',
+        // target: 'http://127.0.0.1:9100/',
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API + '/ems']: process.env.EMS_REWRITE_URL,