王子文 电厂大屏

master/src/main/java/com/ruoyi/project/aspen/controller/TElecdashboardHourController.java

@@ -33,6 +33,18 @@ public class TElecdashboardHourController extends BaseController
     @Autowired
     private ITElecdashboardHourService tElecdashboardHourService;
 
+    /**
+     * 查询日期最靠前的24条电厂大屏每小时数据
+     */
+    @PreAuthorize("@ss.hasPermi('aspen:hour:list')")
+    @GetMapping("/listLatest24")
+    public TableDataInfo listLatest24()
+    {
+        startPage();
+        List<TElecdashboardHour> list = tElecdashboardHourService.selectTElecdashboardHourListLatest24();
+        return getDataTable(list);
+    }
+
     /**
      * 查询电厂大屏每小时数据列表
      */

master/src/main/java/com/ruoyi/project/aspen/mapper/TElecdashboardHourMapper.java

@@ -60,4 +60,11 @@ public interface TElecdashboardHourMapper
      * @return 结果
      */
     public int deleteTElecdashboardHourByIds(Long[] ids);
+
+    /**
+     * 查询日期最靠前的24条电厂大屏每小时数据
+     *
+     * @return 日期最靠前的24条电厂大屏每小时数据
+     */
+    public List<TElecdashboardHour> selectTElecdashboardHourListLatest24();
 }

master/src/main/java/com/ruoyi/project/aspen/service/ITElecdashboardHourService.java

@@ -58,4 +58,11 @@ public interface ITElecdashboardHourService
      * @return 结果
      */
     public int deleteTElecdashboardHourById(Long id);
+
+    /**
+     * 查询日期最靠前的24条电厂大屏每小时数据
+     *
+     * @return 日期最靠前的24条电厂大屏每小时数据
+     */
+    public List<TElecdashboardHour> selectTElecdashboardHourListLatest24();
 }

master/src/main/java/com/ruoyi/project/aspen/service/impl/TElecdashboardHourServiceImpl.java

@@ -90,4 +90,14 @@ public class TElecdashboardHourServiceImpl implements ITElecdashboardHourService
     {
         return tElecdashboardHourMapper.deleteTElecdashboardHourById(id);
     }
+
+    /**
+     * 查询日期最靠前的24条电厂大屏每小时数据
+     *
+     * @return 日期最靠前的24条电厂大屏每小时数据
+     */
+    @Override
+    public List<TElecdashboardHour> selectTElecdashboardHourListLatest24() {
+        return tElecdashboardHourMapper.selectTElecdashboardHourListLatest24();
+    }
 }

ui/src/api/aspen/hour.js

@@ -1,5 +1,13 @@
 import request from '@/utils/request'
 
+// 查询日期最靠前的24条电厂大屏每小时数据
+export function listHourLatest24() {
+  return request({
+    url: '/aspen/hour/listLatest24',
+    method: 'get'
+  })
+}
+
 // 查询电厂大屏每小时数据列表
 export function listHour(query) {
   return request({
@@ -50,4 +58,4 @@ export function exportHour(query) {
     method: 'get',
     params: query
   })
-}
+}

ui/src/views/monitor/elec/bottomRight.vue

@@ -15,7 +15,7 @@
       </div>
       <div style="display:flex;flex-direction:row">
         <div style="flex: 3.1" >
-          <bottomRightChart :weekData="weekData"/>
+          <bottomRightChart :weekData="weekData" v-bind="$attrs"/>
         </div>
       <div class="naturalGasData" style="flex: 0.9;">
         <span style="fontSize:14px;position:relative;top:-15px;">NG消耗</span>

ui/src/views/monitor/elec/center.vue

@@ -71,7 +71,7 @@
 import centerChart from "./echart/center/centerChartRate";
 
 export default {
-  props: ['dashboardelecdata'],
+  props: ['dashboardelecdata', 'latest24HourData'],
   data() {
     return {
       openChart: false,
@@ -269,20 +269,21 @@ export default {
     initChart() {
       // 基于准备好的dom，初始化echarts实例
       this.chart = this.echarts.init(document.getElementById('naturalGasChart'))
-
+      const hourArray = [];
+      const carbonArray = [];
+      let data = this.latest24HourData;
+      for (let i = 0; i < data.length; i++) {
+        if (i % 4 == 0) {
+          hourArray.push(data[i].pullDate.toString().substr(14, 5));
+          carbonArray.push(data[i].carbonRealTime);
+        }
+      }
+      hourArray.reverse();
+      carbonArray.reverse();
       this.chart.setOption({
         xAxis: {
           type: 'category',
-          data: [
-            '00:00-03:00',
-            '03:00-06:00',
-            '06:00-09:00',
-            '09:00-12:00',
-            '12:00-15:00',
-            '15:00-18:00',
-            '18:00-21:00',
-            '21:00-00:00'
-          ]
+          data: hourArray
         },
         yAxis: {
           type: 'value',
@@ -290,7 +291,7 @@ export default {
         },
         series: [
           {
-            data: [120, 200, 150, 80, 70, 110, 130],
+            data: carbonArray,
             type: 'line',
             smooth: true,
             symbol: '',

ui/src/views/monitor/elec/echart/bottom/bottomRightChart.vue

@@ -11,7 +11,7 @@
 import echartMixins from "@/utils/resizeMixins";
 
 export default {
-  props:['weekData'],
+  props:['weekData', 'latest24HourData'],
   data() {
     return {
       chart: null,
@@ -41,31 +41,31 @@ export default {
       // 基于准备好的dom，初始化echarts实例
       this.chart = this.echarts.init(document.getElementById("bottomRightChart"));
       //  ----------------------------------------------------------------
-      // 数据
-      let dateBase = new Date();
-      let year = dateBase.getFullYear();
-      let dottedBase = +dateBase + 1000 * 3600 * 24;
-      let weekCategory = [];
-
-      let maxData = 12000;
-      let weekMaxData = [];
-      let weekLineData = [];
-
-      // 周数据
-      for (let i = 0; i < 7; i++) {
-        // 日期
-        var date = new Date((dottedBase -= 1000 * 3600 * 24));
-        weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
-
-        // 折线图数据
-        weekMaxData.push(maxData);
-        var distance = Math.round(Math.random() * 11000 + 500);
-        weekLineData.push(distance);
-      }
-      const dateNum = [];
-      for (let i = 0; i < this.weekData.length; i++) {
-        dateNum[i] = this.weekData[i].evconsume;
-      }
+      // // 数据
+      // let dateBase = new Date();
+      // let year = dateBase.getFullYear();
+      // let dottedBase = +dateBase + 1000 * 3600 * 24;
+      // let weekCategory = [];
+      //
+      // let maxData = 12000;
+      // let weekMaxData = [];
+      // let weekLineData = [];
+      //
+      // // 周数据
+      // for (let i = 0; i < 7; i++) {
+      //   // 日期
+      //   var date = new Date((dottedBase -= 1000 * 3600 * 24));
+      //   weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
+      //
+      //   // 折线图数据
+      //   weekMaxData.push(maxData);
+      //   var distance = Math.round(Math.random() * 11000 + 500);
+      //   weekLineData.push(distance);
+      // }
+      // const dateNum = [];
+      // for (let i = 0; i < this.weekData.length; i++) {
+      //   dateNum[i] = this.weekData[i].evconsume;
+      // }
 
       // // 颜色设置
       // let color = {
@@ -256,6 +256,22 @@ export default {
       //     }
       //   ]
       // };
+
+      const hourArray = [];
+      const gasArray = [];
+      let latestDate = null;
+      let data = this.latest24HourData;
+      for (let i = 0; i < data.length; i++) {
+        if (i == 0) {
+          latestDate = data[i].pullDate.toString().substr(5, 5);
+        } else if (latestDate == data[i].pullDate.toString().substr(5, 5)) {
+          hourArray.push(data[i].pullDate.toString().substr(14, 5));
+          gasArray.push(data[i].gasUsed);
+        }
+      }
+      hourArray.reverse();
+      gasArray.reverse();
+
       let option = {
         tooltip: {
           trigger: "item"
@@ -274,7 +290,7 @@ export default {
               color: "rgba(255,255,255,.8)",
               fontSize: 12
             },
-            data: ['08:00' ,'11:00' ,'14:00' ,'17:00' ,'20:00' ,'23:00' ,'02:00' ,'05:00' ]
+            data: hourArray
             // data: weekCategory
           },
         yAxis: {
@@ -283,7 +299,7 @@ export default {
         },
         series: [
           {
-            data: [99, 180, 200, 310, 459, 601, 800 ,933],
+            data: gasArray,
             // data:dateNum,
             type: 'line',
             smooth: true,
@@ -326,30 +342,46 @@ export default {
       this.chart1 = this.echarts.init(document.getElementById("bottomRightChartDialog"));
       //  ----------------------------------------------------------------
       // 数据
-      let dateBase = new Date();
-      let year = dateBase.getFullYear();
-      let dottedBase = +dateBase + 1000 * 3600 * 24;
-      let weekCategory = [];
-
-      let maxData = 12000;
-      let weekMaxData = [];
-      let weekLineData = [];
-
-      // 周数据
-      for (let i = 0; i < 7; i++) {
-        // 日期
-        var date = new Date((dottedBase -= 1000 * 3600 * 24));
-        weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
+      // let dateBase = new Date();
+      // let year = dateBase.getFullYear();
+      // let dottedBase = +dateBase + 1000 * 3600 * 24;
+      // let weekCategory = [];
+      //
+      // let maxData = 12000;
+      // let weekMaxData = [];
+      // let weekLineData = [];
+      //
+      // // 周数据
+      // for (let i = 0; i < 7; i++) {
+      //   // 日期
+      //   var date = new Date((dottedBase -= 1000 * 3600 * 24));
+      //   weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
+      //
+      //   // 折线图数据
+      //   weekMaxData.push(maxData);
+      //   var distance = Math.round(Math.random() * 11000 + 500);
+      //   weekLineData.push(distance);
+      // }
+      // const dateNum = [];
+      // for (let i = 0; i < this.weekData.length; i++) {
+      //   dateNum[i] = this.weekData[i].evconsume;
+      // }
 
-        // 折线图数据
-        weekMaxData.push(maxData);
-        var distance = Math.round(Math.random() * 11000 + 500);
-        weekLineData.push(distance);
-      }
-      const dateNum = [];
-      for (let i = 0; i < this.weekData.length; i++) {
-        dateNum[i] = this.weekData[i].evconsume;
+      const hourArray = [];
+      const gasArray = [];
+      let latestDate = null;
+      let data = this.latest24HourData;
+      for (let i = 0; i < data.length; i++) {
+        if (i == 0) {
+          latestDate = data[i].pullDate.toString().substr(5, 5);
+        } else if (latestDate == data[i].pullDate.toString().substr(5, 5)) {
+          hourArray.push(data[i].pullDate.toString().substr(14, 5));
+          gasArray.push(data[i].gasUsed);
+        }
       }
+      hourArray.reverse();
+      gasArray.reverse();
+
       let option = {
         tooltip: {
           trigger: "item"
@@ -359,7 +391,7 @@ export default {
           right: 80,
         },
         xAxis: {
-          data: ['08:00' ,'11:00' ,'14:00' ,'17:00' ,'20:00' ,'23:00' ,'02:00' ,'05:00']
+          data: hourArray
           // data: weekCategory
         },
         yAxis: {
@@ -372,7 +404,7 @@ export default {
               show: true,
               position: 'top'
             },
-            data: [99, 180, 200, 310, 459, 601, 800 ,933],
+            data: gasArray,
             // data:dateNum,
             type: 'line',
             smooth: true,

ui/src/views/monitor/elec/echart/bottom/bottomRightChart2.vue

@@ -13,6 +13,7 @@ import echartMixins from "@/utils/resizeMixins";
 import echarts from "@/api/cpms/echarts.min";
 
 export default {
+  props: ['latest24HourData'],
   data() {
     return {
       chart:null,
@@ -38,6 +39,19 @@ export default {
       // let lineData = [
       //   820, 932, 901, 934, 1290, 1330, 1320
       // ];
+
+      const hourArray = [];
+      const gasArray = [];
+      let data = this.latest24HourData;
+      for (let i = 0; i < data.length; i++) {
+        if (i % 3 == 0) {
+          hourArray.push(data[i].pullDate.toString().substr(14, 5));
+          gasArray.push(data[i].gasRealTime);
+        }
+      }
+      hourArray.reverse();
+      gasArray.reverse();
+
       let option={
         legend:{
           orient:'horizontal',
@@ -64,16 +78,7 @@ export default {
           },
           boundaryGap: false,
           type: 'category',
-          data: [
-            '00:00-03:00',
-            '03:00-06:00',
-            '06:00-09:00',
-            '09:00-12:00',
-            '12:00-15:00',
-            '15:00-18:00',
-            '18:00-21:00',
-            '21:00-00:00'
-          ]
+          data: hourArray
         },
         yAxis: {
           type: 'value',
@@ -87,7 +92,7 @@ export default {
         },
         series: [
           {
-            data: [500, 680, 733, 470, 1290, 980, 1320,1580],
+            data: gasArray,
             type: 'line',
             smooth: 0.5,
             symbolSize: 10,
@@ -141,6 +146,17 @@ export default {
       // let lineData = [
       //   820, 932, 901, 934, 1290, 1330, 1320
       // ];
+      const hourArray = [];
+      const gasArray = [];
+      let data = this.latest24HourData;
+      for (let i = 0; i < data.length; i++) {
+        if (i % 3 == 0) {
+          hourArray.push(data[i].pullDate.toString().substr(14, 5));
+          gasArray.push(data[i].gasRealTime);
+        }
+      }
+      hourArray.reverse();
+      gasArray.reverse();
       let option={
         legend:{
           orient:'horizontal',
@@ -160,16 +176,7 @@ export default {
             }
           },
           type: 'category',
-          data: [
-            '00:00-03:00',
-            '03:00-06:00',
-            '06:00-09:00',
-            '09:00-12:00',
-            '12:00-15:00',
-            '15:00-18:00',
-            '18:00-21:00',
-            '21:00-00:00'
-          ]
+          data: hourArray
         },
         yAxis: {
           type: 'value',
@@ -181,7 +188,7 @@ export default {
         },
         series: [
           {
-            data: [500, 680, 733, 470, 1290, 980, 1320,1580],
+            data: gasArray,
             type: 'line',
             smooth: 0.5,
             symbolSize: 10,

ui/src/views/monitor/elec/elecindex.vue

@@ -70,7 +70,7 @@
           </div>
           <!-- 中间 -->
           <div>
-            <center :dashboardelecdata="dashboardelecdata"/>
+            <center :dashboardelecdata="dashboardelecdata" :latest24HourData="latest24HourData" />
           </div>
           <!-- 中间 -->
           <div>
@@ -90,7 +90,7 @@
           </dv-border-box-13>
           <div class="bototm-box1">
             <dv-border-box-12>
-              <bottom-right :weekData="weekData" :dashboardelecdata="dashboardelecdata"/>
+              <bottom-right :weekData="weekData" :dashboardelecdata="dashboardelecdata":latest24HourData="latest24HourData" />
             </dv-border-box-12>
             <div class="bototm-box2">
               <dv-border-box-12>
@@ -119,7 +119,7 @@
                     </div>
                   </div>
                   <div>
-                    <bottom-right2 />
+                    <bottom-right2 :latest24HourData="latest24HourData" />
                   </div>
                 </div>
               </dv-border-box-12>
@@ -166,6 +166,7 @@ import {selectLast,selectMonth,selecctfiftyday} from "@/api/aspen/dashboarddayel
 import {selectWeek} from "@/api/aspen/dashboarddayeleceight";
 import {getRealtimeByMaxDate} from "@/api/aspen/realtime.js";
 import {listDayLatest7, listDayLatest30} from "@/api/aspen/day.js";
+import {listHourLatest24} from "@/api/aspen/hour.js";
 export default {
   data() {
     return {
@@ -182,6 +183,8 @@ export default {
       bgCol0:"#0a84ff",
       wh:"3.25rem",
       tAlign:"left",
+      // 最近24小时的数据
+      latest24HourData: [],
       // 最近7天的数据
       latest7DayData: [],
       // 最近30天的数据
@@ -375,6 +378,8 @@ export default {
     this.getLatest7DayData();
     // 抓取最近30天的数据
     this.getLatest30DayData();
+    // 抓取最近24小时的数据
+    this.getLatest24HourData();
 
     // this.getList1();
     // this.getMonthList1();
@@ -412,6 +417,16 @@ export default {
     // }, 1000 * 10 * 6 * 60 * 6)
   },
   methods: {
+    /** 抓取最近24小时的数据 */
+    getLatest24HourData() {
+      listHourLatest24().then(response => {
+        // 最近24小时的数据
+        let data = response.rows;
+        for (let i = 0; i < data.length; i++) {
+          this.latest24HourData.push(data[i]);
+        }
+      });
+    },
     /** 抓取最近30天的数据 */
     getLatest30DayData() {
       listDayLatest30().then(response => {