[update] 井口数据监控、系统设置

src/api/systemOverview.js

@@ -16,6 +16,19 @@ const getWellheadList = (params) => getAction('/wellhead/list', params)
 // 添加井口
 const addWellhead = (params) => postAction('/wellhead/add', params)
 
+// 系统设置-获取设置
+const getSysSetting = (params) => getAction('/systemSetting/getSetting', params)
+// 系统设置-保存设置
+const saveSysSetting = (params) => postAction('/systemSetting/save', params)
+
+// 油井实时数据：（油井实时参数、实时示功图、载荷分布图）
+const getOilWellRealTimeData = (params) => getAction('/khOilRealtimeData/realtimeDataResults', params)
+
+// 用户信息分页列表
+const getUserPage = (params) => getAction('/sys/user/page', params)
+// 添加用户
+const addUserInfo = (params) => postAction('/sys/user/add', params)
+
 export {
   getDevicePage,
   addDevice,
@@ -24,4 +37,9 @@ export {
   getSysDeviceOverview,
   getWellheadList,
   addWellhead,
+  getSysSetting,
+  saveSysSetting,
+  getOilWellRealTimeData,
+  getUserPage,
+  addUserInfo
 }

src/assets/less/common.less

@@ -240,16 +240,28 @@
   // 蓝色按钮
   .btn-blue {
     background: url("~@assets/images/componentImg/btn-blue.png") no-repeat center center !important;
+    width: 88px !important;
+  }
+  .btn-blue-long {
+    background: url("~@assets/images/componentImg/btn-blue-long.png") no-repeat center center !important;
+    width: 128px !important;
   }
   // 青色按钮
   .btn-cyan {
     background: url("~@assets/images/componentImg/btn-cyan.png") no-repeat center center !important;
+    width: 88px !important;
   }
+  .btn-cyan-medium {
+    background: url("~@assets/images/componentImg/btn-cyan-medium.png") no-repeat center center !important;
+    width: 108px !important;
+  }
+
   // 按钮公共样式
   .btn-blue,
-  .btn-cyan {
+  .btn-cyan,
+  .btn-blue-long,
+  .btn-cyan-medium {
     border: none !important;
-    width: 88px !important;
     background-size: 100% @btn-height-base !important;
   }
 }
@@ -420,7 +432,7 @@
     margin-bottom: 4px;
   }
   .ant-form-item {
-    margin-bottom: 18px;
+    margin-bottom: 0px;
   }
   .ant-form-item-label > label::after {
     display: none;

src/components/CommonCardInfo.vue

@@ -1,16 +1,20 @@
 <template>
   <a-row type="flex">
     <a-col flex="1">
-      <div class="info-row" v-for="(item, index) in leftData" :key="item.id || (item.label + index)">
+      <div class="info-row" v-for="(item, index) in leftList" :key="item.id || (item.label + index)">
         <div class="info-label" :title="item.label">{{ item.label }}</div>
-        <div class="info-value over-text" :title="item.value">{{ item.value }}</div>
+        <!-- valueField是数据的字段，表示从data中取数据 -->
+        <div v-if="item.valueField" 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>
     </a-col>
     <a-col flex="1px" class="divider-vertical"></a-col>
     <a-col flex="1">
-      <div class="info-row" v-for="(item, index) in rightData" :key="item.id || (item.label + index)">
+      <div class="info-row" v-for="(item, index) in rightList" :key="item.id || (item.label + index)">
         <div class="info-label" :title="item.label">{{ item.label }}</div>
-        <div class="info-value over-text" :title="item.value">{{ item.value }}</div>
+        <!-- valueField是数据的字段，表示从data中取数据 -->
+        <div v-if="item.valueField" 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>
     </a-col>
   </a-row>
@@ -20,18 +24,22 @@
 export default {
   name: 'CommonCardInfo',
   props: {
-    data: {
+    // 左右列表
+    leftList: {
       type: Array,
       required: false,
       default: () => []
-    }
-  },
-  computed: {
-    leftData () {
-      return this.data.filter((item, index) => index % 2 === 0)
     },
-    rightData () {
+    rightList: {
-      return this.data.filter((item, index) => index % 2 !== 0)
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    // 数据
+    data: {
+      type: Array,
+      required: false,
+      default: () => ({})
     }
   }
 }

src/components/jero/JImageUpload.vue

@@ -16,7 +16,7 @@
       @change="handleChange"
       @preview="handlePreview"
       :class="[!isMultiple?'imgupload':'', (!isMultiple && picUrl)?'image-upload-single-over':'' ]">
-      <div>
+      <div v-if="!uploadLimitHideBtn || fileList.length < number">
         <!--<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:100%;height:100%"/>-->
         <div class="iconp">
           <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
@@ -90,8 +90,14 @@ export default {
       type: Number,
       required: false,
       default: 0
-    }
+    },
     // update-end-author:wangshuai date:20201021 for:LOWCOD-969 新增number属性，用于判断上传数量
+    // 上传达到上传上限不显示按钮
+    uploadLimitHideBtn: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
   },
   computed: {
     // 透传给下级组件的事件，需要排除本组件使用的change事件

src/components/page/GlobalHeader.vue

@@ -7,7 +7,9 @@
     :style="{ padding: '0' }">
 
     <div v-if="mode === 'sidemenu'" class="header" :class="theme">
-      <span class="system-title">昆鸿设备管理平台</span>
+      <span class="system-title">
+        <img :src="require('@/assets/images/system-title.png')" alt=''>
+      </span>
       <span class="system-page-title">{{$route.meta.title}}</span>
       <span class="system-time">{{ systemTime }}</span>
       <user-menu :theme="theme"/>

src/components/page/GlobalLayout.vue

@@ -162,7 +162,7 @@ export default {
   body {
     // 打开滚动条:有即显示，无则不显示
     overflow-y: auto;
-
+    background-color: #001125 !important;
     &.colorWeak {
       filter: invert(80%);
     }

src/enums/commonEnums.js

@@ -3,3 +3,21 @@ export const deviceStatus = {
   offLine: { label: '离线', value: '0' },
   onLine: { label: '在线', value: '1' }
 }
+
+// 数据采集周期
+export const dataAcquisitionCycle = {
+  tenSeconds: { label: '10秒', value: '10' },
+  twentySeconds: { label: '20秒', value: '20' },
+  thirtySeconds: { label: '30秒', value: '30' }
+}
+
+// 数据采集协议
+export const dataAcquisitionProtocol = {
+  modbusRtu: { label: 'Modbus RTU', value: 'Modbus RTU' }
+}
+
+// 井口类型
+export const wellheadType = {
+  oil: { label: '油井', value: '1' },
+  water: { label: '水井', value: '2' }
+}

src/views/systemOverview/equipmentManagement/EquipmentManagement.vue

@@ -269,7 +269,7 @@ export default {
             width: '20%'
           }
         ],
-        dataSource: [{}],
+        dataSource: [],
         /* 分页参数 */
         ipagination: {
           current: 1,

src/views/systemOverview/systemSettings/SystemSettings.vue

@@ -1,13 +1,446 @@
 <template>
-  <div>1</div>
+  <a-spin :spinning="loading">
+    <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">
+            <div class="mb-20">
+              <a-form-item label="服务器IP">
+                <a-input placeholder="请输入服务器IP" :max-length="50"
+                         @change="event => event.target.value = event.target.value.trim()"
+                         v-decorator.trim="['serverIp', validatorRules.serverIp]"/>
+              </a-form-item>
+              <a-form-item label="服务器端口号">
+                <a-input placeholder="请输入服务器端口号" :max-length="50"
+                         @change="event => event.target.value = event.target.value.trim()"
+                         v-decorator.trim="['serverPort', validatorRules.serverPort]"/>
+              </a-form-item>
+              <a-form-item label="数据采集协议">
+                <j-dict-select-tag :triggerChange="true"
+                                   dictCode="data_acquisition_protocol"
+                                   v-decorator="['dataAcquisitionProtocol', validatorRules.dataAcquisitionProtocol]"
+                                   placeholder="请选择数据采集协议">
+                </j-dict-select-tag>
+              </a-form-item>
+              <a-form-item label="数据采集周期">
+                <j-dict-select-tag :triggerChange="true"
+                                   dictCode="data_acquisition_cycle"
+                                   v-decorator="['dataAcquisitionCycle', validatorRules.dataAcquisitionCycle]"
+                                   placeholder="请选择数据采集周期">
+                </j-dict-select-tag>
+              </a-form-item>
+            </div>
+            <div class="flex-center custom-btns-box">
+              <a-button class="btn-blue-long" @click="handleResetSysSettingForm" style="margin-right: 16px;">
+                <img :src="require('@assets/images/icon/refresh.png')" alt="恢复默认设置" class="btn-icon">
+                <span class="btn-text">恢复默认设置</span>
+              </a-button>
+              <a-button class="btn-cyan-medium" @click="handleSaveSysSetting">
+                <img :src="require('@assets/images/icon/save.png')" alt="保存设置" class="btn-icon">
+                <span class="btn-text">保存设置</span>
+              </a-button>
+            </div>
+          </a-form>
+        </common-card>
+      </a-col>
+      <a-col flex="auto">
+        <common-card title="用户信息">
+          <a-table
+            ref="table"
+            size="middle"
+            bordered
+            rowKey="id"
+            :scroll="{x: true,y:200}"
+            :columns="userInfo.columns"
+            :dataSource="userInfo.dataSource"
+            :pagination="userInfo.ipagination"
+            @change="handleUserInfoTableChange($event, 'userInfo')">
+            <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, index" class="operation-btns">
+              <a class="primary" @click="handleChangeStatus(record, index)">编辑</a>
+              <a class="danger" @click="handleDelete(record, index)">删除</a>
+            </span>
+          </a-table>
+        </common-card>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="20" type="flex" class="mb-20">
+      <a-col flex="556px">
+        <common-card title="添加用户">
+          <a-form :form="addUserForm" class="custom-vertical-form flex-column-between">
+            <a-form-item>
+              <div class="upload-avatar-box">
+                <j-image-upload v-decorator="['avatar', validatorRules.avatar]"
+                                class="upload-avatar"
+                                :number="1"
+                                uploadLimitHideBtn
+                                accept='.png,.PNG,.jpg,.JPG'></j-image-upload>
+              </div>
+            </a-form-item>
+            <a-row type="flex" :gutter="20" class="mb-20">
+              <a-col :span="12">
+                <a-form-item label="用户名称">
+                  <a-input placeholder="请输入用户名称" :max-length="50"
+                           @change="event => event.target.value = event.target.value.trim()"
+                           v-decorator="['username', validatorRules.username]"/>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="用户类别">
+                  <j-dict-select-tag :triggerChange="true"
+                                     dictCode="user_type"
+                                     v-decorator="['userType', validatorRules.userType]"
+                                     placeholder="请选择用户类别">
+                  </j-dict-select-tag>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-model-item label="所属单位">
+                  <j-select-depart
+                    placeholder="请选择所属单位"
+                    v-decorator="['selecteddeparts', validatorRules.selecteddeparts]"
+                    :backDepart="true"
+                    :treeOpera="true"></j-select-depart>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-model-item label="联系方式">
+                  <a-input placeholder="请输入联系方式"
+                           v-decorator="['phone', validatorRules.phone]" />
+                </a-form-model-item>
+
+              </a-col>
+            </a-row>
+            <div class="flex-center custom-btns-box">
+              <a-button class="btn-cyan" @click="handleAddUser">
+                <img :src="require('@assets/images/icon/add.png')" alt="保存设置" class="btn-icon">
+                <span class="btn-text">添加</span>
+              </a-button>
+            </div>
+          </a-form>
+        </common-card>
+      </a-col>
+      <a-col flex="auto">
+        <common-card title="通讯日志">
+          <a-table
+            ref="table"
+            size="middle"
+            bordered
+            rowKey="id"
+            :scroll="{x: true,y:200}"
+            :columns="communicationLog.columns"
+            :dataSource="communicationLog.dataSource"
+            :pagination="communicationLog.ipagination"
+            @change="handleCommunicationLogTableChange">
+            <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, index" class="operation-btns">
+              <a class="primary" @click="handleChangeStatus(record, index)">编辑</a>
+              <a class="danger" @click="handleDelete(record, index)">删除</a>
+            </span>
+          </a-table>
+        </common-card>
+      </a-col>
+    </a-row>
+  </a-spin>
 </template>
 
 <script>
+import CommonCard from '@comp/CommonCard'
+import { addUserInfo, getSysSetting, getUserPage, saveSysSetting } from '@api/systemOverview'
+import { dataAcquisitionCycle, dataAcquisitionProtocol } from '@/enums/commonEnums'
+import { getRSAPublicKey } from '@/utils/encryption'
+import { JSEncrypt } from 'jsencrypt'
 export default {
-  name: 'SystemSettings'
+  name: 'SystemSettings',
+  components: { CommonCard },
+  data () {
+    return {
+      loading: false,
+      // 系统设置表单
+      sysSettingForm: this.$form.createForm(this),
+      // 添加用户表单
+      addUserForm: this.$form.createForm(this),
+      // 默认值
+      sysSettingFormDefault: {
+        id: 'default',
+        serverIp: '11.13.105.96',
+        serverPort: '1502',
+        dataAcquisitionProtocol: dataAcquisitionProtocol.modbusRtu.value,
+        dataAcquisitionCycle: dataAcquisitionCycle.tenSeconds.value
+      },
+      // 后端保存的值
+      sysSettingFormData: {},
+      // 表单校验
+      validatorRules: {
+        serverIp: { rules: [{ required: true, message: '请输入服务器IP' }], validateTrigger: 'blur' },
+        serverPort: { rules: [{ required: true, message: '请选择服务器端口号' }], validateTrigger: 'blur' },
+        dataAcquisitionProtocol: { rules: [{ required: true, message: '请选择数据采集协议' }], validateTrigger: 'change' },
+        dataAcquisitionCycle: { rules: [{ required: true, message: '请输入数据采集周期' }], validateTrigger: 'change' },
+        username: { rules: [{ required: true, message: '请输入用户名称' }], validateTrigger: 'blur' },
+        userType: { rules: [{ required: true, message: '请选择用户类别' }], validateTrigger: 'change' },
+        selecteddeparts: { rules: [{ required: true, message: '请选择所属单位' }], validateTrigger: 'change' },
+        phone: { rules: [{ required: true, message: '请输入联系方式' }, { validator: this.validateMobile }], validateTrigger: 'blur' }
+      },
+      // 用户信息相关
+      userInfo: {
+        columns: [
+          {
+            dataIndex: 'username',
+            title: '用户名',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            dataIndex: 'phone',
+            title: '联系方式',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            dataIndex: 'roleTxt',
+            title: '用户类别',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            dataIndex: 'orgCodeTxt',
+            title: '所属单位',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            title: '用户管理',
+            dataIndex: 'action',
+            scopedSlots: { customRender: 'action' },
+            align: 'center',
+            width: '20%'
+          }
+        ],
+        dataSource: [],
+        /* 分页参数 */
+        ipagination: {
+          current: 1,
+          pageSize: 10,
+          pageSizeOptions: ['10', '20', '30'],
+          showTotal: (total, range) => {
+            return range[0] + '-' + range[1] + ' 共' + total + '条'
+          },
+          showQuickJumper: true,
+          showSizeChanger: true,
+          total: 0
+        },
+        /* 排序参数 */
+        isorter: {
+          column: 'createTime',
+          order: 'desc'
+        }
+      },
+      // 通讯日志相关
+      communicationLog: {
+        columns: [
+          {
+            dataIndex: 'deviceStatus_dictText',
+            title: '时间',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            dataIndex: 'deviceName',
+            title: '消息类型',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          },
+          {
+            dataIndex: 'deviceSn',
+            title: '消息内容',
+            align: 'center',
+            width: '20%',
+            scopedSlots: { customRender: 'text' }
+          }
+        ],
+        dataSource: []
+      },
+      // 公钥
+      rsaPublicKey: '',
+      // 默认用户信息（调用系统加用户接口，默认密码123456）
+      defaultUserInfo: {
+        password: '123456',
+        confirmpassword: '123456',
+        userIdentity: '1'
+      }
+    }
+  },
+  created () {
+    this.loadPage()
+  },
+  methods: {
+    // 恢复默认配置
+    handleResetSysSettingForm () {
+      this.sysSettingForm.resetFields()
+      this.sysSettingForm.setFieldsValue(this.sysSettingFormDefault)
+      // 回显表单上之后，保存到后端
+      this.$nextTick(() => {
+        this.handleSaveSysSetting()
+      })
+    },
+    loadPage () {
+      this.loadSysSetting()
+      this.loadUserList()
+    },
+    // 获取默认配置
+    loadSysSetting () {
+      getSysSetting({ id: this.sysSettingFormDefault.id }).then(res => {
+        if (res.success) {
+          const data = res.result || {}
+          this.sysSettingFormData = data
+          this.sysSettingForm.setFieldsValue(data)
+        }
+      })
+    },
+    // 保存设置
+    handleSaveSysSetting () {
+      this.sysSettingForm.validateFields((err, values) => {
+        if (!err) {
+          const formData = Object.assign({}, values)
+          // 后端只保存一条数据id固定
+          formData.id = this.sysSettingFormDefault.id
+          saveSysSetting(formData).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+          })
+        }
+      })
+    },
+    // 加载用户信息
+    loadUserList (arg) {
+      // 加载数据 若传入参数1则加载第一页的内容
+      if (arg === 1) {
+        this.userInfo.ipagination.current = 1
+      }
+      this.userInfo.loading = true
+      const params = {
+        pageNo: this.userInfo.ipagination.current,
+        pageSize: this.userInfo.ipagination.pageSize,
+        ...this.userInfo.isorter
+      }
+      getUserPage(params).then((res) => {
+        if (res.success) {
+          // update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+          this.userInfo.dataSource = res.result.records || res.result
+          if (res.result.total) {
+            this.userInfo.ipagination.total = res.result.total
+          } else {
+            this.userInfo.ipagination.total = 0
+          }
+          // update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.userInfo.loading = false
+      })
+    },
+    handleUserInfoTableChange () {
+      console.log()
+    },
+    handleCommunicationLogTableChange () {
+      console.log()
+    },
+    // 添加用户
+    async handleAddUser () {
+      // 获取公钥
+      await getRSAPublicKey().then(res => {
+        this.rsaPublicKey = res.result
+      })
+      // 校验表单
+      this.addUserForm.validateFields((err, values) => {
+        if (!err) {
+          const formData = Object.assign({}, this.defaultUserInfo, values)
+          formData.rsaPublicKey = this.rsaPublicKey
+          // 对密码、手机号进行加密
+          const encrypt = new JSEncrypt()
+          encrypt.setPublicKey(this.rsaPublicKey)
+          if (formData.password) {
+            formData.password = encrypt.encrypt(formData.password)
+          }
+          if (formData.phone) {
+            formData.phone = encrypt.encrypt(formData.phone)
+          }
+          addUserInfo(formData).then((res) => {
+            if (res.success) {
+              this.$message.success(res.message)
+            } else {
+              this.$message.warning(res.message)
+            }
+          }).finally(() => {
+            this.loadUserList()
+          })
+        }
+      })
+    },
+    // 校验手机号
+    validateMobile (rule, value, callback) {
+      if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
+        callback()
+      } else {
+        callback(new Error('您的手机号码格式不正确'))
+      }
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+.upload-avatar-box {
+  position: relative;
+  width: calc(100% + 40px);
+  height: 168px;
+  margin: -13px -20px 0;
+  background: url("~@/assets/images/systemOverview/systemSettings/upload-avatar.png") no-repeat center center;
+  background-size: 100%;
 
+  .upload-avatar {
+    width: 120px;
+    height: 120px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    // 隐藏上传组件
+    /deep/.ant-upload-select {
+      opacity: 0;
+    }
+    /deep/.ant-upload-list-picture-card .ant-upload-list-item {
+      border: none;
+      width: 120px;
+      height: 120px;
+    }
+    /deep/.ant-upload-list-picture .ant-upload-list-item-thumbnail,
+    /deep/.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
+      opacity: 1;
+    }
+  }
+}
 </style>

src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue

@@ -6,11 +6,13 @@
         <a-row type="flex">
           <a-col flex="auto">
             <a-form-item label="油井">
-              <a-select class="search-input" v-model="queryParam.wellSite" placeholder="请选择所属井场">
+              <j-dict-select-tag :triggerChange="true"
-                <a-select-option v-for="item in wellSiteList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+                                 class="search-input"
-              </a-select>
+                                 dictCode="wellhead_area"
+                                 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-option v-for="item in singleWellList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+                <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">
                 <a-button class="btn-blue" type="primary" @click="searchQuery">
@@ -36,19 +38,23 @@
         <div class="flex-column">
           <div class="mb-20">
             <common-card title="油井基础信息">
-              <common-card-info :data="data.oilWells || []"/>
+              <common-card-info :left-list="data.oilWellLeft || []"
+                                :right-list="data.oilWellRight || []"/>
             </common-card>
           </div>
           <div>
             <common-card title="含水和动液面">
-              <common-card-info :data="data.waterContentAndDynamicLiquidLevel || []"/>
+              <common-card-info :left-list="data.dynamicLiquidLevelLeft || []"
+                                :right-list="data.dynamicLiquidLevelRight || []"/>
             </common-card>
           </div>
         </div>
       </a-col>
       <a-col :xl="12" :xxl="6">
         <common-card title="油井实时参数">
-          <common-card-info :data="data.oilWellsRealTimeParameters || []"/>
+          <common-card-info :data="oilWellRealTimeData['油井实时参数']"
+                            :left-list="data.oilWellsRealTimeParamsLeft || []"
+                            :right-list="data.oilWellsRealTimeParamsRight || []"/>
         </common-card>
       </a-col>
       <a-col :xl="12" :xxl="6">
@@ -58,7 +64,8 @@
             <div class="pump-type-title">泵型：常规泵</div>
             <div class="pump-type-remarks">备注：-----</div>
           </div>
-          <common-card-info :data="data.oilWellProductionData || []"/>
+          <common-card-info :left-list="data.oilWellProductionDataLeft"
+                            :right-list="data.oilWellProductionDataRight"/>
         </common-card>
       </a-col>
       <a-col :xl="12" :xxl="6">
@@ -191,6 +198,8 @@ import CommonCard from '@comp/CommonCard'
 import CommonCardInfo from '@comp/CommonCardInfo'
 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 },
@@ -204,7 +213,7 @@ export default {
       workingStatus: require('@/assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
       loading: false,
       queryParam: {},
-      wellSiteList: [],
+      // 油井下拉菜单
       singleWellList: [],
       columns: [
         {
@@ -297,63 +306,89 @@ export default {
         // }
       ],
       dataSource: new Array(10).fill(0).map((_, i) => ({ id: i + '' })),
+      defaultId: 'default', // 默认数据的id
+      // 油井实时数据
+      oilWellRealTimeData: {},
+      // 定时器，用于10秒请求一次
+      timer: null,
+      // 页面显示label和对应数据字段
       data: {
-        oilWells: [
+        // 油井基础信息
+        oilWellLeft: [
           { label: '油井名称', value: '华H62-1' },
-          { label: '所属井场', value: '华H62井场' },
           { label: '机采类型', value: '抽油机' },
+          { label: '井型', value: '水平井' }
+        ],
+        oilWellRight: [
+          { label: '所属井场', value: '华H62井场' },
           { label: '开采层位', value: '长_7_2' },
-          { label: '井型', value: '水平井' },
           { label: '投产日期', value: '2020-03-27' }
         ],
-        waterContentAndDynamicLiquidLevel: [
+        // 含水和动液面
+        dynamicLiquidLevelLeft: [
           { label: '实时含水', value: '11.1%' },
-          { label: '动液面套压', value: '1.55 MPa' },
           { label: '小时含水率', value: '11.8%' },
+          { label: '24小时含水率', value: '12.3%' }
+        ],
+        dynamicLiquidLevelRight: [
+          { label: '动液面套压', value: '1.55 MPa' },
           { label: '动液面声速', value: '370 m/s' },
-          { label: '24小时含水率', value: '12.3%' },
           { label: '动液面声速', value: '96 m' }
         ],
-        oilWellsRealTimeParameters: [
+        // 油井实时参数
-          { label: '油压', value: '1.7 MPa' },
+        oilWellsRealTimeParamsLeft: [
-          { label: '套压', value: '1.7 MPa' },
+          { label: '油压', valueField: 'oilPressure', value: '1.7 MPa' },
-          { label: 'A相电流', value: '18.51 A' },
+          { label: 'A相电流', valueField: 'currentA', value: '18.51 A' },
-          { label: 'A相电压', value: '217.2 V' },
+          { label: 'B相电流', valueField: 'currentB', value: '15.85 A' },
-          { label: 'B相电流', value: '15.85 A' },
+          { label: 'C相电流', valueField: 'currentC', value: '16.46 A' },
-          { label: 'B相电压', value: '215.1 V' },
+          { label: '有功功率', valueField: 'activePower', value: '8.07 KW' },
-          { label: 'C相电流', value: '16.46 A' },
+          { label: '功率因素', valueField: 'powerFactor', value: '0.99' },
-          { label: 'C相电压', value: '215.6 V' },
+          { label: '最大载荷', valueField: 'maxLoad', value: '52.74 KN' },
-          { label: '有功功率', value: '8.07 KW' },
+          { label: '冲程', valueField: 'stroke', value: '3.02 m' }
-          { label: '无功功率', value: '-0.04 KW' },
-          { label: '功率因素', value: '0.99' },
-          { label: '输出频率', value: '52.41 Hz' },
-          { label: '最大载荷', value: '52.74 KN' },
-          { label: '最小载荷', value: '24.22 KN' },
-          { label: '冲程', value: '3.02 m' },
-          { label: '冲次', value: '5 次/分' }
         ],
-        oilWellProductionData: [
+        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 次/分' }
+        ],
+        oilWellProductionDataLeft: [
           { label: '时率', value: '100 %' },
-          { label: '用电量', value: '0.00 kw.h' },
           { label: '开井时长', value: '15时0分' },
-          { label: '油井工况', value: '功图错误' },
           { label: '日产水量', value: '4.34 m³' },
-          { label: '泵深', value: '1340 m' },
           { label: '日产液量', value: '19.09 m³' },
-          { label: '泵型', value: '常规泵' },
           { label: '日产油量', value: '14.75 t' },
+          { label: '备注', value: '----' }
+        ],
+        oilWellProductionDataRight: [
+          { label: '用电量', value: '0.00 kw.h' },
+          { label: '油井工况', value: '功图错误' },
+          { label: '泵深', value: '1340 m' },
+          { label: '泵型', value: '常规泵' },
           { label: '泵径', value: '57 mm' },
-          { label: '备注', value: '----' },
           { label: '泵效', value: '20.05%' }
-
         ]
       }
     }
   },
   mounted () {
-    this.initIndicatorDiagram()
+    // 立即请求一次，然后每10秒请求一次实时数据
+    this.loadOilWellRealTimeData()
+    this.timer = setInterval(() => {
+      this.loadOilWellRealTimeData()
+    }, 1000 * 10)
+    // 加载功图计产监控
     this.initProductionMonitoring()
-    this.initLoadDistribution()
+    // 油井下拉
+    this.loadOilWellList()
+  },
+  beforeDestroy () {
+    // 离开页面前清除定时器
+    clearInterval(this.timer)
   },
   methods: {
     searchQuery () {
@@ -367,9 +402,22 @@ export default {
     },
     handleShow () {
 
+    },
+    // 加载实时数据(油井实时参数、实时示功图、载荷分布图)(每10s请求一次)
+    loadOilWellRealTimeData () {
+      getOilWellRealTimeData({ id: this.defaultId }).then(res => {
+        if (res.success) {
+          const data = res.result || {}
+          this.oilWellRealTimeData = data
+          this.initIndicatorDiagram(data['实时示功图'])
+          this.initLoadDistribution(data['载荷分布图'])
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
     },
     // 初始化 实时示功图
-    initIndicatorDiagram () {
+    initIndicatorDiagram (data) {
       this.$refs.indicatorDiagram.updateMyChartOption({
         tooltip: {
           trigger: 'axis',
@@ -412,7 +460,7 @@ export default {
               verticalAlign: 'top',
               padding: [8, 4, 0, 0]
             },
-            data: [0, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300],
+            data: data['X轴'],
             boundaryGap: false,
             // 刻度线不显示
             axisTick: {
@@ -472,7 +520,7 @@ export default {
                 { offset: 1, color: 'rgba(255,83,83,0)' }
               ])
             },
-            data: [40, 42, 25, 40, 42, 37, 39, 58, 42, 37, 40]
+            data: data['上冲程']
           },
           {
             name: '下冲程',
@@ -490,7 +538,7 @@ export default {
                 { offset: 1, color: 'rgba(0,148,255,0)' }
               ])
             },
-            data: [40, 25, 40, 50, 40, 60, 80, 45, 40, 50, 40]
+            data: data['下冲程']
           }
         ]
       })
@@ -540,9 +588,9 @@ export default {
             // 轴标签样式
             axisLabel: {
               color: '#86909C',
-              hideOverlap: true
+              hideOverlap: true,
-              // showMinLabel: false,
+              showMinLabel: false,
-              // showMaxLabel: false
+              showMaxLabel: false
             },
             // 轴线样式
             axisLine: {
@@ -611,7 +659,7 @@ export default {
       })
     },
     // 初始化 载荷分布图
-    initLoadDistribution () {
+    initLoadDistribution (data) {
       this.$refs.loadDistribution.updateMyChartOption({
         tooltip: {
           trigger: 'axis',
@@ -646,7 +694,7 @@ export default {
         xAxis: [
           {
             type: 'category',
-            data: [0.5, 1, 1, 1.5, 2, 2.5, 3],
+            data: data['X轴'],
             boundaryGap: false,
             // 刻度线不显示
             axisTick: {
@@ -655,9 +703,9 @@ export default {
             // 轴标签样式
             axisLabel: {
               color: '#86909C',
-              hideOverlap: true
+              hideOverlap: true,
-              // showMinLabel: false,
+              showMinLabel: false,
-              // showMaxLabel: false
+              showMaxLabel: false
             },
             // 轴线样式
             axisLine: {
@@ -695,14 +743,16 @@ export default {
             type: 'line',
             stack: 'maxLoad',
             color: '#FF5353',
-            data: [40, 42, 25, 40, 42, 37, 10]
+            symbol: 'none',
+            data: data['最大载荷']
           },
           {
             name: '最小载荷(KN)',
             type: 'line',
             stack: 'minLoad',
             color: '#FFC97A',
-            data: [40, 25, 40, 50, 40, 60, 20]
+            symbol: 'none',
+            data: data['最小载荷']
           }
         ]
       })
@@ -714,6 +764,16 @@ export default {
       } else if (status === false) {
         this.workingStatus = this.suspend
       }
+    },
+    // 油井下拉
+    loadOilWellList () {
+      getWellheadList({
+        wellheadType: wellheadType.oil.value
+      }).then(res => {
+        if (res.success) {
+          this.singleWellList = res.result || []
+        }
+      })
     }
   }
 }