diff --git a/src/App.vue b/src/App.vue
index a3e4fd6..a8471cd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,9 @@
 <template>
   <a-config-provider :locale="locale">
+    <!-- 全局空状态 -->
+    <template slot="renderEmpty">
+      <common-empty/>
+    </template>
     <div id="app">
       <router-view/>
     </div>
@@ -8,8 +12,10 @@
 <script>
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import enquireScreen from '@/utils/device'
+import CommonEmpty from '@comp/CommonEmpty'
 
 export default {
+  components: { CommonEmpty },
   data () {
     return {
       locale: zhCN
diff --git a/src/assets/empty.png b/src/assets/empty.png
new file mode 100644
index 0000000..fb58e1f
Binary files /dev/null and b/src/assets/empty.png differ
diff --git a/src/assets/images/empty.png b/src/assets/images/empty.png
new file mode 100644
index 0000000..fb58e1f
Binary files /dev/null and b/src/assets/images/empty.png differ
diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index cd4c558..c4e8885 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -124,11 +124,19 @@
   border-right-color: @primary-color;
   border-radius: 0;
 }
+// 去圆角
+div.ant-table table,
+.ant-table .ant-table-thead > tr:first-child > th:last-child,
+.ant-table .ant-table-thead > tr:first-child > th:first-child {
+  border-radius: 0;
+}
 /* 表格样式end */
 
 /* 分页器样式begin */
 .ant-pagination.ant-table-pagination.mini {
   @gray: #D0DEEE;
+  margin-top: 10px;
+  margin-bottom: 0;
 
   // 总条数
   .ant-pagination-total-text {
@@ -254,6 +262,10 @@
 .ant-select-open .ant-select-arrow::after {
   transform: rotate(180deg);
 }
+// 删除
+.ant-select-selection:hover .ant-select-selection__clear {
+  color: @text-color-secondary;
+}
 /* 下拉框end */
 
 /* 表单禁用样式begin */
@@ -384,6 +396,9 @@
 .ml-8 {
   margin-left: 8px;
 }
+.mb-4 {
+  margin-bottom: 4px;
+}
 .mb-20 {
   margin-bottom: 20px;
 }
@@ -407,9 +422,6 @@
 .info-row.info-row-inline {
   display: inline-flex;
 }
-.info-row:not(:last-child):not(.info-row-inline) {
-  margin-bottom: 15px;
-}
 .info-row .info-label {
   flex: auto;
   font-family: PingFang SC, PingFang SC, sans-serif;
@@ -470,7 +482,7 @@
 
 // 标题加渐变背景
 .title-background {
-  margin-bottom: 14px;
+  margin-bottom: 9px;
   font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
   font-weight: 400;
   font-size: 15px;
@@ -530,6 +542,9 @@
   .ant-form-item-label > label::after {
     display: none;
   }
+  .ant-form-item-control {
+    line-height: 35.5px;
+  }
 }
 /* 表单end */
 
@@ -547,6 +562,13 @@
   justify-content: space-between;
 }
 
+// 表格中的tag对齐inline-block导致错位，父元素字体调整为0，解决tag对齐问题
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td:has( > .tag-blue),
+.ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td:has( > .tag-cyan)
+{
+  padding: 0 !important;
+  font-size: 0;
+}
 .tag-blue {
   background: rgba(0,148,255,0.2);
   color: rgba(0,148,255,1);
diff --git a/src/components/CommonCard.vue b/src/components/CommonCard.vue
index 3ce73e4..bb46c79 100644
--- a/src/components/CommonCard.vue
+++ b/src/components/CommonCard.vue
@@ -1,22 +1,32 @@
 <template>
-  <a-card :bordered="false" class="common-card">
+  <a-card :bordered="false" class="common-card" :class="{ 'empty-card': isEmpty }">
     <!--  标题  -->
     <div slot="title" class="card-title"><slot name="title">{{ title }}</slot></div>
     <!--  标题右侧  -->
     <slot name="extra" slot="extra"></slot>
+    <!--  暂无数据  -->
+    <common-empty class="card-empty" v-if="isEmpty"/>
     <!--  内容  -->
-    <slot></slot>
+    <slot v-else></slot>
   </a-card>
 </template>
 
 <script>
+import CommonEmpty from '@comp/CommonEmpty'
 export default {
   name: 'CommonCard',
+  components: { CommonEmpty },
   props: {
     title: {
       type: String,
       default: '',
       required: false
+    },
+    // 是否空状态
+    isEmpty: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   }
 }
@@ -84,6 +94,18 @@ export default {
   /deep/ .ant-card-extra {
     padding: 0;
   }
+
+  &.empty-card {
+    /deep/ .ant-card-body {
+      position: relative;
+    }
+    .card-empty {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
 }
 
 .card-title {
diff --git a/src/components/CommonCardInfo.vue b/src/components/CommonCardInfo.vue
index 6a86f94..d8df789 100644
--- a/src/components/CommonCardInfo.vue
+++ b/src/components/CommonCardInfo.vue
@@ -1,20 +1,32 @@
 <template>
   <a-row type="flex">
     <a-col flex="1">
-      <div class="info-row" v-for="(item, index) in leftList" :key="item.id || (item.label + index)">
+      <div class="info-row"
+           v-for="(item, index) in leftList"
+           :key="item.id || (item.label + index)"
+           :class="index !== leftList.length - 1 ? `mb-${gutter}` : ''">
         <div class="info-label" :title="item.label">{{ item.label }}</div>
         <!-- valueField是数据的字段，表示从data中取数据 -->
-        <div v-if="item.valueField && data" class="info-value over-text" :title="data[item.valueField]">{{ data[item.valueField] }}</div>
-        <div v-else class="info-value over-text" :title="item.value">{{ item.value }}</div>
+        <div v-if="item.valueField && data && ![undefined, null, ''].includes(data[item.valueField])"
+             class="info-value over-text"
+             :title="`${data[item.valueField]} ${item.unit || ''}`">
+          {{ `${data[item.valueField]} ${item.unit || ''}` }}
+        </div>
       </div>
     </a-col>
     <a-col flex="1px" class="divider-vertical"></a-col>
     <a-col flex="1">
-      <div class="info-row" v-for="(item, index) in rightList" :key="item.id || (item.label + index)">
+      <div class="info-row"
+           v-for="(item, index) in rightList"
+           :key="item.id || (item.label + index)"
+           :class="index !== rightList.length - 1 ? `mb-${gutter}` : ''">
         <div class="info-label" :title="item.label">{{ item.label }}</div>
         <!-- valueField是数据的字段，表示从data中取数据 -->
-        <div v-if="item.valueField && data" class="info-value over-text" :title="data[item.valueField]">{{ data[item.valueField] }}</div>
-        <div v-else class="info-value over-text" :title="item.value">{{ item.value }}</div>
+        <div v-if="item.valueField && data && ![undefined, null, ''].includes(data[item.valueField])"
+             class="info-value over-text"
+             :title="`${data[item.valueField]} ${item.unit || ''}`">
+          {{ `${data[item.valueField]} ${item.unit || ''}` }}
+        </div>
       </div>
     </a-col>
   </a-row>
@@ -40,13 +52,28 @@ export default {
       type: Object,
       required: false,
       default: () => ({})
+    },
+    // 间隔 class 样式
+    gutter: {
+      type: String,
+      required: false,
+      default: '15'
     }
   }
 }
 </script>
 
-<style scoped>
-.info-row .info-value {
-  max-width: 50%;
+<style lang="less" scoped>
+.info-row {
+  height: 19px;
+  .info-value {
+    max-width: 50%;
+  }
+}
+.mb-12 {
+  margin-bottom: 12px;
+}
+.mb-15 {
+  margin-bottom: 15px;
 }
 </style>
diff --git a/src/components/CommonEmpty.vue b/src/components/CommonEmpty.vue
new file mode 100644
index 0000000..9cf8371
--- /dev/null
+++ b/src/components/CommonEmpty.vue
@@ -0,0 +1,23 @@
+<template>
+  <!--  空数据  -->
+  <a-empty :image="require('@assets/images/empty.png')" class="empty">
+    <span slot="description" class="empty-text">暂无数据</span>
+    <!--    <div class="empty-content">这个是额外的提示语，用于空状态的提示</div>-->
+  </a-empty>
+</template>
+
+<script>
+export default {
+  name: 'CommonEmpty'
+}
+</script>
+
+<style lang="less" scoped>
+.empty {
+  .empty-text {
+    font-family: PingFang SC, PingFang SC, sans-serif;
+    font-weight: 400;
+    color: #0094FF;
+  }
+}
+</style>
diff --git a/src/components/menu/FirstLevelMenu.vue b/src/components/menu/FirstLevelMenu.vue
index b42065f..b6b20e6 100644
--- a/src/components/menu/FirstLevelMenu.vue
+++ b/src/components/menu/FirstLevelMenu.vue
@@ -75,13 +75,13 @@ export default {
     // 选择菜单
     selectMenu (menu) {
       console.log(menu)
-      if (menu.path !== '/systemOverview') {
-        this.$warning({
-          title: '系统建设中',
-          onOk: () => {}
-        })
-        return
-      }
+      // if (menu.path !== '/systemOverview') {
+      //   this.$warning({
+      //     title: '系统建设中',
+      //     onOk: () => {}
+      //   })
+      //   return
+      // }
       this.selectPath = menu.path
       if (menu.children && menu.children.length > 0) {
         this.$router.push({ path: menu.children[0].path })
diff --git a/src/enums/commonEnums.js b/src/enums/commonEnums.js
index 913fea3..9d6606f 100644
--- a/src/enums/commonEnums.js
+++ b/src/enums/commonEnums.js
@@ -27,3 +27,9 @@ export const userType = {
   admin: { label: '管理员', value: 'admin' },
   common: { label: '普通用户', value: 'common' }
 }
+
+// 消息类型
+export const msgType = {
+  hostToDevice: { label: 'Host-》Device', value: 'hostToDevice' },
+  deviceToHost: { label: 'Device-》Host', value: 'deviceToHost' }
+}
diff --git a/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue b/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
index 63e678f..723de6a 100644
--- a/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
+++ b/src/views/systemOverview/equipmentManagement/EquipmentManagement.vue
@@ -43,7 +43,7 @@
             bordered
             rowKey="id"
             :loading="deviceData.loading"
-            :scroll="{x: true,y:200}"
+            :scroll="{x: true,y:206}"
             :columns="deviceData.columns"
             :dataSource="deviceData.dataSource"
             :pagination="deviceData.ipagination"
@@ -63,7 +63,7 @@
       </a-col>
     </a-row>
 
-    <a-row :gutter="20" type="flex" class="mb-20">
+    <a-row :gutter="20" type="flex">
       <a-col flex="545px">
         <common-card title="系统消息">
           <a-table
@@ -71,6 +71,7 @@
             size="middle"
             bordered
             rowKey="id"
+            :scroll="{y:366}"
             :columns="sysMesData.columns"
             :dataSource="sysMesData.dataSource"
             :pagination="false">
@@ -87,7 +88,7 @@
         <a-row type="flex">
           <a-col flex="1" style="margin-right: 20px">
             <common-card title="添加设备">
-              <a-form :form="deviceForm" class="custom-vertical-form flex-column-between">
+              <a-form :form="deviceForm" class="custom-vertical-form">
                 <div class="mb-20">
                   <a-form-item label="设备名称">
                     <a-input placeholder="请输入设备名称" :max-length="50"
@@ -102,7 +103,7 @@
                     </j-dict-select-tag>
                   </a-form-item>
                   <a-form-item label="所属井口">
-                    <a-select v-decorator="['wellheadId', validatorRules.wellheadId]"
+                    <a-select v-decorator="['wellheadId', validatorRules.wellheadId]" allowClear
                               placeholder="请选择所属井口">
                       <a-select-option v-for="item in wellheadList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>
                     </a-select>
@@ -131,7 +132,7 @@
           </a-col>
           <a-col flex="1">
             <common-card title="添加井口">
-              <a-form :form="wellheadForm" class="custom-vertical-form flex-column-between">
+              <a-form :form="wellheadForm" class="custom-vertical-form">
                 <div class="mb-20">
                   <a-form-item label="所属作业区">
                     <a-input placeholder="请输入所属作业区" :max-length="50"
@@ -621,6 +622,10 @@ export default {
     .overview-card-img {
       flex: 0 0 72px;
       margin-right: 36px;
+
+      img {
+        width: 100%;
+      }
     }
     .overview-card-content {
       display: flex;
diff --git a/src/views/systemOverview/systemSettings/SystemSettings.vue b/src/views/systemOverview/systemSettings/SystemSettings.vue
index c468525..b54931f 100644
--- a/src/views/systemOverview/systemSettings/SystemSettings.vue
+++ b/src/views/systemOverview/systemSettings/SystemSettings.vue
@@ -3,7 +3,7 @@
     <a-row :gutter="20" type="flex" class="mb-20">
       <a-col flex="556px">
         <common-card title="系统设置">
-          <a-form :form="sysSettingForm" class="custom-vertical-form flex-column-between">
+          <a-form :form="sysSettingForm" class="custom-vertical-form">
             <div class="mb-20">
               <a-form-item label="服务器IP">
                 <a-input placeholder="请输入服务器IP" :max-length="50"
@@ -50,7 +50,7 @@
             size="middle"
             bordered
             rowKey="id"
-            :scroll="{x: true,y:280}"
+            :scroll="{x: true,y:286}"
             :columns="userInfo.columns"
             :dataSource="userInfo.dataSource"
             :pagination="userInfo.ipagination"
@@ -65,6 +65,7 @@
               <a-tooltip>
                 <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
                 <div class="table-text"
+                     style="width: 76px;"
                      :class="{
                       'tag-blue': record.userType === userType.admin.value,
                       'tag-cyan': record.userType === userType.common.value
@@ -80,11 +81,11 @@
       </a-col>
     </a-row>
 
-    <a-row :gutter="20" type="flex" class="mb-20">
+    <a-row :gutter="20" type="flex">
       <a-col flex="556px">
         <common-card title="添加用户">
-          <a-form :form="addUserForm" class="custom-vertical-form flex-column-between">
-            <a-form-item>
+          <a-form :form="addUserForm" class="custom-vertical-form">
+            <a-form-item style="margin-bottom: 0;">
               <div class="upload-avatar-box">
                 <j-image-upload v-decorator="['avatar', validatorRules.avatar]"
                                 class="upload-avatar"
@@ -93,7 +94,7 @@
                                 accept='.png,.PNG,.jpg,.JPG'></j-image-upload>
               </div>
             </a-form-item>
-            <a-row type="flex" :gutter="20" class="mb-20">
+            <a-row type="flex" :gutter="20" class="mb-4">
               <a-col :span="12">
                 <a-form-item label="用户名称">
                   <a-input placeholder="请输入用户名称" :max-length="50"
@@ -143,7 +144,7 @@
             size="middle"
             bordered
             rowKey="id"
-            :scroll="{x: true,y:360}"
+            :scroll="{x: true,y:286}"
             :columns="communicationLog.columns"
             :dataSource="communicationLog.dataSource"
             :pagination="communicationLog.ipagination"
@@ -154,10 +155,18 @@
                 <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
               </a-tooltip>
             </template>
-            <span slot="action" slot-scope="text, record, index" class="operation-btns">
-              <a class="primary" @click="handleChangeStatus(record, index)">编辑</a>
-              <a class="danger" @click="handleDelete(record, index)">删除</a>
-            </span>
+            <!-- 消息类型 -->
+            <template slot="msgType" slot-scope="text">
+              <a-tooltip>
+                <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+                <div class="table-text"
+                     style="width: 118px;"
+                     :class="{
+                      'tag-blue': text === msgType.hostToDevice.label,
+                      'tag-cyan': text === msgType.deviceToHost.label
+                }">{{ text || text === 0 ? text : global.emptyLine }}</div>
+              </a-tooltip>
+            </template>
           </a-table>
         </common-card>
       </a-col>
@@ -170,7 +179,7 @@
 <script>
 import CommonCard from '@comp/CommonCard'
 import { addUserInfo, delUserInfo, getSysSetting, getUserPage, saveSysSetting } from '@api/systemOverview'
-import { dataAcquisitionCycle, dataAcquisitionProtocol, userType } from '@/enums/commonEnums'
+import { dataAcquisitionCycle, dataAcquisitionProtocol, msgType, userType } from '@/enums/commonEnums'
 import { getRSAPublicKey } from '@/utils/encryption'
 import { JSEncrypt } from 'jsencrypt'
 import UserInfoModal from '@views/systemOverview/systemSettings/modules/UserInfoModal'
@@ -180,6 +189,7 @@ export default {
   data () {
     return {
       userType,
+      msgType,
       loading: false,
       // 系统设置表单
       sysSettingForm: this.$form.createForm(this),
@@ -279,7 +289,7 @@ export default {
             title: '消息类型',
             align: 'center',
             width: '30%',
-            scopedSlots: { customRender: 'text' }
+            scopedSlots: { customRender: 'msgType' }
           },
           {
             dataIndex: 'msgContent',
diff --git a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
index f6ca373..6c528f8 100644
--- a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
+++ b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
@@ -9,9 +9,10 @@
               <j-dict-select-tag :triggerChange="true"
                                  class="search-input"
                                  dictCode="wellhead_area"
+                                 @change="changeWellSite"
                                  v-model="queryParam.wellheadArea"
                                  placeholder="请选择所属井场"></j-dict-select-tag>
-              <a-select class="search-input" style="margin-left: 8px;" v-model="queryParam.singleWell" placeholder="请选择单井">
+              <a-select class="search-input" style="margin-left: 8px;" v-model="queryParam.singleWell" placeholder="请选择单井" allowClear>
                 <a-select-option v-for="item in singleWellList" :key="item.id" :value="item.id">{{ item.wellheadName }}</a-select-option>
               </a-select>
               <span class="search-operate-btns custom-btns-box">
@@ -33,163 +34,142 @@
         </a-row>
       </a-form>
     </div>
-    <a-row :gutter="20" type="flex">
-      <a-col :xl="12" :xxl="6" class="mb-20">
-        <div class="flex-column">
-          <div class="mb-20">
-            <common-card title="油井基础信息">
-              <common-card-info :left-list="data.oilWellLeft || []"
-                                :right-list="data.oilWellRight || []"/>
-            </common-card>
-          </div>
-          <div>
-            <common-card title="含水和动液面">
-              <common-card-info :left-list="data.dynamicLiquidLevelLeft || []"
-                                :right-list="data.dynamicLiquidLevelRight || []"/>
-            </common-card>
-          </div>
-        </div>
-      </a-col>
-      <a-col :xl="12" :xxl="6" class="mb-20">
-        <common-card title="油井实时参数">
-          <common-card-info :data="oilWellRealTimeData['油井实时参数']"
-                            :left-list="data.oilWellsRealTimeParamsLeft || []"
-                            :right-list="data.oilWellsRealTimeParamsRight || []"/>
-        </common-card>
-      </a-col>
-      <a-col :xl="12" :xxl="6" class="mb-20">
-        <common-card title="油井生产数据">
-          <!--  泵型图  -->
-          <div class="pump-type mb-20">
-            <div class="pump-type-title">泵型：常规泵</div>
-            <div class="pump-type-remarks">备注：备注备注备注备注</div>
-          </div>
-          <common-card-info :left-list="data.oilWellProductionDataLeft"
-                            :right-list="data.oilWellProductionDataRight"/>
-        </common-card>
-      </a-col>
-      <a-col :xl="12" :xxl="6" class="mb-20">
-        <common-card title="油井工作状态">
-          <div slot="extra" class="info-row">
-            <div class="info-label">工作状态</div>
-            <div class="info-value">
-              <span class="working mr-12">运行</span>
-              <span class="cease">停止</span>
+    <template v-if="Object.keys('allData').length && dataSource.length">
+      <a-row :gutter="20" type="flex">
+        <a-col :xl="12" :xxl="6" class="mb-20">
+          <div class="flex-column">
+            <div class="mb-20">
+              <common-card title="油井基础信息">
+                <common-card-info :data="allData"
+                                  :left-list="labelData.oilWellLeft || []"
+                                  :right-list="labelData.oilWellRight || []"
+                                  gutter="12"/>
+              </common-card>
+            </div>
+            <div>
+              <common-card title="含水和动液面">
+                <common-card-info :data="allData"
+                                  :left-list="labelData.dynamicLiquidLevelLeft || []"
+                                  :right-list="labelData.dynamicLiquidLevelRight || []"
+                                  gutter="12"/>
+              </common-card>
             </div>
           </div>
-          <div class="working-status-container">
-            <div class="working-status-title">名称：华h62-1</div>
-            <div class="working-status-img">
-              <img :src="workingStatus" alt="油井工作状态">
+        </a-col>
+        <a-col :xl="12" :xxl="6" class="mb-20">
+          <common-card title="油井实时参数">
+            <common-card-info :data="oilWellRealTimeData['油井实时参数']"
+                              :left-list="labelData.oilWellsRealTimeParamsLeft || []"
+                              :right-list="labelData.oilWellsRealTimeParamsRight || []"/>
+          </common-card>
+        </a-col>
+        <a-col :xl="12" :xxl="6" class="mb-20">
+          <common-card title="油井生产数据">
+            <!--  泵型图  -->
+            <div class="pump-type mb-20">
+              <div class="pump-type-title">泵型：{{ allData.pumpType }}</div>
+              <div class="over-text pump-type-remarks" :title="allData.comment">备注：{{ allData.comment }}</div>
             </div>
-            <div class="working-status-btns">
-              <a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">远程启井</a-button>
-              <a-button @click="handleChangeWorkingCondition(false)" class="danger-btn">远程停井</a-button>
-              <a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">频率控制</a-button>
+            <common-card-info :data="allData"
+                              :left-list="labelData.oilWellProductionDataLeft"
+                              :right-list="labelData.oilWellProductionDataRight"/>
+          </common-card>
+        </a-col>
+        <a-col :xl="12" :xxl="6" class="mb-20">
+          <common-card title="油井工作状态">
+            <div slot="extra" class="info-row">
+              <div class="info-label">工作状态</div>
+              <div class="info-value">
+                <span class="working" v-if="isWorking">运行</span>
+                <span class="cease" v-else>停止</span>
+              </div>
             </div>
-          </div>
-        </common-card>
-      </a-col>
-    </a-row>
-    <a-row :gutter="20" type="flex">
-      <a-col class="mb-20" :xl="12" :xxl="8">
-        <common-card title="实时示功图">
-          <div slot="extra" class="indicator-diagram-extra">
-            <span class="time">2022-03-01 10:21:16</span>
-            <div class="divider-vertical"></div>
-            <span class="info-row info-row-inline">
+            <div class="working-status-container">
+              <div class="working-status-title">名称：{{ allData.wellName }}</div>
+              <div class="working-status-img">
+                <img :src="workingStatus" alt="油井工作状态">
+              </div>
+              <div class="working-status-btns">
+                <a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">远程启井</a-button>
+                <a-button @click="handleChangeWorkingCondition(false)" class="danger-btn">远程停井</a-button>
+                <a-button @click="handleChangeWorkingCondition(true)" class="primary-btn">频率控制</a-button>
+              </div>
+            </div>
+          </common-card>
+        </a-col>
+      </a-row>
+      <a-row :gutter="20" type="flex">
+        <a-col class="mb-20" :xl="12" :xxl="8">
+          <common-card title="实时示功图">
+            <div slot="extra" class="indicator-diagram-extra" v-if="oilWellRealTimeData['实时示功图']">
+              <span class="time">{{ oilWellRealTimeData['实时示功图']['时间'] }}</span>
+              <div class="divider-vertical"></div>
+              <span class="info-row info-row-inline">
               <span class="info-label">冲程</span>
-              <span class="info-value">3.06m</span>
+              <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲程'] }}m</span>
             </span>
-            <div class="divider-vertical"></div>
-            <span class="info-row info-row-inline">
+              <div class="divider-vertical"></div>
+              <span class="info-row info-row-inline">
               <span class="info-label">冲次</span>
-              <span class="info-value">4.96次/分</span>
+              <span class="info-value">{{ oilWellRealTimeData['实时示功图']['冲次'] }}次/分</span>
             </span>
-          </div>
-          <responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="200px"/>
-        </common-card>
-      </a-col>
-      <a-col class="mb-20" :xl="12" :xxl="8">
-        <common-card title="功图计产监控">
-          <responsive-chart ref="productionMonitoring" key="productionMonitoring" height="200px"/>
-        </common-card>
-      </a-col>
-      <a-col class="mb-20" :xl="12" :xxl="8">
-        <common-card title="载荷分布图">
-          <responsive-chart ref="loadDistribution" key="loadDistribution" height="200px"/>
-        </common-card>
-      </a-col>
-    </a-row>
-<!--    <div class="mb-20">-->
-<!--      <a-table-->
-<!--        bordered-->
-<!--        ref="table"-->
-<!--        size="middle"-->
-<!--        rowKey="id"-->
-<!--        :scroll="{x:'100%', y:120}"-->
-<!--        :columns="columns"-->
-<!--        :dataSource="dataSource"-->
-<!--        :pagination="false">-->
-<!--        <template slot="text" slot-scope="text">-->
-<!--          <a-tooltip>-->
-<!--            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>-->
-<!--            <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>-->
-<!--          </a-tooltip>-->
-<!--        </template>-->
+            </div>
+            <responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="200px"/>
+          </common-card>
+        </a-col>
+        <a-col class="mb-20" :xl="12" :xxl="8">
+          <common-card title="功图计产监控">
+            <responsive-chart ref="productionMonitoring" key="productionMonitoring" height="200px"/>
+          </common-card>
+        </a-col>
+        <a-col class="mb-20" :xl="12" :xxl="8">
+          <common-card title="载荷分布图">
+            <responsive-chart ref="loadDistribution" key="loadDistribution" height="200px"/>
+          </common-card>
+        </a-col>
+      </a-row>
+      <div>
+        <a-table
+          style="width: calc(100% - 100px);display: inline-block;"
+          bordered
+          ref="leftTable"
+          size="middle"
+          rowKey="id"
+          :scroll="{y:120}"
+          :columns="columns"
+          :dataSource="dataSource"
+          :pagination="false">
+          <template slot="text" slot-scope="text">
+            <a-tooltip>
+              <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+              <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+            </a-tooltip>
+          </template>
 
-<!--        <span slot="action" slot-scope="text, record">-->
-<!--          <a @click="handleConfirm(record)" class="confirm mr-10">确认</a>-->
-<!--          <a @click="handleShow(record)" class="show">查看</a>-->
-<!--        </span>-->
-<!--      </a-table>-->
-<!--    </div>-->
-    <div>
-      <a-table
-        style='display: inline-block; width: calc(100% - 110px)'
-        bordered
-        ref="table"
-        size="middle"
-        rowKey="id"
-        :scroll="{y:120}"
-        :columns="columns"
-        :dataSource="dataSource"
-        :pagination="false">
-        <template slot="text" slot-scope="text">
-          <a-tooltip>
-            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
-            <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
-          </a-tooltip>
-        </template>
-
-        <span slot="action" slot-scope="text, record">
+          <span slot="action" slot-scope="text, record">
           <a @click="handleConfirm(record)" :disabled="record.disabledConfirm" class="confirm mr-10">确认</a>
           <a @click="handleShow(record)" class="show">查看</a>
         </span>
-      </a-table>
-
-      <a-table
-        bordered
-        class="right-fixed-table"
-        style='display: inline-block; width: 100px'
-        ref="table"
-        size="middle"
-        rowKey="id"
-        :scroll="{y:120}"
-        :columns="[{
-          title: '批量操作',
-          dataIndex: 'actionBatch',
-          scopedSlots: { customRender: 'actionBatch' },
-          align: 'center',
-          // fixed: 'right',
-          // width: 100
-        }]"
-        :dataSource="this.dataSource.length ? [{}]: []"
-        :pagination="false">
-        <div slot="actionBatch" class="action-batch">
-          <a href='javascript:' @click="handleAllAlarms" class='all-alarms'></a>
-        </div>
-      </a-table>
+        </a-table>
+        <a-table
+          bordered
+          class="right-fixed-table"
+          style='display: inline-block; width: 100px'
+          ref="rightTable"
+          size="middle"
+          rowKey="id"
+          :columns="rightColumn"
+          :dataSource="this.dataSource.length ? [{}]: []"
+          :pagination="false">
+          <div slot="actionBatch" class="action-batch">
+            <a href='javascript:' @click="handleAllAlarms" class='all-alarms'></a>
+          </div>
+        </a-table>
+      </div>
+    </template>
+    <!--  没有数据查询为空  -->
+    <div v-else class="empty-box">
+      <common-empty/>
     </div>
   </a-spin>
 </template>
@@ -201,9 +181,145 @@ import ResponsiveChart from '@comp/ResponsiveChart'
 import * as echarts from 'echarts'
 import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
 import { wellheadType } from '@/enums/commonEnums'
+import CommonEmpty from '@comp/CommonEmpty'
+
+// 默认写死数据
+const staticData = {
+  wellName: '华H62-1',
+  pumpingType: '抽油机',
+  wellType: '水平井',
+  wellField: '华H62井场',
+  productionLayer: '长_7_2',
+  productionDate: '2020-03-27',
+  realTimeMoisture: '11.1',
+  hourlyMoisture: '11.8',
+  twentyFourHourMoisture: '12.3',
+  dynamicLiquidPressure: '1.55',
+  dynamicLiquidSoundVelocity: '370',
+  dynamicLiquidDepth: '96',
+  timeRate: '100',
+  openingDuration: '15时0分',
+  dailyWaterProduction: '4.34',
+  dailyLiquidProduction: '19.09',
+  dailyOilProduction: '14.75',
+  electricityUsage: '0.00',
+  wellCondition: '功图错误',
+  pumpDepth: '1340',
+  pumpDiameter: '57',
+  pumpEfficiency: '20.05',
+  comment: '当前工作状态良好，请按时检查',
+  pumpType: '常规泵'
+}
+const staticTableData = [
+  {
+    id: '1',
+    alarmTime: '2022-02-10 19:48:30',
+    recoveryTime: '2022-02-10 19:58:30',
+    alarmDeviceA: '西平236-76',
+    alarmDeviceB: '收球桶压力：0.53MPa',
+    alarmDesc: '报警恢复：西平236-76油压低报警，报警值（1.3MPa）',
+    alarmType: '油套压报警',
+    confirmTime: '2022-02-10 19:58:30',
+    confirmUser: '王某某'
+  },
+  {
+    id: '2',
+    alarmTime: '2022-02-10 19:48:30',
+    recoveryTime: '2022-02-10 19:58:30',
+    alarmDeviceA: '西平236-76',
+    alarmDeviceB: '收球桶压力：0.53MPa',
+    alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
+    alarmType: '油套压报警',
+    confirmTime: '2022-02-10 19:58:30',
+    confirmUser: '王某某'
+  },
+  {
+    id: '3',
+    alarmTime: '2022-02-10 19:48:30',
+    recoveryTime: '2022-02-10 19:58:30',
+    alarmDeviceA: '西平236-76',
+    alarmDeviceB: '收球桶压力：0.53MPa',
+    alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
+    alarmType: '油套压报警',
+    confirmTime: '2022-02-10 19:58:30',
+    confirmUser: '王某某'
+  },
+  {
+    id: '4',
+    alarmTime: '2022-02-10 19:48:30',
+    recoveryTime: '2022-02-10 19:58:30',
+    alarmDeviceA: '西平236-76',
+    alarmDeviceB: '收球桶压力：0.53MPa',
+    alarmDesc: '报警恢复：西平236-76油压低报警，报警值（1.3MPa）',
+    alarmType: '油套压报警',
+    confirmTime: '2022-02-10 19:58:30',
+    confirmUser: '王某某'
+  },
+  {
+    id: '5',
+    alarmTime: '2022-02-10 19:48:30',
+    recoveryTime: '2022-02-10 19:58:30',
+    alarmDeviceA: '西平236-76',
+    alarmDeviceB: '收球桶压力：0.53MPa',
+    alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
+    alarmType: '油套压报警',
+    confirmTime: '2022-02-10 19:58:30',
+    confirmUser: '王某某'
+  },
+  {
+    id: '6',
+    alarmTime: '2022-02-10 19:48:30',
+    recoveryTime: '2022-02-10 19:58:30',
+    alarmDeviceA: '西平236-76',
+    alarmDeviceB: '收球桶压力：0.53MPa',
+    alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
+    alarmType: '油套压报警',
+    confirmTime: '2022-02-10 19:58:30',
+    confirmUser: '王某某'
+  },
+  {
+    id: '7',
+    alarmTime: '2022-02-10 19:48:30',
+    recoveryTime: '2022-02-10 19:58:30',
+    alarmDeviceA: '西平236-76',
+    alarmDeviceB: '收球桶压力：0.53MPa',
+    alarmDesc: '报警恢复：西平236-76油压低报警，报警值（1.3MPa）',
+    alarmType: '油套压报警',
+    confirmTime: '2022-02-10 19:58:30',
+    confirmUser: '王某某'
+  },
+  {
+    id: '8',
+    alarmTime: '2022-02-10 19:48:30',
+    recoveryTime: '2022-02-10 19:58:30',
+    alarmDeviceA: '西平236-76',
+    alarmDeviceB: '收球桶压力：0.53MPa',
+    alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
+    alarmType: '油套压报警',
+    confirmTime: '2022-02-10 19:58:30',
+    confirmUser: '王某某'
+  },
+  {
+    id: '9',
+    alarmTime: '2022-02-10 19:48:30',
+    recoveryTime: '2022-02-10 19:58:30',
+    alarmDeviceA: '西平236-76',
+    alarmDeviceB: '收球桶压力：0.53MPa',
+    alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
+    alarmType: '油套压报警',
+    confirmTime: '2022-02-10 19:58:30',
+    confirmUser: '王某某'
+  }
+]
+const staticMonitoringChart = {
+  xAxis: ['01-31', '02-10', '02-15', '02-20', '02-25', '03-01'],
+  oilProduction: [40, 42, 25, 40, 42, 37],
+  liquidProduction: [40, 25, 40, 50, 40, 60]
+}
+
 export default {
   name: 'WellheadDataMonitoring',
-  components: { ResponsiveChart, CommonCardInfo, CommonCard },
+  components: { CommonEmpty, ResponsiveChart, CommonCardInfo, CommonCard },
   data () {
     return {
       // 暂停中图片
@@ -212,6 +328,7 @@ export default {
       working: require('@assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
       // 是否工作中
       workingStatus: require('@/assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
+      isWorking: true,
       loading: false,
       queryParam: {},
       // 油井下拉菜单
@@ -306,186 +423,84 @@ export default {
         //   width: 100
         // }
       ],
-      dataSource: [
-        {
-          id: '1',
-          alarmTime: '2022-02-10 19:48:30',
-          recoveryTime: '2022-02-10 19:58:30',
-          alarmDeviceA: '西平236-76',
-          alarmDeviceB: '收球桶压力：0.53MPa',
-          alarmDesc: '报警恢复：西平236-76油压低报警，报警值（1.3MPa）',
-          alarmType: '油套压报警',
-          confirmTime: '2022-02-10 19:58:30',
-          confirmUser: '王某某'
-        },
-        {
-          id: '2',
-          alarmTime: '2022-02-10 19:48:30',
-          recoveryTime: '2022-02-10 19:58:30',
-          alarmDeviceA: '西平236-76',
-          alarmDeviceB: '收球桶压力：0.53MPa',
-          alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
-          alarmType: '油套压报警',
-          confirmTime: '2022-02-10 19:58:30',
-          confirmUser: '王某某'
-        },
-        {
-          id: '3',
-          alarmTime: '2022-02-10 19:48:30',
-          recoveryTime: '2022-02-10 19:58:30',
-          alarmDeviceA: '西平236-76',
-          alarmDeviceB: '收球桶压力：0.53MPa',
-          alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
-          alarmType: '油套压报警',
-          confirmTime: '2022-02-10 19:58:30',
-          confirmUser: '王某某'
-        },
-        {
-          id: '4',
-          alarmTime: '2022-02-10 19:48:30',
-          recoveryTime: '2022-02-10 19:58:30',
-          alarmDeviceA: '西平236-76',
-          alarmDeviceB: '收球桶压力：0.53MPa',
-          alarmDesc: '报警恢复：西平236-76油压低报警，报警值（1.3MPa）',
-          alarmType: '油套压报警',
-          confirmTime: '2022-02-10 19:58:30',
-          confirmUser: '王某某'
-        },
-        {
-          id: '5',
-          alarmTime: '2022-02-10 19:48:30',
-          recoveryTime: '2022-02-10 19:58:30',
-          alarmDeviceA: '西平236-76',
-          alarmDeviceB: '收球桶压力：0.53MPa',
-          alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
-          alarmType: '油套压报警',
-          confirmTime: '2022-02-10 19:58:30',
-          confirmUser: '王某某'
-        },
-        {
-          id: '6',
-          alarmTime: '2022-02-10 19:48:30',
-          recoveryTime: '2022-02-10 19:58:30',
-          alarmDeviceA: '西平236-76',
-          alarmDeviceB: '收球桶压力：0.53MPa',
-          alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
-          alarmType: '油套压报警',
-          confirmTime: '2022-02-10 19:58:30',
-          confirmUser: '王某某'
-        },
-        {
-          id: '7',
-          alarmTime: '2022-02-10 19:48:30',
-          recoveryTime: '2022-02-10 19:58:30',
-          alarmDeviceA: '西平236-76',
-          alarmDeviceB: '收球桶压力：0.53MPa',
-          alarmDesc: '报警恢复：西平236-76油压低报警，报警值（1.3MPa）',
-          alarmType: '油套压报警',
-          confirmTime: '2022-02-10 19:58:30',
-          confirmUser: '王某某'
-        },
-        {
-          id: '8',
-          alarmTime: '2022-02-10 19:48:30',
-          recoveryTime: '2022-02-10 19:58:30',
-          alarmDeviceA: '西平236-76',
-          alarmDeviceB: '收球桶压力：0.53MPa',
-          alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
-          alarmType: '油套压报警',
-          confirmTime: '2022-02-10 19:58:30',
-          confirmUser: '王某某'
-        },
-        {
-          id: '9',
-          alarmTime: '2022-02-10 19:48:30',
-          recoveryTime: '2022-02-10 19:58:30',
-          alarmDeviceA: '西平236-76',
-          alarmDeviceB: '收球桶压力：0.53MPa',
-          alarmDesc: '西平236-76油压低报警，报警值（1.3MPa）',
-          alarmType: '油套压报警',
-          confirmTime: '2022-02-10 19:58:30',
-          confirmUser: '王某某'
-        }
-      ],
+      // 右侧表格
+      rightColumn: [{
+        title: '批量操作',
+        dataIndex: 'actionBatch',
+        scopedSlots: { customRender: 'actionBatch' },
+        align: 'center'
+      }],
+      dataSource: [],
       defaultId: 'default', // 默认数据的id
       // 油井实时数据
       oilWellRealTimeData: {},
+      allData: {},
       // 定时器，用于10秒请求一次
       timer: null,
       // 页面显示label和对应数据字段
-      data: {
+      labelData: {
         // 油井基础信息
         oilWellLeft: [
-          { label: '油井名称', value: '华H62-1' },
-          { label: '机采类型', value: '抽油机' },
-          { label: '井型', value: '水平井' }
+          { label: '油井名称', valueField: 'wellName' },
+          { label: '机采类型', valueField: 'pumpingType' },
+          { label: '井型', valueField: 'wellType' }
         ],
         oilWellRight: [
-          { label: '所属井场', value: '华H62井场' },
-          { label: '开采层位', value: '长_7_2' },
-          { label: '投产日期', value: '2020-03-27' }
+          { label: '所属井场', valueField: 'wellField' },
+          { label: '开采层位', valueField: 'productionLayer' },
+          { label: '投产日期', valueField: 'productionDate' }
         ],
         // 含水和动液面
         dynamicLiquidLevelLeft: [
-          { label: '实时含水', value: '11.1%' },
-          { label: '小时含水率', value: '11.8%' },
-          { label: '24小时含水率', value: '12.3%' }
+          { label: '实时含水', valueField: 'realTimeMoisture', unit: '%' },
+          { label: '小时含水率', valueField: 'hourlyMoisture', unit: '%' },
+          { label: '24小时含水率', valueField: 'twentyFourHourMoisture', unit: '%' }
         ],
         dynamicLiquidLevelRight: [
-          { label: '动液面套压', value: '1.55 MPa' },
-          { label: '动液面声速', value: '370 m/s' },
-          { label: '动液面声速', value: '96 m' }
+          { label: '动液面套压', valueField: 'dynamicLiquidPressure', unit: 'MPa' },
+          { label: '动液面声速', valueField: 'dynamicLiquidSoundVelocity', unit: 'm/s' },
+          { label: '动液面深度', valueField: 'dynamicLiquidDepth', unit: 'm' }
         ],
         // 油井实时参数
         oilWellsRealTimeParamsLeft: [
-          { label: '油压', valueField: 'oilPressure', value: '1.7 MPa' },
-          { label: 'A相电流', valueField: 'currentA', value: '18.51 A' },
-          { label: 'B相电流', valueField: 'currentB', value: '15.85 A' },
-          { label: 'C相电流', valueField: 'currentC', value: '16.46 A' },
-          { label: '有功功率', valueField: 'activePower', value: '8.07 KW' },
-          { label: '功率因素', valueField: 'powerFactor', value: '0.99' },
-          { label: '最大载荷', valueField: 'maxLoad', value: '52.74 KN' },
-          { label: '冲程', valueField: 'stroke', value: '3.02 m' }
+          { label: '油压', valueField: 'oilPressure', unit: 'MPa' },
+          { label: 'A相电流', valueField: 'currentA', unit: 'A' },
+          { label: 'B相电流', valueField: 'currentB', unit: 'A' },
+          { label: 'C相电流', valueField: 'currentC', unit: 'A' },
+          { label: '有功功率', valueField: 'activePower', unit: 'KW' },
+          { label: '功率因素', valueField: 'powerFactor', unit: '' },
+          { label: '最大载荷', valueField: 'maxLoad', unit: 'KN' },
+          { label: '冲程', valueField: 'stroke', unit: 'm' }
         ],
         oilWellsRealTimeParamsRight: [
-          { label: '套压', valueField: 'casingPressure', value: '1.7 MPa' },
-          { label: 'A相电压', valueField: 'voltageA', value: '217.2 V' },
-          { label: 'B相电压', valueField: 'voltageB', value: '215.1 V' },
-          { label: 'C相电压', valueField: 'voltageC', value: '215.6 V' },
-          { label: '无功功率', valueField: 'reactivePower', value: '-0.04 KW' },
-          { label: '输出频率', valueField: 'outputFrequency', value: '52.41 Hz' },
-          { label: '最小载荷', valueField: 'minLoad', value: '24.22 KN' },
-          { label: '冲次', valueField: 'strokeCount', value: '5 次/分' }
+          { label: '套压', valueField: 'casingPressure', unit: 'MPa' },
+          { label: 'A相电压', valueField: 'voltageA', unit: 'V' },
+          { label: 'B相电压', valueField: 'voltageB', unit: 'V' },
+          { label: 'C相电压', valueField: 'voltageC', unit: 'V' },
+          { label: '无功功率', valueField: 'reactivePower', unit: 'KW' },
+          { label: '输出频率', valueField: 'outputFrequency', unit: 'Hz' },
+          { label: '最小载荷', valueField: 'minLoad', unit: 'KN' },
+          { label: '冲次', valueField: 'strokeCount', unit: '次/分' }
         ],
         oilWellProductionDataLeft: [
-          { label: '时率', value: '100 %' },
-          { label: '开井时长', value: '15时0分' },
-          { label: '日产水量', value: '4.34 m³' },
-          { label: '日产液量', value: '19.09 m³' },
-          { label: '日产油量', value: '14.75 t' },
-          { label: '备注', value: '备注备注备注备注备注' }
+          { label: '时率', unit: '%', valueField: 'timeRate' },
+          { label: '开井时长', unit: '', valueField: 'openingDuration' },
+          { label: '日产水量', unit: 'm³', valueField: 'dailyWaterProduction' },
+          { label: '日产液量', unit: 'm³', valueField: 'dailyLiquidProduction' },
+          { label: '日产油量', unit: 't', valueField: 'dailyOilProduction' }
         ],
         oilWellProductionDataRight: [
-          { label: '用电量', value: '0.00 kw.h' },
-          { label: '油井工况', value: '功图错误' },
-          { label: '泵深', value: '1340 m' },
-          { label: '泵型', value: '常规泵' },
-          { label: '泵径', value: '57 mm' },
-          { label: '泵效', value: '20.05%' }
+          { label: '用电量', unit: 'kw.h', valueField: 'electricityUsage' },
+          { label: '油井工况', unit: '', valueField: 'wellCondition' },
+          { label: '泵深', unit: 'm', valueField: 'pumpDepth' },
+          { label: '泵径', unit: 'mm', valueField: 'pumpDiameter' },
+          { label: '泵效', unit: '%', valueField: 'pumpEfficiency' }
         ]
       }
     }
   },
   mounted () {
-    // 立即请求一次，然后每10秒请求一次实时数据
-    this.loadOilWellRealTimeData()
-    this.timer = setInterval(() => {
-      this.loadOilWellRealTimeData()
-    }, 1000 * 10)
-    // 加载功图计产监控
-    this.initProductionMonitoring()
-    // 油井下拉
-    this.loadOilWellList()
+    this.searchQuery()
   },
   beforeDestroy () {
     // 离开页面前清除定时器
@@ -493,17 +508,36 @@ export default {
   },
   methods: {
     searchQuery () {
-
-    },
-    searchReset () {
-
+      const params = Object.assign({}, this.queryParam)
+      // 没有条件恢复默认数据
+      if (Object.values(params).length === 0) {
+        this.allData = staticData
+        this.dataSource = staticTableData
+        setTimeout(() => {
+          // 加载功图计产监控
+          this.initProductionMonitoring(staticMonitoringChart)
+        }, 100)
+        // 每10秒请求一次实时数据
+        this.loadOilWellRealTimeData()
+        clearInterval(this.timer)
+        this.timer = setInterval(() => {
+          this.loadOilWellRealTimeData()
+        }, 1000 * 10)
+        return
+      }
+      // 置空数据，不请求实时数据
+      this.allData = {}
+      this.dataSource = []
+      clearInterval(this.timer)
+      this.timer = null
     },
     handleConfirm (record) {
       this.$confirm({
         title: '确认报警',
         content: '确定报警该数据吗?',
-        onOk: function () {
+        onOk: () => {
           record.disabledConfirm = true
+          this.$forceUpdate()
         }
       })
     },
@@ -519,6 +553,7 @@ export default {
           this.dataSource.forEach(item => {
             item.disabledConfirm = true
           })
+          this.$forceUpdate()
         }
       })
     },
@@ -537,7 +572,16 @@ export default {
     },
     // 初始化 实时示功图
     initIndicatorDiagram (data) {
-      this.$refs.indicatorDiagram.updateMyChartOption({
+      // 没有渲染出组件就不执行
+      if (!this.$refs.productionMonitoring) {
+        return
+      }
+      // 置空数据
+      if (!data || Object.keys(data).length === 0) {
+        this.$refs.productionMonitoring.updateMyChartOption()
+        return
+      }
+      this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption({
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -571,14 +615,14 @@ export default {
         xAxis: [
           {
             type: 'category',
-            name: '单位(m)',
-            nameLocation: 'end',
-            nameTextStyle: {
-              color: '#6C8097',
-              align: 'right',
-              verticalAlign: 'top',
-              padding: [8, 4, 0, 0]
-            },
+            // name: '单位(m)',
+            // nameLocation: 'end',
+            // nameTextStyle: {
+            //   color: '#6C8097',
+            //   align: 'right',
+            //   verticalAlign: 'top',
+            //   padding: [8, 4, 0, 0]
+            // },
             data: data['X轴'],
             boundaryGap: false,
             // 刻度线不显示
@@ -607,7 +651,7 @@ export default {
             // 名称样式
             nameTextStyle: {
               color: '#6C8097',
-              padding: [0, 0, 0, 10]
+              padding: [0, 0, 0, 5]
             },
             // 轴标签样式
             axisLabel: {
@@ -663,7 +707,16 @@ export default {
       })
     },
     // 初始化 功图计产监控
-    initProductionMonitoring () {
+    initProductionMonitoring (data) {
+      // 没有渲染出组件就不执行
+      if (!this.$refs.productionMonitoring) {
+        return
+      }
+      // 置空数据
+      if (!data || Object.keys(data).length === 0) {
+        this.$refs.productionMonitoring.updateMyChartOption()
+        return
+      }
       this.$refs.productionMonitoring.updateMyChartOption({
         tooltip: {
           trigger: 'axis',
@@ -698,7 +751,7 @@ export default {
         xAxis: [
           {
             type: 'category',
-            data: ['01-31', '02-10', '02-15', '02-20', '02-25', '03-01'],
+            data: data.xAxis,
             boundaryGap: false,
             // 刻度线不显示
             axisTick: {
@@ -726,7 +779,8 @@ export default {
             // 名称样式
             nameTextStyle: {
               color: '#6C8097',
-              padding: [0, 0, 0, 110]
+              align: 'center',
+              padding: [0, 0, 0, 105]
             },
             // 轴标签样式
             axisLabel: {
@@ -756,7 +810,7 @@ export default {
                 { offset: 1, color: 'rgba(46,228,253,0)' }
               ])
             },
-            data: [40, 42, 25, 40, 42, 37]
+            data: data.oilProduction
           },
           {
             name: '产液量(m³/d)',
@@ -772,14 +826,23 @@ export default {
                 { offset: 1, color: 'rgba(0,148,255,0)' }
               ])
             },
-            data: [40, 25, 40, 50, 40, 60]
+            data: data.liquidProduction
           }
         ]
       })
     },
     // 初始化 载荷分布图
     initLoadDistribution (data) {
-      this.$refs.loadDistribution.updateMyChartOption({
+      // 没有渲染出组件就不执行
+      if (!this.$refs.productionMonitoring) {
+        return
+      }
+      // 置空数据
+      if (!data || Object.keys(data).length === 0) {
+        this.$refs.productionMonitoring.updateMyChartOption()
+        return
+      }
+      this.$refs.loadDistribution && this.$refs.loadDistribution.updateMyChartOption({
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -841,7 +904,7 @@ export default {
             // 名称样式
             nameTextStyle: {
               color: '#6C8097',
-              padding: [0, 0, 0, 10]
+              padding: [0, 0, 0, 5]
             },
             // 轴标签样式
             axisLabel: {
@@ -878,6 +941,7 @@ export default {
     },
     // 油井工作状态
     handleChangeWorkingCondition (status) {
+      this.isWorking = status
       if (status === true) {
         this.workingStatus = this.working
       } else if (status === false) {
@@ -885,14 +949,24 @@ export default {
       }
     },
     // 油井下拉
-    loadOilWellList () {
+    loadOilWellList (wellheadArea) {
       getWellheadList({
+        wellheadArea: wellheadArea,
         wellheadType: wellheadType.oil.value
       }).then(res => {
         if (res.success) {
           this.singleWellList = res.result || []
         }
       })
+    },
+    // 修改井场获取油井下拉
+    changeWellSite (value) {
+      if (value) {
+        this.loadOilWellList(value)
+      } else {
+        this.singleWellList = []
+        this.$set(this.queryParam, 'singleWell', undefined)
+      }
     }
   }
 }
@@ -947,6 +1021,9 @@ export default {
     font-size: 12px;
     color: #D0DEEE;
     line-height: 14px;
+    width: 70%;
+    white-space: nowrap;
+    word-break: break-all;
   }
 }
 
@@ -1030,15 +1107,41 @@ export default {
 }
 .all-alarms {
   position: absolute;
-  top: 40px;
+  top: 50%;
   left: 50%;
-  transform: translate(-50%, -30%);
+  transform: translate(-50%, calc(-50% + 20px));
   display: inline-block;
   width: 40px;
   height: 100px;
   background: url("~@/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png");
 }
-.right-fixed-table /deep/ th {
-  height: 40px;
+.right-fixed-table {
+  /deep/ th {
+    height: 40px;
+    border-radius: 0;
+  }
+}
+.empty-box {
+  position: relative;
+  width: 100%;
+  // 屏幕高度 - 头部导航高度 - 搜索部分高度 - 距离底部
+  height: calc(100vh - 158px - 84px - 20px);
+  background: rgba(0,148,255,0.08);
+  border: 1px solid rgba(0,148,255,0.24);
+
+  .empty {
+    position: absolute;
+    height: 45%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    /deep/ .ant-empty-image {
+      height: 100%;
+    }
+    /deep/ .empty-text {
+      font-size: 26px;
+      line-height: 22px;
+    }
+  }
 }
 </style>