diff --git a/psdc-ui/src/views/emonitor/db/index.vue b/psdc-ui/src/views/emonitor/db/index.vue
index 04cfbe5..264391c 100644
--- a/psdc-ui/src/views/emonitor/db/index.vue
+++ b/psdc-ui/src/views/emonitor/db/index.vue
@@ -1,6 +1,63 @@
 <template>
   <div class="app-container home">
-    <h1>电表</h1>
+    <div class="top">
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>当前功率</p>
+          <h2>0kW</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>日用电量</p>
+          <h2>11kWh</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>月用电量</p>
+          <h2>141kWh</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>累计用电量</p>
+          <h2>1641kWh</h2>
+        </div>
+      </div>
+    </div>
+    <div class="mid">
+      <div class="mid1">
+        <div class="mid1-1">
+          当前功率
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="mid2">
+        <div class="mid2-1">
+          当前功率总览
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="bottom1">
+        <div class="bottom1-1">
+          今日用电量总览
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,6 +68,70 @@
 </script>
 
 <style scoped lang="scss">
-
+p{
+  margin-bottom: 10px;
+}
+.top{
+  width: 100%;
+  height: 110px;
+  display: flex;
+  justify-content: space-between;
+}
+.card{
+  width: 24%;
+  height: 100%;
+  background-color: #2F3D8A;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.mid{
+  width: 100%;
+  height: 350px;
+  margin-top: 15px;
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: space-between;
+}
+.mid1{
+  width: 24%;
+  height: 100%;
+  background-color: #2F3D8A;
+}
+.mid1-1{
+  width: 100%;
+  height: 40px;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
+.mid2{
+  width: 74.67%;
+  height: 100%;
+  background-color: #2F3D8A;
+}
+.mid2-1{
+  width: 100%;
+  height: 40px;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
+.bottom{
+  width: 100%;
+  height: 350px;
+}
+.bottom1{
+  width: 100%;
+  height: 100%;
+  background-color: #2F3D8A;
+}
+.bottom1-1{
+  width: 100%;
+  height: 40px;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
 </style>
 
diff --git a/psdc-ui/src/views/emonitor/drgl/index.vue b/psdc-ui/src/views/emonitor/drgl/index.vue
index b0937e1..e3bb0e2 100644
--- a/psdc-ui/src/views/emonitor/drgl/index.vue
+++ b/psdc-ui/src/views/emonitor/drgl/index.vue
@@ -1,6 +1,76 @@
 <template>
   <div class="app-container home">
-    <h1>电热锅炉</h1>
+    <div class="top">
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>总用电量</p>
+          <h2>1641kWh</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>当前功率</p>
+          <h2>11kW</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+        <div style="display: flex; margin-bottom: 5px">
+          <p>进水温度:</p>
+          <h2>25℃</h2>
+        </div>
+        <div style="display: flex">
+          <p>出水温度:</p>
+          <h2>85℃</h2>
+        </div>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>运行状态</p>
+          <h2 style="color: #1ab394">开启</h2>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="bottom1">
+        <div class="bottom1-1">
+          日用电量
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          月用电量
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          当前功率
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          当前温度
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,6 +81,45 @@
 </script>
 
 <style scoped lang="scss">
+.top{
+  width: 100%;
+  height: 110px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+.card{
+  width: 24%;
+  height: 110px;
+  background-color: #2F3D8A;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
 
+.bottom{
+  width: 100%;
+  height: 615px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.bottom1{
+  width: 49.35%;
+  height: 300px;
+  background-color: #2F3D8A;
+  margin-bottom: 15px;
+}
+p{
+  margin-bottom: 10px;
+}
+.bottom1-1{
+  width: 100%;
+  height: 40px;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
 </style>
 
diff --git a/psdc-ui/src/views/emonitor/frdl/index.vue b/psdc-ui/src/views/emonitor/frdl/index.vue
index a3dc3a2..0426617 100644
--- a/psdc-ui/src/views/emonitor/frdl/index.vue
+++ b/psdc-ui/src/views/emonitor/frdl/index.vue
@@ -1,6 +1,72 @@
 <template>
   <div class="app-container home">
-    <h1>发热电缆</h1>
+    <div class="top">
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>总用电量</p>
+          <h2>1641kWh</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>当前功率</p>
+          <h2>11kW</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <div>
+            <p>当前温度</p>
+            <h2>25℃</h2>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>运行状态</p>
+          <h2 style="color: #1ab394">开启</h2>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="bottom1">
+        <div class="bottom1-1">
+          日用电量
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          月用电量
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          当前功率
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          当前温度
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,6 +77,45 @@
 </script>
 
 <style scoped lang="scss">
+.top{
+  width: 100%;
+  height: 110px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+.card{
+  width: 24%;
+  height: 110px;
+  background-color: #2F3D8A;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
 
+.bottom{
+  width: 100%;
+  height: 615px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.bottom1{
+  width: 49.35%;
+  height: 300px;
+  background-color: #2F3D8A;
+  margin-bottom: 15px;
+}
+p{
+  margin-bottom: 10px;
+}
+.bottom1-1{
+  width: 100%;
+  height: 40px;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
 </style>
 
diff --git a/psdc-ui/src/views/emonitor/kqyrb/index.vue b/psdc-ui/src/views/emonitor/kqyrb/index.vue
index cfe175e..c6794e2 100644
--- a/psdc-ui/src/views/emonitor/kqyrb/index.vue
+++ b/psdc-ui/src/views/emonitor/kqyrb/index.vue
@@ -1,6 +1,76 @@
 <template>
   <div class="app-container home">
-    <h1>空气源热泵</h1>
+    <div class="top">
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>总用电量</p>
+          <h2>1641kWh</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>当前功率</p>
+          <h2>11kW</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <div style="display: flex; margin-bottom: 5px">
+            <p>进水温度:</p>
+            <h2>25℃</h2>
+          </div>
+          <div style="display: flex">
+            <p>出水温度:</p>
+            <h2>85℃</h2>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>运行状态</p>
+          <h2 style="color: #1ab394">开启</h2>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="bottom1">
+        <div class="bottom1-1">
+          日用电量
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          月用电量
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          当前功率
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          当前温度
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,6 +81,45 @@
 </script>
 
 <style scoped lang="scss">
+.top{
+  width: 100%;
+  height: 110px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+.card{
+  width: 24%;
+  height: 110px;
+  background-color: #2F3D8A;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
 
+.bottom{
+  width: 100%;
+  height: 615px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.bottom1{
+  width: 49.35%;
+  height: 300px;
+  background-color: #2F3D8A;
+  margin-bottom: 15px;
+}
+p{
+  margin-bottom: 10px;
+}
+.bottom1-1{
+  width: 100%;
+  height: 40px;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
 </style>
 
diff --git a/psdc-ui/src/views/emonitor/wdcgq/index.vue b/psdc-ui/src/views/emonitor/wdcgq/index.vue
index 93eb00b..85fd7f6 100644
--- a/psdc-ui/src/views/emonitor/wdcgq/index.vue
+++ b/psdc-ui/src/views/emonitor/wdcgq/index.vue
@@ -1,6 +1,74 @@
 <template>
   <div class="app-container home">
-    <h1>温度传感器</h1>
+    <div class="top">
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>温度传感器1</p>
+          <h2>40℃</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>温度传感器2</p>
+          <h2>41℃</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>温度传感器3</p>
+          <h2>33℃</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>温度传感器4</p>
+          <h2>36℃</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>温度传感器5</p>
+          <h2>35℃</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>温度传感器6</p>
+          <h2>37℃</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>温度传感器7</p>
+          <h2>38℃</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>温度传感器8</p>
+          <h2>32℃</h2>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="bottom1">
+        <div class="bottom1-1">
+          实时温度总览
+        </div>
+        <div>
+         pic
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,6 +79,42 @@
 </script>
 
 <style scoped lang="scss">
+p{
+  margin-bottom: 10px;
+}
+.top{
+  width: 100%;
+  height: 235px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+.card{
+  width: 24%;
+  height: 110px;
+  background-color: #2F3D8A;
+  margin-bottom: 15px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
 
+.bottom{
+  width: 100%;
+  height: 350px;
+}
+.bottom1{
+  width: 100%;
+  height: 350px;
+  background-color: #2F3D8A;
+}
+.bottom1-1{
+  width: 100%;
+  height: 40px;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
 </style>
 
diff --git a/psdc-ui/src/views/emonitor/xrgl/index.vue b/psdc-ui/src/views/emonitor/xrgl/index.vue
index 477883d..c6794e2 100644
--- a/psdc-ui/src/views/emonitor/xrgl/index.vue
+++ b/psdc-ui/src/views/emonitor/xrgl/index.vue
@@ -1,6 +1,76 @@
 <template>
   <div class="app-container home">
-    <h1>蓄热锅炉</h1>
+    <div class="top">
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>总用电量</p>
+          <h2>1641kWh</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>当前功率</p>
+          <h2>11kW</h2>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <div style="display: flex; margin-bottom: 5px">
+            <p>进水温度:</p>
+            <h2>25℃</h2>
+          </div>
+          <div style="display: flex">
+            <p>出水温度:</p>
+            <h2>85℃</h2>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div>pic</div>
+        <div>
+          <p>运行状态</p>
+          <h2 style="color: #1ab394">开启</h2>
+        </div>
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="bottom1">
+        <div class="bottom1-1">
+          日用电量
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          月用电量
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          当前功率
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+      <div class="bottom1">
+        <div class="bottom1-1">
+          当前温度
+        </div>
+        <div>
+          pic
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,6 +81,45 @@
 </script>
 
 <style scoped lang="scss">
+.top{
+  width: 100%;
+  height: 110px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-bottom: 15px;
+}
+.card{
+  width: 24%;
+  height: 110px;
+  background-color: #2F3D8A;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
 
+.bottom{
+  width: 100%;
+  height: 615px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.bottom1{
+  width: 49.35%;
+  height: 300px;
+  background-color: #2F3D8A;
+  margin-bottom: 15px;
+}
+p{
+  margin-bottom: 10px;
+}
+.bottom1-1{
+  width: 100%;
+  height: 40px;
+  background-color: #374590;
+  padding-top: 10px;
+  padding-left: 10px;
+}
 </style>