+ 首页接口联调

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

@@ -29,6 +29,16 @@ export const DateTool = {
     }
     return result;
   },
+  get24Time: function (timeSplit = 5) {
+    const now = dayjs();
+    let zero = dayjs().subtract(1, 'day').startOf('hour').add(1, 'hour');
+    const result = [];
+    while (zero.isSameOrBefore(now)) {
+      result.push(zero.format('HH:mm'));
+      zero = zero.add(timeSplit, 'minute');
+    }
+    return result;
+  },
   now: (format = DateTool.DateFormat.YYYY_MM_DD) => {
     return dayjs().format(format);
   },

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

@@ -116,9 +116,9 @@ export function qryElecMeterByDate(date) {
   })
 }
 
-export function qryTimeIndexElecMeterByDay(date) {
+export function qryTimeIndexElecMeterByDay(date, timeIndex) {
   return request({
-    url: `/ems/elecMeterH/sum/timeIndex/byDate/${date}`,
+    url: `/ems/elecMeterH/sum/timeIndex/byDate/${date}/${timeIndex}`,
     method: 'get',
   })
 }
@@ -137,9 +137,9 @@ export function qryWaterMeterByDate(date) {
   })
 }
 
-export function qryTimeIndexWaterMeterByDay(date) {
+export function qryTimeIndexWaterMeterByDay(date, timeIndex) {
   return request({
-    url: `/ems/waterMeterH/sum/timeIndex/byDate/${date}`,
+    url: `/ems/waterMeterH/sum/timeIndex/byDate/${date}/${timeIndex}`,
     method: 'get',
   })
 }

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

@@ -47,7 +47,16 @@ export const DateTool = {
     }
     return dates;
   },
-
+  get24Time: function (timeSplit = 5) {
+    const now = dayjs();
+    let zero = dayjs().subtract(1, 'day').startOf('hour').add(1, 'hour');
+    const result = [];
+    while (zero.isSameOrBefore(now)) {
+      result.push(zero.format('MM-DD HH:mm'));
+      zero = zero.add(timeSplit, 'minute');
+    }
+    return result;
+  },
   getMonthsOfYearAgo: () => {
     const month = [];
     const currentDate = dayjs();
@@ -59,7 +68,12 @@ export const DateTool = {
     }
     return month;
   },
-
+  timeIndex: (date = dayjs()) => {
+    return date.format('HH');
+  },
+  lastDay: (format = DateTool.DateFormat.YYYY_MM_DD) => {
+    return dayjs().subtract(1, 'day').format(format);
+  },
   lastMonth: (format = DateTool.DateFormat.YYYY_MM) => {
     return dayjs().subtract(1, 'month').format(format);
   },

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

@@ -67,7 +67,7 @@
           </div>
         </div>
       </div>
-      <BaseChart width="100%" height="250px" :option="energyOptions"/>
+      <BaseChart width="100%" height="350px" :option="dtCost"/>
     </el-card>
   </div>
 </template>
@@ -75,7 +75,12 @@
 <script>
 import BaseChart from '@/components/BaseChart'
 import SubTitle from '@/components/SubTitle/index.vue'
-import {qryElecMeterByDate, qryWaterMeterByDate} from "@/api/device/elecMeterH";
+import {
+  qryElecMeterByDate,
+  qryTimeIndexElecMeterByDay,
+  qryTimeIndexWaterMeterByDay,
+  qryWaterMeterByDate
+} from "@/api/device/elecMeterH";
 import {copyObj, numToStr} from "@/utils";
 import {DateTool} from "@/utils/DateTool";
 
@@ -118,6 +123,112 @@ const sumCostConst = {
     }
   ]
 }
+
+const dtCostConst = {
+  toolbox: {
+    itemGap: 10,
+    itemSize: 16,
+    right: 10,
+    top: 0,
+    show: true,
+    feature: {
+      magicType: {
+        show: true,
+        type: ['bar', 'line']
+      },
+      saveAsImage: {
+        show: true
+      }
+    }
+  },
+  // color: ['#f0c725', '#16f892'],
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: { // 坐标轴指示器，坐标轴触发有效
+      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+    }
+  },
+  legend: {
+    x: 'center',
+    top: '0',
+    textStyle: {
+      // color: '#c1cadf',
+      fontSize: 14
+    }
+  },
+  grid: {
+    left: '5%',
+    right: '6%',
+    top: '15%',
+    bottom: '5%',
+    containLabel: true
+  },
+  xAxis: [{
+    type: 'category',
+    boundaryGap: true,
+    data: [],
+    axisLine: {
+      lineStyle: {
+        // color: 'rgba(240,199,37,1)'
+      }
+    },
+    axisLabel: {
+      interval: 0,
+      // color: '#c1cadf',
+      fontSize: '15',
+    }
+  }],
+  yAxis: [{
+    type: 'value',
+    name: '元',
+    nameTextStyle: {
+      // color: '#c1cadf',
+      align: 'right',
+      lineHeight: 10
+    },
+    axisLine: {
+      lineStyle: {
+        // color: 'rgba(240,199,37,1)'
+      }
+    },
+    axisLabel: {
+      interval: 0,
+      // color: '#c1cadf',
+      fontSize: '15'
+    },
+    splitLine: {
+      show: false
+    }
+  }],
+  series: [
+    {
+      name: '水',
+      type: 'bar',
+      smooth: true,
+      symbolSize: 8,
+      data: [],
+      barWidth: '17%',
+      itemStyle: {
+        normal: {
+          color: '#1396DB'
+        }
+      }
+    },
+    {
+      name: '电',
+      type: 'bar',
+      smooth: true,
+      symbolSize: 8,
+      data: [],
+      barWidth: '17%',
+      itemStyle: {
+        normal: {
+          color: '#F4EA29'
+        }
+      }
+    }
+  ]
+}
 export default {
   name: "Index",
   data() {
@@ -150,13 +261,29 @@ export default {
         },
       ],
       sumCost: {},
+      dtCost: {},
       waterMeter: {},
       elecMeter: {},
       activeDimension: '2',
       dimensionList: [
-        {name: '天', value: '2'},
-        {name: '月', value: '3'},
-        {name: '年', value: '4'},
+        {
+          name: '天', value: '2',
+          date: () => {
+            return [DateTool.lastDay(), DateTool.timeIndex()]
+          }
+        },
+        {
+          name: '月', value: '3',
+          date: () => {
+            return DateTool.now(DateTool.DateFormat.YYYY_MM)
+          }
+        },
+        {
+          name: '年', value: '4',
+          date: () => {
+            return DateTool.now(DateTool.DateFormat.YYYY)
+          }
+        },
       ],
       consumList: [
         {
@@ -169,124 +296,9 @@ export default {
     };
   },
   components: {BaseChart, SubTitle},
-  computed: {
-    energyOptions() {
-      const dataArr = []
-      let dataObj = {
-        name: "用能趋势分析",
-        type: "bar",
-        year: ["2015", "2016", "2017", "2018", "2019", "2020"],
-        val: [
-          {
-            name: '水',
-            value: ["0", "0", "20", "11", "18", "5"]
-          },
-          {
-            name: '电',
-            value: ["4", "10", "2", "22", "12", "3"]
-          }
-        ]
-      }
-      dataObj.val.map(item => {
-        const newArr = {
-          name: item.name,
-          type: 'bar',
-          smooth: true,
-          symbolSize: 8,
-          data: item.value,
-          barWidth: '17%',
-          itemStyle: {
-            normal: {
-              color: item.name === '水' ? '#1396DB' : '#F4EA29'
-            }
-          }
-        }
-
-        dataArr.push(newArr)
-      })
-      return {
-        toolbox: {
-          itemGap: 10,
-          itemSize: 16,
-          right: 10,
-          top: 0,
-          show: true,
-          feature: {
-            magicType: {
-              show: true,
-              type: ['bar', 'line']
-            },
-            saveAsImage: {
-              show: true
-            }
-          }
-        },
-        // color: ['#f0c725', '#16f892'],
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        legend: {
-          x: 'center',
-          top: '0',
-          textStyle: {
-            // color: '#c1cadf',
-            fontSize: 14
-          }
-        },
-        grid: {
-          left: '5%',
-          right: '6%',
-          top: '5%',
-          bottom: '10%',
-          containLabel: false
-        },
-        xAxis: [{
-          type: 'category',
-          boundaryGap: true,
-          data: dataObj.year,
-          axisLine: {
-            lineStyle: {
-              // color: 'rgba(240,199,37,1)'
-            }
-          },
-          axisLabel: {
-            interval: 0,
-            // color: '#c1cadf',
-            fontSize: '15'
-          }
-        }],
-        yAxis: [{
-          type: 'value',
-          name: '(处)',
-          nameTextStyle: {
-            // color: '#c1cadf',
-            align: 'right',
-            lineHeight: 10
-          },
-          axisLine: {
-            lineStyle: {
-              // color: 'rgba(240,199,37,1)'
-            }
-          },
-          axisLabel: {
-            interval: 0,
-            // color: '#c1cadf',
-            fontSize: '15'
-          },
-          splitLine: {
-            show: false
-          }
-        }],
-        series: dataArr
-      }
-
-    }
-  },
   mounted() {
     this.sumWaterElecMeter(DateTool.lastMonth())
+    this.getWaterElecMeterTrend(this.dimensionList[0])
   },
   methods: {
     numToStr,
@@ -302,6 +314,26 @@ export default {
     },
     dimensionChange(item) {
       this.activeDimension = item.value
+      this.getWaterElecMeterTrend(item)
+    },
+    async getWaterElecMeterTrend(item) {
+      const options = copyObj(dtCostConst);
+      if (item.value === '2') {
+        const [day, timeIndex] = item.date()
+        const _24Time = DateTool.get24Time(60);
+        const {data: timeElecIndex} = await qryTimeIndexElecMeterByDay(day, timeIndex)
+        const {data: timeWaterIndex} = await qryTimeIndexWaterMeterByDay(day, timeIndex)
+        options.xAxis[0].data = _24Time;
+        _24Time.map((item, index) => {
+          options.series[0].data.push(timeWaterIndex[index] ? timeWaterIndex[index].waterQuantity : 0)
+          options.series[1].data.push(timeElecIndex[index] ? timeElecIndex[index].elecQuantity : 0)
+        })
+        options.xAxis[0].axisLabel.formatter = function (value) {
+          // 按空格分割字符串并换行显示
+          return value.split(' ').join('\n');
+        }
+        this.dtCost = options
+      }
     },
     async sumWaterElecMeter(date) {
       const {data: elecMeter} = await qryElecMeterByDate(date)