二级大屏页面完善

src/api/screenDisplay.js

@@ -70,6 +70,12 @@ export const GetGISRankWaterUC = params => {
     console.log(error);
   })
 }
+//24小时热源温度压力流量趋势曲线
+export const GetGYHeatSourceTrend = params => {
+  return http.post(`/api/gis/GetGYHeatSourceTrend`, params).then(res => res).catch(function (error) {
+    console.log(error);
+  })
+}
 //一次侧机组补水曲线
 export const getGYSupplyWaterTrend = params => {
   return http.post(`/api/gis/GYSupplyWaterTrend`, params).then(res => res).catch(function (error) {

src/components/screenDisplay.vue

@@ -320,7 +320,19 @@ import AMapLoader from "@amap/amap-jsapi-loader";
     <div v-show="mapLevel === 2">
       <div class="secondLeftLayer">
         <div class="secondLeftLayer_one">
-          <div class="secondLeftLayer_title"><p>热源趋势曲线</p></div>
+          <div style="display: flex;justify-content: space-between;padding: 10px">
+            <div class="secondLeftLayer_title"><p>热源趋势曲线</p></div>
+            <div style="display: flex;align-items: center">
+              <ul v-for="(item,index) in heatSourceBtnList" :key="index">
+                <li
+                    :class="[item.value === heatType ? 'activeBtn' : 'normalBtn']"
+                    @click="choseHeatSource(item)"
+                >
+                  {{item.name}}
+                </li>
+              </ul>
+            </div>
+          </div>
           <div class="secondLeftLayer1" id="secondLeftLayer1"></div>
         </div>
         <div class="secondLeftLayer_two">
@@ -436,7 +448,7 @@ import {
   postAreaList,
   postGYSupplyWater,
   postTransferOpenValue,
-  postGYSupplyHeatUCDeviation, getGYSupplyWaterTrend,
+  postGYSupplyHeatUCDeviation, getGYSupplyWaterTrend, GetGYHeatSourceTrend,
 } from "../api/screenDisplay";
 import moment from 'moment'
 import {defineComponent} from "vue";
@@ -465,6 +477,14 @@ export default defineComponent({
   },
   data() {
     return {
+      heatSourceList: [], // 热源趋势echarts展示
+      pressureList: [], //压力列表
+      flowList: [], //流量列表
+      temperatureList: [], //温度列表
+      trendList: [],
+      trendX: ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时'],
+      trendY: [],
+      heatTrendY: [],
       enterpriseId: '',
       classOptions: {
         step: 0.5,//滚动速度值越大越快，但是值太小会卡顿
@@ -475,7 +495,13 @@ export default defineComponent({
         {name: '水耗', value: 2},
         {name: '电耗', value: 3},
       ],
-      RankType: 1, // 能耗类型（1：热耗，2：水耗，3电耗）
+      heatSourceBtnList: [
+        {name: '温度', value: 1},
+        {name: '压力', value: 2},
+        {name: '流量', value: 3},
+      ],
+      RankType: 1, // 能耗类型（1：热耗，2：水耗，3:电耗）
+      heatType: 1, // 能耗类型（1：温度，2：压力，3:流量）
       rankList: [],
       alarmDataList: [],
       waterRankList: [],
@@ -554,6 +580,11 @@ export default defineComponent({
     };
   },
   methods: {
+    // 热源趋势曲线类型切换
+    choseHeatSource(item) {
+      this.heatType = item.value
+      this.getHeatSourceTrend(); //获取热源趋势曲线
+    },
     // 机组排名类型切换
     choseRankType(item) {
       this.RankType = item.value
@@ -1021,9 +1052,38 @@ export default defineComponent({
     },
     // 热源趋势曲线
     getHeatSourceTrend() {
-      if (document.querySelector("#secondLeftLayer1")) {
-        this.echartInitHeatSource(); // 热源趋势echarts
+      const nowDate = moment(new Date()).format('YYYY-MM-DD')
+      const StartTime = nowDate + ' 00:00:00'
+      const EndTime = nowDate + ' 23:59:59'
+      const params = {
+        StartTime: '2024-08-26 00:00:00',
+        EndTime: '2024-08-27 00:00:00',
+        CenterId: '7E0263D8-61BC-46F9-AA4F-52394687F8CD',
       }
+      GetGYHeatSourceTrend(params).then(res => {
+        this.temperatureList = res.data.temperatureList //温度列表
+        this.pressureList = res.data.pressureList //压力列表
+        this.flowList = res.data.flowList  //流量列表
+        if(this.heatType === 1) {
+          this.heatSourceList = this.temperatureList
+        }else if(this.heatType === 2){
+          this.heatSourceList = this.pressureList
+        }else {
+          this.heatSourceList = this.flowList
+        }
+
+        this.heatTrendY = []
+        for (let i = 0; i < this.heatSourceList.length; i++) {
+          const name = this.heatSourceList[i][0].supplyName
+          const data = this.heatSourceList[i].map(item => item.hourRecord)
+          const yItem = {name: name, data:data}
+          this.heatTrendY.push(yItem)
+        }
+        console.log('this.heatTrendY',this.heatTrendY)
+        if (document.querySelector("#secondLeftLayer1")) {
+          this.echartInitHeatSource(); // 热源趋势echarts
+        }
+      })
     },
     // 获取组织结构
     handleGetOrg() {
@@ -1034,14 +1094,28 @@ export default defineComponent({
     },
     // 一次侧补水量曲线
     handleGetGYSupplyWaterTrend() {
+      const nowDate = moment(new Date()).format('YYYY-MM-DD')
+      const StartTime = nowDate + ' 00:00:00'
+      const EndTime = nowDate + ' 23:59:59'
       const params = {
-        StartTime: '2024-08-26 00:00:00',
-        EndTime: '2024-08-26 17:00:00',
+        StartTime: StartTime,
+        EndTime: EndTime,
         CenterId: '7E0263D8-61BC-46F9-AA4F-52394687F8CD',
       }
       getGYSupplyWaterTrend(params).then(res => {
-        if (document.querySelector("#secondLeftLayer2")) {
-          this.echartInitgeMoisturizing(); // 热源趋势echarts
+        if(res.data && res.data.length > 0) {
+          this.trendList = res.data
+          // this.trendX = this.trendList[0].map(item => item.gatherTime)
+          this.trendY = []
+          for (let i = 0; i < this.trendList.length; i++) {
+            const name = this.trendList[i][0].supplyName
+            const data = this.trendList[i].map(item => item.waterRecord)
+            const yItem = {name: name, data:data}
+            this.trendY.push(yItem)
+          }
+          if (document.querySelector("#secondLeftLayer2")) {
+            this.echartInitgeMoisturizing(); // 热源趋势echarts
+          }
         }
       })
     },
@@ -1076,7 +1150,6 @@ export default defineComponent({
     // 二次侧机组补水量排名
     handleGetGISRankWaterUC() {
       const nowDate = moment(new Date()).format('YYYY-MM-DD')
-      console.log('nowDate',nowDate)
       const StartTime = nowDate + ' 00:00:00'
       const EndTime = nowDate + ' 23:59:59'
       const params = {
@@ -1322,9 +1395,12 @@ export default defineComponent({
       var option;
 
       option = {
+        tooltip: {
+          trigger: "axis",
+        },
         xAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: this.trendX,
           axisLabel: {
             color: "#ffffff",
             fontSize: "10px",
@@ -1357,12 +1433,17 @@ export default defineComponent({
           top: 10,
           bottom: 35,
         },
-        series: [
-          {
-            data: [150, 230, 224, 218, 135, 147, 260],
-            type: 'line'
-          }
-        ]
+        // series: [
+        //   {
+        //     data: this.trendY,
+        //     type: 'line'
+        //   }
+        // ]
+        series: this.trendY.map(series => ({
+          name: series.name,
+          type: 'line',
+          data: series.data
+        }))
       };
 
       option && myChart.setOption(option);
@@ -1374,9 +1455,12 @@ export default defineComponent({
       var option;
 
       option = {
+        tooltip: {
+          trigger: "axis",
+        },
         xAxis: {
           type: 'category',
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: this.trendX,
           axisLabel: {
             color: "#ffffff",
             fontSize: "10px",
@@ -1409,12 +1493,17 @@ export default defineComponent({
           top: 10,
           bottom: 35,
         },
-        series: [
-          {
-            data: [150, 230, 224, 218, 135, 147, 260],
-            type: 'line'
-          }
-        ]
+        series: this.heatTrendY.map(series => ({
+          name: series.name,
+          type: 'line',
+          data: series.data
+        }))
+        // series: [
+        //   {
+        //     data: [150, 230, 224, 218, 135, 147, 260],
+        //     type: 'line'
+        //   }
+        // ]
       };
 
       option && myChart.setOption(option);

src/views/SchedulingPage/AnnualParamPage.vue

@@ -19,7 +19,7 @@ const tableHeaderClass = data => {  // 表头样式
 const tableBodyClass = data => {   // 表体样式
   return 'table-body-class'
 }
-const searchKey = ref('2024') // 查询参数
+const searchKey = ref('') // 查询参数
 const reviseWindowOpen = ref(false)
 const addWindowOpen = ref(false)
 const reviseForm = ref({})