[update] 修改bug

2024-04-11 10:59:19 +08:00
parent b5393f6267
commit b8de008598
12 changed files with 589 additions and 365 deletions
@@ -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
@@ -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);
@@ -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 {
@@ -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 {
+<style lang="less" scoped>
+.info-row {
+  height: 19px;
+  .info-value {
    max-width: 50%;
+  }
+}
+.mb-12 {
+  margin-bottom: 12px;
+}
+.mb-15 {
+  margin-bottom: 15px;
 }
 </style>
@@ -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>
@@ -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 })
@@ -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' }
+}
@@ -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;
@@ -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',
@@ -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,19 +34,24 @@
        </a-row>
      </a-form>
    </div>
+    <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 :left-list="data.oilWellLeft || []"
-                                :right-list="data.oilWellRight || []"/>
+                <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 :left-list="data.dynamicLiquidLevelLeft || []"
-                                :right-list="data.dynamicLiquidLevelRight || []"/>
+                <common-card-info :data="allData"
+                                  :left-list="labelData.dynamicLiquidLevelLeft || []"
+                                  :right-list="labelData.dynamicLiquidLevelRight || []"
+                                  gutter="12"/>
              </common-card>
            </div>
          </div>
@@ -53,19 +59,20 @@
        <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 || []"/>
+                              :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">泵型：常规泵</div>
-            <div class="pump-type-remarks">备注：备注备注备注备注</div>
+              <div class="pump-type-title">泵型：{{ allData.pumpType }}</div>
+              <div class="over-text pump-type-remarks" :title="allData.comment">备注：{{ allData.comment }}</div>
            </div>
-          <common-card-info :left-list="data.oilWellProductionDataLeft"
-                            :right-list="data.oilWellProductionDataRight"/>
+            <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">
@@ -73,12 +80,12 @@
            <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>
+                <span class="working" v-if="isWorking">运行</span>
+                <span class="cease" v-else>停止</span>
              </div>
            </div>
            <div class="working-status-container">
-            <div class="working-status-title">名称：华h62-1</div>
+              <div class="working-status-title">名称：{{ allData.wellName }}</div>
              <div class="working-status-img">
                <img :src="workingStatus" alt="油井工作状态">
              </div>
@@ -94,17 +101,17 @@
      <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 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">
              <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"/>
@@ -121,34 +128,11 @@
          </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>-->
-
-<!--        <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)'
+          style="width: calc(100% - 100px);display: inline-block;"
          bordered
-        ref="table"
+          ref="leftTable"
          size="middle"
          rowKey="id"
          :scroll="{y:120}"
@@ -167,23 +151,14 @@
          <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"
+          ref="rightTable"
          size="middle"
          rowKey="id"
-        :scroll="{y:120}"
-        :columns="[{
-          title: '批量操作',
-          dataIndex: 'actionBatch',
-          scopedSlots: { customRender: 'actionBatch' },
-          align: 'center',
-          // fixed: 'right',
-          // width: 100
-        }]"
+          :columns="rightColumn"
          :dataSource="this.dataSource.length ? [{}]: []"
          :pagination="false">
          <div slot="actionBatch" class="action-batch">
@@ -191,6 +166,11 @@
          </div>
        </a-table>
      </div>
+    </template>
+    <!--  没有数据查询为空  -->
+    <div v-else class="empty-box">
+      <common-empty/>
+    </div>
  </a-spin>
 </template>

@@ -201,112 +181,36 @@ import ResponsiveChart from '@comp/ResponsiveChart'
 import * as echarts from 'echarts'
 import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
 import { wellheadType } from '@/enums/commonEnums'
-export default {
-  name: 'WellheadDataMonitoring',
-  components: { ResponsiveChart, CommonCardInfo, CommonCard },
-  data () {
-    return {
-      // 暂停中图片
-      suspend: require('@/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif'),
-      // 工作中图片
-      working: require('@assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
-      // 是否工作中
-      workingStatus: require('@/assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
-      loading: false,
-      queryParam: {},
-      // 油井下拉菜单
-      singleWellList: [],
-      columns: [
-        {
-          dataIndex: 'alarmTime',
-          title: '报警时间',
-          align: 'center',
-          width: '10%',
-          scopedSlots: { customRender: 'text' }
-        },
-        {
-          dataIndex: 'recoveryTime',
-          title: '恢复时间',
-          align: 'center',
-          width: '10%',
-          scopedSlots: { customRender: 'text' }
-        },
-        {
-          dataIndex: 'alarmDeviceA',
-          title: '报警设备',
-          align: 'center',
-          width: '10%',
-          scopedSlots: { customRender: 'text' }
-        },
-        {
-          dataIndex: 'alarmDeviceB',
-          title: '报警设备',
-          align: 'center',
-          width: '10%',
-          scopedSlots: { customRender: 'text' }
-        },
-        {
-          dataIndex: 'alarmDesc',
-          title: '报警描述',
-          align: 'center',
-          width: '20%',
-          scopedSlots: { customRender: 'text' }
-        },
-        {
-          dataIndex: 'alarmType',
-          title: '报警类别',
-          align: 'center',
-          width: '10%',
-          scopedSlots: { customRender: 'text' }
-        },
-        {
-          dataIndex: 'confirmTime',
-          title: '确认时间',
-          align: 'center',
-          width: '10%',
-          scopedSlots: { customRender: 'text' }
-        },
-        {
-          dataIndex: 'confirmUser',
-          title: '确认人',
-          align: 'center',
-          width: '10%',
-          scopedSlots: { customRender: 'text' }
-        },
-        {
-          title: '操作',
-          dataIndex: 'action',
-          scopedSlots: { customRender: 'action' },
-          align: 'center',
-          width: '10%'
-        }
-        // {
-        //   title: '批量操作',
-        //   dataIndex: 'actionBatch',
-        //   customRender: (value, row, index) => {
-        //     console.log(value, row, index, 'aaaaaa')
-        //     const obj = {
-        //       children: (
-        //         <div>
-        //           <a href='javascript:' class='all-alarms'></a>
-        //         </div>
-        //       ),
-        //       attrs: {}
-        //     }
-        //     if (index === 0) {
-        //       obj.attrs.rowSpan = this.dataSource.length
-        //     } else {
-        //       obj.attrs.rowSpan = 0
-        //     }
-        //     return obj
-        //   },
-        //   // scopedSlots: { customRender: 'actionBatch' },
-        //   align: 'center',
-        //   fixed: 'right',
-        //   width: 100
-        // }
-      ],
-      dataSource: [
+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',
@@ -406,86 +310,197 @@ export default {
    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: { CommonEmpty, ResponsiveChart, CommonCardInfo, CommonCard },
+  data () {
+    return {
+      // 暂停中图片
+      suspend: require('@/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif'),
+      // 工作中图片
+      working: require('@assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
+      // 是否工作中
+      workingStatus: require('@/assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
+      isWorking: true,
+      loading: false,
+      queryParam: {},
+      // 油井下拉菜单
+      singleWellList: [],
+      columns: [
+        {
+          dataIndex: 'alarmTime',
+          title: '报警时间',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'recoveryTime',
+          title: '恢复时间',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'alarmDeviceA',
+          title: '报警设备',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'alarmDeviceB',
+          title: '报警设备',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'alarmDesc',
+          title: '报警描述',
+          align: 'center',
+          width: '20%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'alarmType',
+          title: '报警类别',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'confirmTime',
+          title: '确认时间',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'confirmUser',
+          title: '确认人',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          scopedSlots: { customRender: 'action' },
+          align: 'center',
+          width: '10%'
+        }
+        // {
+        //   title: '批量操作',
+        //   dataIndex: 'actionBatch',
+        //   customRender: (value, row, index) => {
+        //     console.log(value, row, index, 'aaaaaa')
+        //     const obj = {
+        //       children: (
+        //         <div>
+        //           <a href='javascript:' class='all-alarms'></a>
+        //         </div>
+        //       ),
+        //       attrs: {}
+        //     }
+        //     if (index === 0) {
+        //       obj.attrs.rowSpan = this.dataSource.length
+        //     } else {
+        //       obj.attrs.rowSpan = 0
+        //     }
+        //     return obj
+        //   },
+        //   // scopedSlots: { customRender: 'actionBatch' },
+        //   align: 'center',
+        //   fixed: 'right',
+        //   width: 100
+        // }
      ],
+      // 右侧表格
+      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 {
+.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>