diff --git a/src/api/ems/dzjk.js b/src/api/ems/dzjk.js
index 42aa3ea..db755b4 100644
--- a/src/api/ems/dzjk.js
+++ b/src/api/ems/dzjk.js
@@ -90,6 +90,23 @@ export function getCoolingDataList(siteId) {
   })
 }
 
+//获取动环数据
+export function getDhDataList(siteId) {
+  return request({
+    url: `/ems/siteMonitor/getDhDataList?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+
+//获取消防数据
+export function getXfDataList(siteId) {
+  return request({
+    url: `/ems/siteMonitor/getXfDataList?siteId=${siteId}`,
+    method: 'get'
+  })
+}
+
+
 //获取电表数据
 export function getAmmeterDataList(siteId) {
   return request({
diff --git a/src/assets/styles/common.scss b/src/assets/styles/common.scss
index 52b4e3a..984ec10 100644
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@@ -163,6 +163,31 @@
     }
   }
 }
+//电表、液冷公共样式
+.device-info-row{
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-left: 1px solid #eee;
+  border-top: 1px solid #eee;
+  .device-info-col{
+    padding: 10px 0;
+    text-align: center;
+    font-size:12px;
+    color:#666666;
+    line-height: 14px;
+    border-bottom: 1px solid #eee;
+    border-right: 1px solid #eee;
+    .left{
+    }
+    .right{
+      display: block;
+      font-weight: 500;
+      font-size:16px;
+      line-height: 18px;
+      margin-top:10px;
+    }
+  }
+}
+
 
 //公共表格样式
 .common-table.el-table{
diff --git a/src/router/ems.js b/src/router/ems.js
index d12d68c..9d0415e 100644
--- a/src/router/ems.js
+++ b/src/router/ems.js
@@ -79,6 +79,18 @@ export const dzjk=[
                 component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
                 name: 'DzjkSbjkYl',
                 meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'COOLING'},
+              },
+              {
+                path: 'dh',
+                component: () => import('@/views/ems/dzjk/sbjk/dh/index.vue'),
+                name: 'DzjkSbjkDh',
+                meta: { title: '动环',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'DH'},
+              },
+              {
+                path: 'xf',
+                component: () => import('@/views/ems/dzjk/sbjk/xf/index.vue'),
+                name: 'DzjkSbjkXf',
+                meta: { title: '消防',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk',deviceCategory:'XF'},
               }
             ]
           },
diff --git a/src/views/ems/dzjk/index.vue b/src/views/ems/dzjk/index.vue
index 0986c66..ae6b496 100644
--- a/src/views/ems/dzjk/index.vue
+++ b/src/views/ems/dzjk/index.vue
@@ -68,6 +68,7 @@ export default {
 <style scoped lang="scss">
   .dzjk-ems-content-container{
     margin-top:0;
+    min-height: 60vh;
   }
   .lighting{
     position: relative;
diff --git a/src/views/ems/dzjk/sbjk/db/index.vue b/src/views/ems/dzjk/sbjk/db/index.vue
index 29ed74d..c946224 100644
--- a/src/views/ems/dzjk/sbjk/db/index.vue
+++ b/src/views/ems/dzjk/sbjk/db/index.vue
@@ -32,10 +32,10 @@
            </el-badge>
          </div>
        </div>
-       <el-row>
-         <el-col v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" :span="8">
+       <el-row class="device-info-row">
+         <el-col v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" :span="8" class="device-info-col">
             <span class="pointer" @click="showChart(tempDataItem.pointName,item.deviceId)">
-              {{tempDataItem.name}}：{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span>
+              <span class="left">{{tempDataItem.name}}</span> <span class="right">{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span></span>
             </span>
          </el-col>
        </el-row>
@@ -183,24 +183,6 @@ export default {
   &.list:not(:last-child){
     margin-bottom: 25px;
   }
-  .el-row{
-    background-color: #ffffff;
-    border:1px solid #eeeeee;
-    font-size: 14px;
-    line-height: 16px;
-    color: #333333;
-    .el-col{
-      padding:12px 0;
-      text-align: center;
-      position: relative;
-    }
-    .el-col{
-      border-bottom: 1px solid #eeeeee;
-    }
-    .el-col:not(:nth-child(3n)){
-      border-right: 1px solid #eeeeee;
-    }
-  }
 }
 
 </style>
diff --git a/src/views/ems/dzjk/sbjk/dh/index.vue b/src/views/ems/dzjk/sbjk/dh/index.vue
new file mode 100644
index 0000000..5523f7f
--- /dev/null
+++ b/src/views/ems/dzjk/sbjk/dh/index.vue
@@ -0,0 +1,109 @@
+
+<template>
+    <div v-loading="loading">
+      <el-card
+          v-for="(item,index) in list"
+          :key="index+'ylLise'"
+          class="sbjk-card-container running-card-container"
+         shadow="always">
+        <div slot="header">
+          <span class="large-title">{{item.deviceName}}</span>
+          <div class="info">
+            <div>数据更新时间：{{ item.dataUpdateTime  || '-'}}</div>
+          </div>
+          <div class="alarm">
+            <el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">详细</el-button>
+            <el-badge :value="item.alarmNum || 0" class="item">
+              <i
+                  class="el-icon-message-solid alarm-icon"
+                  @click="pointDetail(item,'alarmPoint')"
+              ></i>
+            </el-badge>
+          </div>
+        </div>
+        <el-row class="device-info-row">
+          <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12"  class="device-info-col">
+            <span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
+              <span class="left">{{tempDataItem.title}}</span> <span class="right">{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span></span>
+            </span>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
+      <point-chart ref="pointChart" :site-id="siteId"/>
+      <point-table ref="pointTable"/>
+    </div>
+</template>
+
+
+<script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getDhDataList} from '@/api/ems/dzjk'
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
+import pointChart from "./../PointChart.vue";
+import PointTable from "@/views/ems/site/sblb/PointTable.vue";
+export default {
+  name:'DzjkSbjkDh',
+  mixins:[getQuerySiteId,intervalUpdate],
+  components:{pointChart,PointTable},
+  data() {
+    return {
+      loading:false,
+      list:[],
+      tempData:[
+        {title:'湿度',attr:'humidity',unit:'&#8451;'},
+        {title:'温度',attr:'temperature',unit:''},
+      ]
+    }
+  },
+  methods:{
+    // 查看设备电位表格
+    pointDetail(row,dataType){
+      const {deviceId} = row
+      this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'DH'},dataType)
+    },
+    showChart(pointName,deviceId){
+      pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'DH',deviceId})
+    },
+    updateData(){
+      this.loading = true
+      getDhDataList(this.siteId).then(response => {
+        this.list =  JSON.parse(JSON.stringify(response?.data || []));
+      }).finally(() => {this.loading = false})
+    },
+    init(){
+      this.updateData()
+      this.updateInterval(this.updateData)
+    }
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sbjk-card-container{
+  &:not(:last-child){
+    margin-bottom: 25px;
+  }
+  .el-row{
+    background-color: #ffffff;
+    border:1px solid #eeeeee;
+    font-size: 14px;
+    line-height: 16px;
+    color: #333333;
+    .el-col{
+      padding:12px 0;
+      text-align: center;
+      position: relative;
+    }
+    .el-col{
+      border-bottom: 1px solid #eeeeee;
+    }
+    .el-col:not(:nth-child(3n)){
+      border-right: 1px solid #eeeeee;
+    }
+  }
+}
+</style>
diff --git a/src/views/ems/dzjk/sbjk/xf/index.vue b/src/views/ems/dzjk/sbjk/xf/index.vue
new file mode 100644
index 0000000..2d10035
--- /dev/null
+++ b/src/views/ems/dzjk/sbjk/xf/index.vue
@@ -0,0 +1,122 @@
+
+<template>
+    <div v-loading="loading">
+      <el-card
+          v-for="(item,index) in list"
+          :key="index+'ylLise'"
+          class="sbjk-card-container running-card-container"
+          :class="{
+        'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
+        'running-card-container':item.emsCommunicationStatus === '0'
+      }"
+         shadow="always">
+        <div slot="header">
+          <span class="large-title">{{item.deviceName}}</span>
+          <div class="info">
+            <div>
+              {{
+                $store.state.ems.communicationStatusOptions[
+                    item.emsCommunicationStatus
+                    ]
+              }}
+            </div>
+            <div>数据更新时间：{{ item.dataUpdateTime  || '-'}}</div>
+          </div>
+          <div class="alarm">
+            <el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">详细</el-button>
+            <el-badge :value="item.alarmNum || 0" class="item">
+              <i
+                  class="el-icon-message-solid alarm-icon"
+                  @click="pointDetail(item,'alarmPoint')"
+              ></i>
+            </el-badge>
+          </div>
+        </div>
+        <el-row class="device-info-row">
+          <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12" class="device-info-col">
+            <span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
+              <span class="left">{{tempDataItem.title}}</span> <span class="right">{{item[tempDataItem.attr] || ''}}<span v-html="tempDataItem.unit"></span></span>
+            </span>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
+      <point-chart ref="pointChart" :site-id="siteId"/>
+      <point-table ref="pointTable"/>
+    </div>
+</template>
+
+
+<script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getXfDataList} from '@/api/ems/dzjk'
+import intervalUpdate from "@/mixins/ems/intervalUpdate";
+import pointChart from "./../PointChart.vue";
+import PointTable from "@/views/ems/site/sblb/PointTable.vue";
+export default {
+  name:'DzjkSbjkXf',
+  mixins:[getQuerySiteId,intervalUpdate],
+  components:{pointChart,PointTable},
+  data() {
+    return {
+      loading:false,
+      list:[],
+      tempData:[
+        {title:'主电源备用电池状态',attr:'dczt',unit:''},
+        {title:'手自动状态延时状态',attr:'yszt',unit:''},
+        {title:'启动喷洒气体喷洒状态',attr:'pszt',unit:''},
+        {title:'压力开关状态电磁阀状态',attr:'dcfzt',unit:''},
+      ]
+    }
+  },
+  methods:{
+    // 查看设备电位表格
+    pointDetail(row,dataType){
+      const {deviceId} = row
+      this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'XF'},dataType)
+    },
+    showChart(pointName,deviceId){
+      pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'XF',deviceId})
+    },
+    updateData(){
+      this.loading = true
+      getXfDataList(this.siteId).then(response => {
+        this.list =  JSON.parse(JSON.stringify(response?.data || []));
+      }).finally(() => {this.loading = false})
+    },
+    init(){
+      this.updateData()
+      this.updateInterval(this.updateData)
+    }
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.sbjk-card-container{
+  &:not(:last-child){
+    margin-bottom: 25px;
+  }
+  .el-row{
+    background-color: #ffffff;
+    border:1px solid #eeeeee;
+    font-size: 14px;
+    line-height: 16px;
+    color: #333333;
+    .el-col{
+      padding:12px 0;
+      text-align: center;
+      position: relative;
+    }
+    .el-col{
+      border-bottom: 1px solid #eeeeee;
+    }
+    .el-col:not(:nth-child(3n)){
+      border-right: 1px solid #eeeeee;
+    }
+  }
+}
+</style>
diff --git a/src/views/ems/dzjk/sbjk/yl/index.vue b/src/views/ems/dzjk/sbjk/yl/index.vue
index b461ec7..d9d845b 100644
--- a/src/views/ems/dzjk/sbjk/yl/index.vue
+++ b/src/views/ems/dzjk/sbjk/yl/index.vue
@@ -21,10 +21,10 @@
             </el-badge>
           </div>
         </div>
-        <el-row>
-          <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">
+        <el-row class="device-info-row">
+          <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8" class="device-info-col">
             <span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
-              {{tempDataItem.title}}：{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span>
+              <span class="left">{{tempDataItem.title}}</span> <span class="right">{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span></span>
             </span>
           </el-col>
         </el-row>
@@ -92,23 +92,5 @@ export default {
   &:not(:last-child){
     margin-bottom: 25px;
   }
-  .el-row{
-    background-color: #ffffff;
-    border:1px solid #eeeeee;
-    font-size: 14px;
-    line-height: 16px;
-    color: #333333;
-    .el-col{
-      padding:12px 0;
-      text-align: center;
-      position: relative;
-    }
-    .el-col{
-      border-bottom: 1px solid #eeeeee;
-    }
-    .el-col:not(:nth-child(3n)){
-      border-right: 1px solid #eeeeee;
-    }
-  }
 }
 </style>