单站监控菜单栏

src/views/ems/dzjk/home/index.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-row :gutter="32" style="background:#fff;">
+      <el-col :xs="24" :sm="24" :lg="10">
+        <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+          <div slot="header">
+            <span class="card-title">数据概览</span>
+          </div>
+          <div style="height: 310px" >
+            <el-row :gutter="20">
+              <el-col :span="12" v-for="(item,index) in sjglData" :key="index+'sjglData'" class="sjgl-data">
+                  <div class="sjgl-title">{{item.title}}</div>
+                  <div class="sjgl-value">{{item.value}}</div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :sm="24" :lg="14">
+        <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+          <div slot="header">
+            <span class="card-title">实时告警</span>
+            <el-button style="float: right; padding: 3px 0" type="text" size="small">通讯状态：<span style="color:red">超时</span></el-button>
+          </div>
+          <div class="ssgj-container">
+            <el-table
+              :data="tableData"
+              height="100%"
+              stripe
+              style="width: 100%">
+              <el-table-column
+                prop="name"
+                label="名称">
+              </el-table-column>
+              <el-table-column
+                prop="status"
+                label="状态"
+                class-name="warning-status"
+                label-class-name="table-head">
+              </el-table-column>
+              <el-table-column
+                prop="value"
+                label="告警内容">
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <nllz-chart/>
+  </div>
+</template>
+
+<script>
+import NllzChart from "./NllzChart.vue";
+export default {
+  components: {NllzChart},
+  data() {
+    return {
+      // todo 没有数据时 显示-？
+      sjglData:[{
+        title:'今日充电量（MWh）',
+        value:'1234'
+      },{
+        title:'今日放电量（MWh）',
+        value:'1234'
+      },{
+        title:'总充电量（MWh）',
+        value:'1234'
+      },{
+        title:'总放电量（MWh）',
+        value:'1234'
+      }],
+      // todo 表格里的不同状态可能需要显示不同颜色 确定表格内容
+      tableData:[{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'},{name:'1',status:'中断',value:'这个一个内容'}]
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+//数据概览
+  .sjgl-data{
+    text-align: center;
+    margin-top:20px;
+    .sjgl-title{
+      color: #666666;
+      line-height: 14px;
+      padding-top: 18px;
+    }
+    .sjgl-value{
+      color: rgba(51,51,51,1);
+      font-size: 26px;
+      line-height: 26px;
+      font-weight: 500;
+      margin-top: 14px;
+    }
+  }
+  //实时告警
+  .ssgj-container{
+    padding:20px;
+    height: 310px;
+    box-sizing: border-box;
+    ::v-deep{
+      .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
+        background:#FFF2CB ;
+        border-bottom: none;
+      }
+      .warning-status{
+        color:red;
+      }
+      .table-head{
+        color:#515a6e;
+      }
+    }
+  }
+</style>
+