第三级大屏传参修改

src/api/screenDisplay.js

@@ -44,6 +44,20 @@ export const getForecast = params => {
   })
 }
 
+//获取港益换热站实时能耗数据
+export const getGYTransferRealData = params => {
+  return http.post(`/api/gis/GYTransferRealData`, params).then(res => res).catch(function (error) {
+    console.log(error);
+  })
+}
+
+//获取港益换热站报警数据
+export const getGYTransferAlarmData = params => {
+  return http.post(`/api/gis/GYTransferAlarmData`, params).then(res => res).catch(function (error) {
+    console.log(error);
+  })
+}
+
 
 //获取当日实时能耗
 export const getGYSupplyRealData = params => {

src/components/screenDisplay.vue

@@ -355,19 +355,19 @@ import AMapLoader from "@amap/amap-jsapi-loader";
           <div class="secondLeftLayer_fourContent">
             <div class="fourRow">
               <div class="fourRow_label">热耗</div>
-              <div class="fourRow_value">{{dayEnergyForm.heat}} w/m²</div>
+              <div class="fourRow_value">{{dayEnergyForm.heat || '-'}} w/m²</div>
             </div>
             <div class="fourRow">
               <div class="fourRow_label">度日热耗</div>
-              <div class="fourRow_value">{{dayEnergyForm.dayheat}} w/(m².°c)</div>
+              <div class="fourRow_value">{{dayEnergyForm.dayheat || '-'}} w/(m².°c)</div>
             </div>
             <div class="fourRow">
               <div class="fourRow_label">水耗</div>
-              <div class="fourRow_value">{{dayEnergyForm.water}} kg/m²·天</div>
+              <div class="fourRow_value">{{dayEnergyForm.water || '-'}} kg/m²·天</div>
             </div>
             <div class="fourRow">
               <div class="fourRow_label">电耗</div>
-              <div class="fourRow_value">{{dayEnergyForm.elec}} kWh/m²·天</div>
+              <div class="fourRow_value">{{dayEnergyForm.elec || '-'}} kWh/m²·天</div>
             </div>
           </div>
         </div>
@@ -411,6 +411,58 @@ import AMapLoader from "@amap/amap-jsapi-loader";
         </vue3ScrollSeamless>
       </div>
     </div>
+    <div v-show="mapLevel === 3">
+      <div class="thirdLeftLayer">
+        <div class="thirdLeftLayer_one">
+
+        </div>
+        <div class="thirdLeftLayer_one">
+
+        </div>
+        <div class="thirdLeftLayer_one">
+
+        </div>
+      </div>
+      <div class="thirdRightLayer">
+        <div class="thirdLeftLayer_one">
+          <div class="secondLeftLayer_title"><p>当日实时能耗数据</p></div>
+          <div class="secondLeftLayer_fourContent">
+            <div class="fourRow">
+              <div class="fourRow_label">热耗</div>
+              <div class="fourRow_value">{{thirdDayEnergyForm.heat}} w/m²</div>
+            </div>
+            <div class="fourRow">
+              <div class="fourRow_label">度日热耗</div>
+              <div class="fourRow_value">{{thirdDayEnergyForm.dayheat}} w/(m².°c)</div>
+            </div>
+            <div class="fourRow">
+              <div class="fourRow_label">水耗</div>
+              <div class="fourRow_value">{{thirdDayEnergyForm.water}} kg/m²·天</div>
+            </div>
+            <div class="fourRow">
+              <div class="fourRow_label">电耗</div>
+              <div class="fourRow_value">{{thirdDayEnergyForm.elec}} kWh/m²·天</div>
+            </div>
+          </div>
+        </div>
+        <div class="thirdLeftLayer_one">
+
+        </div>
+        <div class="thirdLeftLayer_one">
+
+        </div>
+      </div>
+      <div class="bottomLayerTwo">
+        <div class="secondLeftLayer_title"><p>报警信息轮播</p></div>
+        <vue3ScrollSeamless class="scroll-wrap border text-color" :classOptions="classOptions" :dataList="alarmDataTwoList">
+          <el-row v-for="(item, i) of alarmDataTwoList" :key="i">
+            <el-col :span="24" class="seamlessCol">
+              <div style="color: white">{{ item.msg }}</div>
+            </el-col>
+          </el-row>
+        </vue3ScrollSeamless>
+      </div>
+    </div>
     <div id="container"></div>
 
     <div class="videoBlock" v-show="voideShow">
@@ -448,7 +500,11 @@ import {
   postAreaList,
   postGYSupplyWater,
   postTransferOpenValue,
-  postGYSupplyHeatUCDeviation, getGYSupplyWaterTrend, GetGYHeatSourceTrend,
+  postGYSupplyHeatUCDeviation,
+  getGYSupplyWaterTrend,
+  GetGYHeatSourceTrend,
+  getGYTransferRealData,
+  getGYTransferAlarmData,
 } from "../api/screenDisplay";
 import moment from 'moment'
 import {defineComponent} from "vue";
@@ -461,6 +517,7 @@ export default defineComponent({
       if(newV === 1) {
 
       }else if(newV === 2) {
+        console.log('mapBack',this.mapBack)
         this.getHeatSourceTrend(); //获取热源趋势曲线
         this.handleGetGYSupplyWaterTrend(); // 获取一次侧补水曲线
         this.getDayEnergyConsumption(); // 获取当日实时能耗
@@ -468,7 +525,7 @@ export default defineComponent({
         this.handleGetGYSupplyAlarmData(); // 获取港益服务中心报警数据
         this.handleGetGISRankWaterUC(); // 获取二次侧机组补水量排名
 
-      }else {
+      }else if(newV === 3) {
 
       }
     },
@@ -502,8 +559,10 @@ export default defineComponent({
       heatType: 1, // 能耗类型（1：温度，2：压力，3:流量）
       rankList: [],
       alarmDataList: [],
+      alarmDataTwoList: [],
       waterRankList: [],
       dayEnergyForm: {},
+      thirdDayEnergyForm: {},
       tokenCode: null,
       //map: null,
       temperature: [], //室外温度
@@ -547,6 +606,7 @@ export default defineComponent({
       rightLayer2Nodata: true,
       rightLayer4Nodata: true,
       mapBack: null,
+      markerThree: {},
       mapBackPostion: [{ lan: "38.854713", lon: "117.481685" }],
       fullscreenLoading: false,
     };
@@ -669,7 +729,8 @@ export default defineComponent({
       area,
       markerId,
       index,
-      transferList
+      transferList,
+      stationId
     ) {
       let _this = this;
       var position = new AMap.LngLat(longitude, latitude);
@@ -774,6 +835,7 @@ export default defineComponent({
         });
         popupButtons2.addEventListener("click", function (event) {
           if (markerId.includes("marker1")) {
+            console.log('1111111111111111111111111111111111111111111111111111111111111',centerId)
             _this.mapBack = {
               map: map,
               centerId: centerId,
@@ -782,8 +844,18 @@ export default defineComponent({
             _this.postSupplylist(map, centerId, index, markerId);
           }
           if (markerId.includes("marker2")) {
+            console.log('222222222222222222222222222222222222222222222222222222222222222222',centerId)
             _this.postTransferList(map, centerId, index, centerId);
           }
+          if (markerId.includes("marker3")) {
+            console.log('3333333333333333333333333333333333333333333333333333333333333333',stationId)
+            _this.markerThree = {
+              // map: map,
+              stationId: stationId,
+              // index: index,
+            };
+            _this.thirdLevelPageFun() // 第三级页面方法
+          }
         });
       }, 500);
     },
@@ -984,7 +1056,8 @@ export default defineComponent({
             element.markerId = "marker3_" + index;
             element.openF = false;
           });
-
+          this.markerThree.stationId = _this.transferList[0].stationId
+          _this.thirdLevelPageFun() // 第三级页面方法
           if (!_this.supplylistList[index].openF) {
             _this.transferList.forEach((element, index) => {
               if (!element.openF) {
@@ -1011,7 +1084,8 @@ export default defineComponent({
                   element.area,
                   element.markerId,
                   index,
-                  element.transferList
+                  element.transferList,
+                  element.stationId
                 );
               }
             });
@@ -1119,6 +1193,29 @@ export default defineComponent({
         }
       })
     },
+    // 第三级页面方法
+    thirdLevelPageFun() {
+      this.handleGetGYTransferRealData() // 获取港益换热站实时能耗数据
+      this.handleGetGYTransferAlarmData()  // 获取港益换热站报警数据
+    },
+    // 获取港益换热站实时能耗数据
+    handleGetGYTransferRealData() {
+      const params = {
+        id: this.markerThree.stationId
+      }
+      getGYTransferRealData(params).then(res => {
+        this.thirdDayEnergyForm = res.data[0]
+      })
+    },
+    // 获取港益换热站报警数据
+    handleGetGYTransferAlarmData(){
+      const params = {
+        id: this.markerThree.stationId
+      }
+      getGYTransferAlarmData(params).then(res => {
+        this.alarmDataTwoList = res.data
+      })
+    },
     //获取当日实时能耗
     getDayEnergyConsumption() {
       const params = {
@@ -1991,6 +2088,25 @@ export default defineComponent({
   bottom: 5px;
   /*border: rgba(129, 210, 230, 0.5) solid 1px;*/
 }
+.gis_content .thirdLeftLayer {
+  position: absolute;
+  width: 21%;
+  height: 100%;
+  /* background: linear-gradient(to bottom, rgba(29, 70, 128, 0.5), rgba(29, 70, 128, 0.9), rgba(29, 70, 128, 0.5)); */
+  /*background: linear-gradient(318deg,#1d4680 0%, #0d174c);*/
+  z-index: 9;
+  top: 5px;
+  left: 5px;
+  bottom: 5px;
+  /*border: rgba(129, 210, 230, 0.5) solid 1px;*/
+}
+.thirdLeftLayer_one{
+  margin-bottom: 11px;
+  height: 32%;
+  border: rgba(129, 210, 230, 0.5) solid 1px;
+  padding: 0 0 0 10px;
+  background: linear-gradient(318deg, rgba(29, 70, 128, 0.8) 0%, rgba(13, 23, 76, 0.8) 100%);
+}
 .secondLeftLayer_one{
   height: 26%;
   border: rgba(129, 210, 230, 0.5) solid 1px;
@@ -2133,6 +2249,17 @@ export default defineComponent({
   /* background: linear-gradient(to bottom, rgba(29, 70, 128, 0.5), rgba(29, 70, 128, 0.9), rgba(29, 70, 128, 0.5)); */
   z-index: 9;
 }
+.gis_content .thirdRightLayer {
+  position: absolute;
+  width: 21%;
+  height: 100%;
+  /* height: 1068px; */
+  top: 9px;
+  right: 5px;
+  bottom: 5px;
+  /* background: linear-gradient(to bottom, rgba(29, 70, 128, 0.5), rgba(29, 70, 128, 0.9), rgba(29, 70, 128, 0.5)); */
+  z-index: 9;
+}
 .gis_content .rightLayer2 {
   width: 95%;
   height: 100%;