大屏项目初步修改

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 || '0'}} 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 || '0'}} 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 || '0'}} 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 || '0'}} kWh/m²·天</div>
             </div>
           </div>
         </div>
@@ -401,7 +401,10 @@ import AMapLoader from "@amap/amap-jsapi-loader";
         </div>
       </div>
       <div class="bottomLayerTwo">
+        <div class="title_row">
         <div class="secondLeftLayer_title"><p>报警信息轮播</p></div>
+        <div class="moreInfo" @click="handleShowMore('1')">更多》</div>
+        </div>
         <vue3ScrollSeamless class="scroll-wrap border text-color" :classOptions="classOptions" :dataList="alarmDataList">
             <el-row v-for="(item, i) of alarmDataList" :key="i">
               <el-col :span="24" class="seamlessCol">
@@ -414,13 +417,13 @@ import AMapLoader from "@amap/amap-jsapi-loader";
     <div v-show="mapLevel === 3">
       <div class="thirdLeftLayer">
         <div class="thirdLeftLayer_one">
-
+          <div class="secondLeftLayer_title"><p>换热站监控</p></div>
         </div>
         <div class="thirdLeftLayer_one">
-
+          <div class="secondLeftLayer_title"><p>电气柜监视</p></div>
         </div>
         <div class="thirdLeftLayer_one">
-
+          <div class="secondLeftLayer_title"><p>循环泵听诊</p></div>
         </div>
       </div>
       <div class="thirdRightLayer">
@@ -429,31 +432,34 @@ import AMapLoader from "@amap/amap-jsapi-loader";
           <div class="secondLeftLayer_fourContent">
             <div class="fourRow">
               <div class="fourRow_label">热耗</div>
-              <div class="fourRow_value">{{thirdDayEnergyForm.heat}} w/m²</div>
+              <div class="fourRow_value">{{thirdDayEnergyForm.heat || '0'}} w/m²</div>
             </div>
             <div class="fourRow">
               <div class="fourRow_label">度日热耗</div>
-              <div class="fourRow_value">{{thirdDayEnergyForm.dayheat}} w/(m².°c)</div>
+              <div class="fourRow_value">{{thirdDayEnergyForm.dayheat || '0'}} w/(m².°c)</div>
             </div>
             <div class="fourRow">
               <div class="fourRow_label">水耗</div>
-              <div class="fourRow_value">{{thirdDayEnergyForm.water}} kg/m²·天</div>
+              <div class="fourRow_value">{{thirdDayEnergyForm.water || '0'}} kg/m²·天</div>
             </div>
             <div class="fourRow">
               <div class="fourRow_label">电耗</div>
-              <div class="fourRow_value">{{thirdDayEnergyForm.elec}} kWh/m²·天</div>
+              <div class="fourRow_value">{{thirdDayEnergyForm.elec || '0'}} kWh/m²·天</div>
             </div>
           </div>
         </div>
         <div class="thirdLeftLayer_one">
-
+          <div class="secondLeftLayer_title"><p>管道光纤测漏温度曲线</p></div>
         </div>
         <div class="thirdLeftLayer_one">
-
+          <div class="secondLeftLayer_title"><p>灭火器仪表监视</p></div>
         </div>
       </div>
       <div class="bottomLayerTwo">
-        <div class="secondLeftLayer_title"><p>报警信息轮播</p></div>
+        <div class="title_row">
+          <div class="secondLeftLayer_title"><p>报警信息轮播</p></div>
+          <div class="moreInfo" @click="handleShowMore('2')">更多》</div>
+        </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">
@@ -463,6 +469,22 @@ import AMapLoader from "@amap/amap-jsapi-loader";
         </vue3ScrollSeamless>
       </div>
     </div>
+    <div class="alarmInfo" v-if="open">
+      <div class="alarmInfo_header">
+        <div class="alarmInfo_title">报警信息轮播</div>
+        <div class="alarmInfo_close" @click="open=false">X</div>
+      </div>
+      <div class="alarmInfo_content">
+        <el-table :data="alarmList" class="alarmTable">
+          <el-table-column type="index" label="序号" align="center" width="100"/>
+          <el-table-column prop="msg" label="报警信息" align="center" width="650">
+            <template #default="scope">
+              <span style="cursor: pointer" @click="handleToDetail">{{scope.row.msg}}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
     <div id="container"></div>
 
     <div class="videoBlock" v-show="voideShow">
@@ -532,6 +554,9 @@ export default defineComponent({
   },
   data() {
     return {
+      open: false,
+      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
+      currentIndex: 0,
       heatSourceList: [], // 热源趋势echarts展示
       pressureList: [], //压力列表
       flowList: [], //流量列表
@@ -558,6 +583,7 @@ export default defineComponent({
       RankType: 1, // 能耗类型（1：热耗，2：水耗，3:电耗）
       heatType: 1, // 能耗类型（1：温度，2：压力，3:流量）
       rankList: [],
+      alarmList: [],
       alarmDataList: [],
       alarmDataTwoList: [],
       waterRankList: [],
@@ -638,6 +664,17 @@ export default defineComponent({
     };
   },
   methods: {
+    handleToDetail() {
+      this.$router.push("/Alarm")
+    },
+    handleShowMore(type) {
+      if(type === '1') {
+        this.alarmList = this.alarmDataList
+      }else {
+        this.alarmList = this.alarmDataTwoList
+      }
+      this.open = true
+    },
     // 热源趋势曲线类型切换
     choseHeatSource(item) {
       this.heatType = item.value
@@ -2009,7 +2046,43 @@ export default defineComponent({
   },
 });
 </script>
-<style scoped>
+<style scoped lang="scss">
+.alarmInfo{
+  width: 800px;
+  maxheight: 550px;
+  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%);
+  color: white;
+  position: absolute;
+  z-index: 9;
+  left: 30%;
+  top: 17%;
+}
+.alarmTable{
+  margin-bottom: 20px;
+  width: 750px;
+  max-height: 450px;
+  overflow: auto;
+  ::v-deep .el-table__cell{
+    color: white;
+    background: rgba(29, 70, 128, 0.8)!important;
+  }
+}
+.alarmInfo_header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+  font-size: 17px;
+}
+.alarmInfo_content{
+  display: flex;
+  justify-content: center;
+}
+.alarmInfo_close{
+  cursor: pointer;
+}
 .scroll-wrap {
   width: 100%;
   height: 300px;
@@ -2173,6 +2246,16 @@ export default defineComponent({
   width: 70%;
   font-size: 27px;
 }
+.title_row{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.moreInfo{
+  cursor: pointer;
+  color: white;
+
+}
 .secondLeftLayer_title{
   color: white;
   font-size: 17px;