中建四局(双碳管理):报警记录模块页面以及数据连接

src/views/projectAdmin/zjsj/carbon/rightBottom.vue

@@ -1,14 +1,87 @@
 <template>
   <Card title="报警记录">
-    报警记录
+    <div class="contentBox">
+        <vue-scroll>
+          <table class="greenTable">
+            <thead>
+              <tr>
+                <th>报警设备</th>
+                <th>报警时间</th>
+                <th>报警类型</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr style="font-size: 14px;" v-for="(item, index) in alarmList" :key="index">
+                <td>{{ item.deviceName }}</td>
+                <td>{{ item.tempAlarmTime }}</td>
+                <td>{{ item.alarmTypeName }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="placeholderBox placeholderBox2" v-if="alarmList.length == 0">
+            <img src="@/assets/images/noData3.png" alt srcset />
+            <p>
+              <!-- 暂无数据 -->
+              {{$t('message.dataBoard.nodata')}}
+            </p>
+          </div>
+        </vue-scroll>
+      </div>
   </Card>
 </template>
 
 <script>
 import Card from '../components/Card.vue'
+import { selectNewEnvironmentAlarmListApi } from '@/assets/js/api/environmentManage'
 export default {
-  components: { Card }
+  components: { Card },
+   data() {
+    return {
+      alarmList: []
+    }
+  },
+  created() {
+    this.getAlarmList()
+  },
+  methods: {
+    //获取报警列表
+    getAlarmList() {
+      let data = {
+        projectSn: this.$store.state.projectSn
+      }
+      selectNewEnvironmentAlarmListApi(data).then(res => {
+        console.log(res)
+        if (res.code == 200) {
+          // this.alarmList = res.result
+        }
+      })
+    }
+  }
 }
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.contentBox {
+  box-sizing: border-box;
+  padding-top: 20px;
+  width: 100%;
+  height: 100%;  
+ .greenTable{
+        font-size: 13px;
+        width: 100%;
+        border-spacing: 0px;
+        margin-bottom: 10px;
+        th{
+            color: #6adce8;
+            border-bottom: 1px solid rgba(31, 68, 86, 0.3);
+            padding-bottom: 5px;
+            font-weight: normal;
+        }
+        td{
+            color: rgba(255, 255, 255, 0.6);
+            text-align: center;
+            line-height: 20px;
+        }
+    }
+}
+</style>