diff --git a/public/index.html b/public/index.html
index dc076e1..fbfb925 100644
--- a/public/index.html
+++ b/public/index.html
@@ -237,7 +237,7 @@
       background: linear-gradient(180deg, #0094FF 0%, #2EE4FD 100%);
     }
     ::-webkit-scrollbar-corner {
-      background: pink;
+      background: transparent;
     }
     /* 滚动条优化 end */
   </style>
diff --git a/src/assets/images/componentImg/arrow.png b/src/assets/images/componentImg/arrow.png
new file mode 100644
index 0000000..3ae0476
Binary files /dev/null and b/src/assets/images/componentImg/arrow.png differ
diff --git a/src/assets/images/componentImg/btn.png b/src/assets/images/componentImg/btn.png
new file mode 100644
index 0000000..e54070f
Binary files /dev/null and b/src/assets/images/componentImg/btn.png differ
diff --git a/src/assets/images/componentImg/header-bg-center.png b/src/assets/images/componentImg/header-bg-center.png
new file mode 100644
index 0000000..7c21980
Binary files /dev/null and b/src/assets/images/componentImg/header-bg-center.png differ
diff --git a/src/assets/images/componentImg/header-bg-side.png b/src/assets/images/componentImg/header-bg-side.png
new file mode 100644
index 0000000..c2259aa
Binary files /dev/null and b/src/assets/images/componentImg/header-bg-side.png differ
diff --git a/src/assets/images/componentImg/header-dot.png b/src/assets/images/componentImg/header-dot.png
new file mode 100644
index 0000000..f9ad579
Binary files /dev/null and b/src/assets/images/componentImg/header-dot.png differ
diff --git a/src/assets/images/componentImg/input.png b/src/assets/images/componentImg/input.png
new file mode 100644
index 0000000..7fac1ce
Binary files /dev/null and b/src/assets/images/componentImg/input.png differ
diff --git a/src/assets/images/icon/help.png b/src/assets/images/icon/help.png
new file mode 100644
index 0000000..e6855d4
Binary files /dev/null and b/src/assets/images/icon/help.png differ
diff --git a/src/assets/images/icon/search-primary.png b/src/assets/images/icon/search-primary.png
new file mode 100644
index 0000000..34e5b04
Binary files /dev/null and b/src/assets/images/icon/search-primary.png differ
diff --git a/src/assets/images/icon/search.png b/src/assets/images/icon/search.png
new file mode 100644
index 0000000..eec4799
Binary files /dev/null and b/src/assets/images/icon/search.png differ
diff --git a/src/assets/images/icon/user.png b/src/assets/images/icon/user.png
new file mode 100644
index 0000000..fce36ba
Binary files /dev/null and b/src/assets/images/icon/user.png differ
diff --git a/src/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png b/src/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png
new file mode 100644
index 0000000..53c8288
Binary files /dev/null and b/src/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png differ
diff --git a/src/assets/images/systemOverview/wellheadDataMonitoring/oil-well-working-status.png b/src/assets/images/systemOverview/wellheadDataMonitoring/oil-well-working-status.png
new file mode 100644
index 0000000..07765b4
Binary files /dev/null and b/src/assets/images/systemOverview/wellheadDataMonitoring/oil-well-working-status.png differ
diff --git a/src/assets/images/systemOverview/wellheadDataMonitoring/pump-type-bg.png b/src/assets/images/systemOverview/wellheadDataMonitoring/pump-type-bg.png
new file mode 100644
index 0000000..49f039d
Binary files /dev/null and b/src/assets/images/systemOverview/wellheadDataMonitoring/pump-type-bg.png differ
diff --git a/src/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif b/src/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif
new file mode 100644
index 0000000..a5dfea0
Binary files /dev/null and b/src/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif differ
diff --git a/src/assets/images/systemOverview/wellheadDataMonitoring/working.gif b/src/assets/images/systemOverview/wellheadDataMonitoring/working.gif
new file mode 100644
index 0000000..71a6c50
Binary files /dev/null and b/src/assets/images/systemOverview/wellheadDataMonitoring/working.gif differ
diff --git a/src/assets/images/text-bg.png b/src/assets/images/text-bg.png
new file mode 100644
index 0000000..56614d6
Binary files /dev/null and b/src/assets/images/text-bg.png differ
diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index 8212ad2..0c90140 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -84,10 +84,29 @@
 }
 
 /* 表格样式begin */
-.ant-table-thead > tr > th {
-  background: linear-gradient( 180deg, rgba(0,148,255,0.1) 0%, rgba(0,148,255,0.2) 100%) !important;
+.ant-table .ant-table-header,
+.ant-table .ant-table-thead {
+  background: @component-background linear-gradient(180deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0.2) 100%) no-repeat;
+  background-size: 100% 40px;
 }
-/* 表格样式nd */
+.ant-table.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
+.ant-table .ant-table-tbody {
+  background: @component-background linear-gradient(180deg, #001B36 0%, rgba(0,148,255,0.2) 100%);
+}
+.ant-table .ant-table-thead > tr > th,
+.ant-table .ant-table-fixed-left table,
+.ant-table .ant-table-fixed-right table,
+.ant-table .ant-table-fixed .ant-table-thead {
+  background: transparent;
+}
+.ant-table .ant-table-placeholder {
+  background: transparent;
+}
+.ant-table .ant-table-header table {
+  border-radius: 0;
+}
+.ant-table td { white-space: nowrap; }
+/* 表格样式end */
 
 /* 复选框begin */
 .ant-checkbox-inner,
@@ -96,6 +115,16 @@
 }
 /* 复选框end */
 
+/* 搜索框begin */
+.input-search-suffix {
+  font-size: 0;
+  cursor: pointer;
+}
+.input-search-suffix > img {
+  width: 14px;
+}
+/* 输入框end */
+
 /* 下拉框begin */
 .ant-select-selection--multiple .ant-select-selection__choice {
   color: @text-color;
@@ -115,6 +144,27 @@
   background-color: @primary-2;
   color: @text-color;
 }
+// 箭头
+.ant-select-arrow {
+  display: none;
+  position: relative;
+}
+.ant-select-arrow::after {
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  content: '';
+  display: block;
+  position: absolute;
+  background: url("~@/assets/images/componentImg/arrow.png") no-repeat center center;
+  background-size: 100%;
+  transform: rotate(0deg);
+  transition: transform .3s;
+}
+.ant-select-open .ant-select-arrow::after {
+  transform: rotate(180deg);
+}
 /* 下拉框end */
 
 /* 表单禁用样式begin */
@@ -133,13 +183,141 @@
 /* 表单禁用样式end */
 
 /* 部分组件begin */
-// 弹出抽屉底部自定义
+// 弹框底部自定义
 .drawer-bootom-button {
   background-color: @component-background !important;
   border-top-color: @border-color-split !important;
 }
 .ant-modal-close:focus, .ant-modal-close:hover,
 .ant-drawer-close:focus, .ant-drawer-close:hover{
-  color: #fff;
+  color: @text-color;
 }
-/* 部分组件end */
\ No newline at end of file
+.ant-empty-normal {
+  color: @text-color !important;
+}
+
+// 组件背景
+.ant-input,
+.ant-select-selection
+{
+  background: url("~@assets/images/componentImg/input.png") no-repeat center center !important;
+  background-size: 110% calc(@btn-height-base + 2px) !important;
+}
+// 搜索按钮
+.search-btn {
+  border: none !important;
+  width: 88px !important;
+  background: url("~@assets/images/componentImg/btn.png") no-repeat center center !important;
+  background-size: 100% @btn-height-base !important;
+  font-size: 0;
+}
+.search-btn-icon {
+  margin-right: 3px;
+  margin-bottom: 3px;
+  width: 14px;
+}
+.search-btn-text {
+  font-family: PingFang SC, PingFang SC, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  color: #FFFFFF;
+  line-height: 16px;
+}
+/* 部分组件end */
+
+.ml-8 {
+  margin-left: 8px;
+}
+.mb-20 {
+  margin-bottom: 20px;
+}
+.mr-12 {
+  margin-right: 12px;
+}
+.mr-10 {
+  margin-right: 10px;
+}
+// 分割线
+.divider-vertical {
+  width: 1px;
+  margin: 0 20px;
+  background-color: rgba(108, 128, 151, 0.3);
+}
+
+// 一行的内容
+.info-row {
+  display: flex;
+}
+.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;
+  font-weight: 400;
+  font-size: 14px;
+  color: @text-color-secondary;
+  line-height: 16px;
+}
+.info-row .info-label::after {
+  content: '：'
+}
+.info-row .info-value {
+  text-align: right;
+  flex: auto;
+  font-family: Rubik, Rubik, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  color: @text-color;
+  line-height: 16px;
+}
+.over-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+}
+// 运行
+.working::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+  border-radius: 50%;
+  background-color: #2BFF82;
+}
+// 停止
+.cease::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+  border-radius: 50%;
+  background-color: #FF5353;
+}
+
+.ant-btn.primary-btn,
+.ant-btn.primary-btn:hover,
+.ant-btn.primary-btn:focus {
+  width: 88px;
+  height: 32px;
+  background: linear-gradient( 180deg, rgba(0,148,255,0) 0%, rgba(0,148,255,0.6) 100%);
+  border-radius: 2px 2px 2px 2px;
+  border: 1px solid #0094FF;
+  color: @text-color;
+}
+.ant-btn.danger-btn,
+.ant-btn.danger-btn:hover,
+.ant-btn.danger-btn:focus {
+  width: 88px;
+  height: 32px;
+  background: linear-gradient( 0deg, rgba(255,83,83,0.6) 00%, rgba(255,83,83,0) 100%);
+  border-radius: 2px 2px 2px 2px;
+  border: 1px solid #FF5353;
+  color: @text-color;
+}
\ No newline at end of file
diff --git a/src/assets/less/modifyLessVars.js b/src/assets/less/modifyLessVars.js
index f4a7ec6..54af57f 100644
--- a/src/assets/less/modifyLessVars.js
+++ b/src/assets/less/modifyLessVars.js
@@ -20,4 +20,8 @@ module.exports = {
   // 表格相关
   'table-selected-row-bg': 'rgba(0, 148, 255, 0.30)', // 勾选行背景色
   'table-expanded-row-bg': 'rgba(0, 148, 255, 0.10)', // 扩展行背景色
+
+  // 高度调整
+  'btn-height-base': '36px',
+  'input-height-base': '36px'
 }
diff --git a/src/assets/less/modifyLessVars.less b/src/assets/less/modifyLessVars.less
index f5633eb..a4ca526 100644
--- a/src/assets/less/modifyLessVars.less
+++ b/src/assets/less/modifyLessVars.less
@@ -1,3 +1,4 @@
+@primary-color: #0094FF;
 /* 背景色 */
 @component-background: #001B36;
 @background-color-base: #001B36AA;
@@ -18,4 +19,8 @@
 
 /* 表格相关 */
 @table-selected-row-bg: rgba(0, 148, 255, 0.30);
-@table-expanded-row-bg: rgba(0, 148, 255, 0.10);
\ No newline at end of file
+@table-expanded-row-bg: rgba(0, 148, 255, 0.10);
+
+/* 按钮 */
+@btn-height-base: 36px;
+@input-height-base: 36px;
\ No newline at end of file
diff --git a/src/components/CommonCard.vue b/src/components/CommonCard.vue
new file mode 100644
index 0000000..6a8f624
--- /dev/null
+++ b/src/components/CommonCard.vue
@@ -0,0 +1,78 @@
+<template>
+  <a-card :bordered="false" class="common-card">
+    <!--  标题  -->
+    <div slot="title" class="card-title"><slot name="title">{{ title }}</slot></div>
+    <!--  标题右侧  -->
+    <slot name="extra" slot="extra"></slot>
+    <!--  内容  -->
+    <slot></slot>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'CommonCard',
+  props: {
+    title: {
+      type: String,
+      default: '',
+      required: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@assets/less/common.less";
+.common-card {
+  height: 100%;
+  border-bottom: 1px @primary-color solid;
+
+  /deep/ .ant-card-head {
+    background-image: url("~@/assets/images/componentImg/header-bg-side.png"),
+    url("~@/assets/images/componentImg/header-bg-center.png"),
+    url("~@/assets/images/componentImg/header-bg-side.png");
+    background-repeat: no-repeat;
+    background-position: left, center, right;
+    background-size: 1px 100%, calc(100% - 2px) 100%, 1px 100%;
+    border: none;
+    min-height: 43px;
+    height: 43px;
+    padding: 0 16px;
+  }
+  /deep/ .ant-card-head-title {
+    padding: 0;
+    font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+    font-weight: bold;
+    font-size: 14px;
+    color: @text-color;
+    line-height: 36px;
+    text-shadow: 1px 1px 0 rgba(21,154,255,0.7), 1px 1px 0 #000000;
+  }
+  /deep/ .ant-card-head-title::before {
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background: url("~@/assets/images/componentImg/header-dot.png") no-repeat left center;
+    background-size: 100% 100%;
+  }
+  /deep/ .ant-card-body {
+    padding: 13px 20px 20px !important;
+  }
+  /deep/ .ant-card-extra {
+    padding: 0;
+  }
+}
+
+.card-title {
+  display: inline-block;
+  margin-left: 8px;
+  font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+  font-weight: bold;
+  font-size: 14px;
+  color: @text-color;
+  line-height: 16px;
+  text-shadow: 1px 1px 0px rgba(21,154,255,0.7), 1px 1px 0px #000000;
+}
+</style>
diff --git a/src/components/CommonCardInfo.vue b/src/components/CommonCardInfo.vue
new file mode 100644
index 0000000..9d5815c
--- /dev/null
+++ b/src/components/CommonCardInfo.vue
@@ -0,0 +1,42 @@
+<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-label" :title="item.label">{{ item.label }}</div>
+        <div 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-label" :title="item.label">{{ item.label }}</div>
+        <div class="info-value over-text" :title="item.value">{{ item.value }}</div>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+export default {
+  name: 'CommonCardInfo',
+  props: {
+    data: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  computed: {
+    leftData () {
+      return this.data.filter((item, index) => index % 2 === 0)
+    },
+    rightData () {
+      return this.data.filter((item, index) => index % 2 !== 0)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/ResponsiveChart.vue b/src/components/ResponsiveChart.vue
new file mode 100644
index 0000000..aea0924
--- /dev/null
+++ b/src/components/ResponsiveChart.vue
@@ -0,0 +1,165 @@
+<template>
+  <!-- v-if配合使用需要加上组件内唯一key,否则可能不会销毁 -->
+  <div :style="{ width, height, overflow: showNotData ? 'hidden' : 'visible' }" class="outside">
+    <!--  响应式的echarts-->
+    <div :class="bordered ? 'chart-border' : ''" :style="{ width: '100%', height }">
+<!--      <common-empty v-if="showNotData" class="inside"/>-->
+      <a-list :data-source="[]" v-if="showNotData" class="inside" />
+      <div ref="myChart" style="width: 100%; height: 100%;"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import debounce from 'lodash/debounce'
+// import { exportChart } from '@/utils/demand/charts'
+
+export default {
+  name: 'ResponsiveChart',
+  // components: { CommonEmpty },
+  props: {
+    width: {
+      type: String,
+      required: false,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      required: true
+    },
+    // 禁用自动初始化（手动调用initMyChart初始化）
+    disabledAutoInit: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * 绑定事件的属性
+     * 格式：[{ eventType: '', eventFn: () => {} }]
+     * eventType - echarts支持的事件类型 如 click
+     * eventFn - 事件回调函数
+     */
+    bindEventOption: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    // 是否需要边框
+    bordered: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      // 是否有数据
+      showNotData: true,
+      myChart: null,
+      // 重置大小防抖的方法(防抖返回的新函数，保存用于注销)
+      updateMyChartSizeDebounce: null
+    }
+  },
+  // 挂载后绑定监听事件 初始化实例
+  mounted () {
+    !this.disabledAutoInit && this.initMyChart()
+    this.updateMyChartSizeDebounce = debounce(this.updateMyChartSize, 300)
+    window.addEventListener('resize', this.updateMyChartSizeDebounce)
+    setTimeout(() => {
+      this.$nextTick(() => {
+        this.updateMyChartSize()
+      })
+    })
+  },
+  activated () {
+    console.log('actived')
+    this.updateMyChartSize()
+  },
+  // 销毁前取消监听事件 销毁实例
+  beforeDestroy () {
+    this.disposeMyChart()
+    window.removeEventListener('resize', this.updateMyChartSizeDebounce)
+  },
+  methods: {
+    // 初始化echarts实例
+    initMyChart () {
+      if (this.myChart) {
+        console.error('请勿重复初始化图表，如需重复请先销毁图表')
+        return
+      }
+      this.myChart = echarts.init(this.$refs.myChart)
+      // 绑定事件
+      if (this.bindEventOption.length) {
+        // 先遍历一遍确认数据正确
+        this.bindEventOption.forEach(item => {
+          if (!(item.eventType && item.eventFn && (item.eventFn instanceof Function))) {
+            throw new Error('ResponsiveChart 组件传入的 bindEventOption 数据格式错误')
+          }
+        })
+        // 进行事件绑定
+        this.bindEventOption.forEach(item => {
+          this.myChart.on(item.eventType, item.eventFn)
+        })
+      }
+    },
+    // 获取echarts实例
+    getMyChart () {
+      return this.myChart
+    },
+    // 更新echarts图表大小
+    updateMyChartSize () {
+      this.myChart && this.myChart.resize()
+    },
+    /**
+     * 更新echarts实例配置
+     * @param {Object} option - echarts配置对象
+     * @param {boolean} [notMerge=true] - 是否不合并之前的数据
+     */
+    updateMyChartOption (option = {}, notMerge = true) {
+      console.log('update option:', option)
+      this.myChart && this.myChart.setOption(option, notMerge)
+      this.showNotData = !Object.keys(option).length
+    },
+    // 销毁echarts实例
+    disposeMyChart () {
+      this.myChart && this.myChart.dispose()
+      this.myChart = null
+    },
+    // 导出
+    exportChartPng (filename) {
+      const dataURL = this.myChart.getDataURL()
+      this.downloadChart(dataURL, filename)
+      return dataURL
+    },
+    // 下载
+    downloadChart (dataURL, fileName) {
+      const link = document.createElement('a')
+      link.style.display = 'none'
+      link.href = dataURL
+      link.setAttribute('download', fileName + '.png')
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+// 暂无数据居中效果
+.outside {
+  position: relative;
+}
+.inside {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.chart-border {
+  padding: 20px;
+  border: 1px solid #E5E6EB;
+  border-radius: 8px;
+}
+</style>
diff --git a/src/components/tools/UserMenu.vue b/src/components/tools/UserMenu.vue
index 48425fe..6f68479 100644
--- a/src/components/tools/UserMenu.vue
+++ b/src/components/tools/UserMenu.vue
@@ -2,7 +2,10 @@
   <div class="user-wrapper" :class="theme">
     <span class="action">
       <a class="logout_title" target="_blank" href="#">
-        <a-icon type="question-circle-o"></a-icon> 帮助
+        <div class="operate" title="帮助">
+          <img :src="require(`@assets/images/icon/help.png`)" alt="help" class="operate-img">
+          <span class="operate-text">帮助</span>
+        </div>
       </a>
     </span>
 <!--    <header-notice class="action"/>-->
@@ -18,7 +21,10 @@
 <!--    </span>-->
     <a-dropdown>
       <span class=" small-action">
-        <a-icon type="user"></a-icon><span v-if="isDesktop()"> {{ nickname() }}</span>
+        <div class="operate" :title="nickname()">
+          <img :src="require(`@assets/images/icon/user.png`)" alt="user" class="operate-img">
+          <span v-if="isDesktop()" class="operate-text">{{ nickname() }}</span>
+        </div>
       </span>
       <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
 <!--        <a-menu-item key="0">-->
@@ -255,6 +261,7 @@ export default {
   /* update-begin author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
 
   .user-wrapper {
+    height: 48px;
     color: @primary-color;
   }
   .user-wrapper .search-input {
@@ -287,4 +294,30 @@ export default {
     color: inherit;
     text-decoration: none;
   }
+  .operate {
+    display: flex;
+    align-items: center;
+    font-size: 0;
+    height: 48px;
+
+    .operate-img {
+      width: 20px;
+    }
+    .operate-text {
+      font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+      font-weight: bold;
+      font-size: 16px;
+      color: @primary-color;
+      line-height: 20px;
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
+      margin-left: 8px;
+      max-width: 100px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-break: break-all;
+    }
+  }
 </style>
diff --git a/src/main.js b/src/main.js
index 765298d..769e70e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -71,7 +71,9 @@ Viewer.setDefaults({
   title: false,
   toolbar: false
 })
-
+Vue.prototype.global = {
+  emptyLine: '—'
+}
 SSO.init(() => {
   main()
 })
diff --git a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
index 7488854..659b46f 100644
--- a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
+++ b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
@@ -1,13 +1,864 @@
 <template>
-  <div>1</div>
+  <a-spin :spinning="loading">
+    <!-- 查询区域 -->
+    <div class="mb-20">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row type="flex">
+          <a-col flex="auto">
+            <a-form-item label="油井">
+              <a-select class="search-input" v-model="queryParam.wellSite" placeholder="请选择所属井场">
+                <a-select-option v-for="item in wellSiteList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
+              </a-select>
+              <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>
+              <span class="search-operate-btns">
+                <a-button class="search-btn" type="primary" @click="searchQuery">
+                  <img :src="require('@assets/images/icon/search.png')" alt="查询" class="search-btn-icon">
+                  <span class="search-btn-text">查询</span>
+                </a-button>
+              </span>
+            </a-form-item>
+          </a-col>
+          <a-col flex="220px">
+<!--            <a-input-search placeholder="请输入井口名称" v-model="queryParam.phone" class="search-input" />-->
+            <a-input class="search-input" placeholder="请输入井口名称" v-model="queryParam.phone">
+              <span slot="suffix" class="input-search-suffix" @click="searchQuery">
+                <img :src="require('@assets/images/icon/search-primary.png')" alt="查询">
+              </span>
+            </a-input>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <a-row :gutter="20" type="flex" class="mb-20">
+      <a-col :xl="12" :xxl="6">
+        <div class="flex-column">
+          <div class="mb-20">
+            <common-card title="油井基础信息">
+              <common-card-info :data="data.oilWells || []"/>
+            </common-card>
+          </div>
+          <div>
+            <common-card title="含水和动液面">
+              <common-card-info :data="data.waterContentAndDynamicLiquidLevel || []"/>
+            </common-card>
+          </div>
+        </div>
+      </a-col>
+      <a-col :xl="12" :xxl="6">
+        <common-card title="油井实时参数">
+          <common-card-info :data="data.oilWellsRealTimeParameters || []"/>
+        </common-card>
+      </a-col>
+      <a-col :xl="12" :xxl="6">
+        <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 :data="data.oilWellProductionData || []"/>
+        </common-card>
+      </a-col>
+      <a-col :xl="12" :xxl="6">
+        <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>
+            </div>
+          </div>
+          <div class="working-status-container">
+            <div class="working-status-title">名称：华h62-1</div>
+            <div class="working-status-img">
+              <img :src="isWorking ? working : suspend" alt="油井工作状态">
+            </div>
+            <div class="working-status-btns">
+              <a-button class="primary-btn">远程启井</a-button>
+              <a-button class="danger-btn">远程停井</a-button>
+              <a-button class="primary-btn">频率控制</a-button>
+            </div>
+          </div>
+        </common-card>
+      </a-col>
+    </a-row>
+    <a-row :gutter="20" type="flex" class="mb-20">
+      <a-col :xl="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">
+              <span class="info-label">冲程</span>
+              <span class="info-value">3.06m</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>
+          </div>
+          <responsive-chart ref="indicatorDiagram" key="indicatorDiagram" height="200px"/>
+        </common-card>
+      </a-col>
+      <a-col :xl="8">
+        <common-card title="功图计产监控">
+          <responsive-chart ref="productionMonitoring" key="productionMonitoring" height="200px"/>
+        </common-card>
+      </a-col>
+      <a-col :xl="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>-->
+
+<!--        <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 class='mb-20'>
+
+      <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">
+          <a @click="handleConfirm(record)" class="confirm mr-10">确认</a>
+          <a @click="handleShow(record)" class="show">查看</a>
+        </span>
+      </a-table>
+
+      <a-table
+        bordered
+        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:' class='all-alarms'></a>
+        </div>
+      </a-table>
+    </div>
+  </a-spin>
 </template>
 
 <script>
+import CommonCard from '@comp/CommonCard'
+import CommonCardInfo from '@comp/CommonCardInfo'
+import ResponsiveChart from '@comp/ResponsiveChart'
+import * as echarts from 'echarts'
 export default {
-  name: 'WellheadDataMonitoring'
+  name: 'WellheadDataMonitoring',
+  components: { ResponsiveChart, CommonCardInfo, CommonCard },
+  data () {
+    return {
+      // 是否工作中
+      isWorking: true,
+      // 工作中图片
+      suspend: require('@/assets/images/systemOverview/wellheadDataMonitoring/suspend.gif'),
+      // 暂停中图片
+      working: require('@/assets/images/systemOverview/wellheadDataMonitoring/working.gif'),
+      loading: false,
+      queryParam: {},
+      wellSiteList: [],
+      singleWellList: [],
+      columns: [
+        {
+          dataIndex: 'a',
+          title: '报警时间',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'b',
+          title: '恢复时间',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'c',
+          title: '报警设备',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'd',
+          title: '报警设备',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'e',
+          title: '报警描述',
+          align: 'center',
+          width: '20%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'f',
+          title: '报警类别',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'g',
+          title: '确认时间',
+          align: 'center',
+          width: '10%',
+          scopedSlots: { customRender: 'text' }
+        },
+        {
+          dataIndex: 'h',
+          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: new Array(10).fill(0).map((_, i) => ({ id: i + '' })),
+      data: {
+        oilWells: [
+          { label: '油井名称', value: '华H62-1' },
+          { label: '所属井场', value: '华H62井场' },
+          { label: '机采类型', value: '抽油机' },
+          { label: '开采层位', value: '长_7_2' },
+          { label: '井型', value: '水平井' },
+          { label: '投产日期', value: '2020-03-27' }
+        ],
+        waterContentAndDynamicLiquidLevel: [
+          { label: '实时含水', value: '11.1%' },
+          { label: '动液面套压', value: '1.55 MPa' },
+          { label: '小时含水率', value: '11.8%' },
+          { label: '动液面声速', value: '370 m/s' },
+          { label: '24小时含水率', value: '12.3%' },
+          { label: '动液面声速', value: '96 m' }
+        ],
+        oilWellsRealTimeParameters: [
+          { label: '油压', value: '1.7 MPa' },
+          { label: '套压', value: '1.7 MPa' },
+          { label: 'A相电流', value: '18.51 A' },
+          { label: 'A相电压', value: '217.2 V' },
+          { label: 'B相电流', value: '15.85 A' },
+          { label: 'B相电压', value: '215.1 V' },
+          { label: 'C相电流', value: '16.46 A' },
+          { label: 'C相电压', value: '215.6 V' },
+          { label: '有功功率', value: '8.07 KW' },
+          { 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: [
+          { 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: '57 mm' },
+          { label: '备注', value: '----' },
+          { label: '泵效', value: '20.05%' }
+
+        ]
+      }
+    }
+  },
+  mounted () {
+    this.initIndicatorDiagram()
+    this.initProductionMonitoring()
+    this.initLoadDistribution()
+  },
+  methods: {
+    searchQuery () {
+
+    },
+    searchReset () {
+
+    },
+    handleConfirm () {
+
+    },
+    handleShow () {
+
+    },
+    // 初始化 实时示功图
+    initIndicatorDiagram () {
+      this.$refs.indicatorDiagram.updateMyChartOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+            // type: 'cross',
+            // label: {
+            //   backgroundColor: '#6a7985'
+            // }
+          }
+        },
+        legend: {
+          data: ['上冲程', '下冲程'],
+          align: 'left',
+          width: '80%',
+          top: 0,
+          right: 0,
+          itemHeight: 2,
+          itemWidth: 12,
+          itemGap: 16,
+          textStyle: {
+            color: 'rgba(255,255,255,0.96)'
+          }
+        },
+        grid: {
+          top: '30px',
+          left: '0px',
+          right: '10px',
+          bottom: '0px',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            name: '单位(m)',
+            nameLocation: 'end',
+            nameTextStyle: {
+              color: '#6C8097',
+              align: 'right',
+              verticalAlign: 'top',
+              padding: [8, 4, 0, 0]
+            },
+            data: [0, 25, 50, 75, 100, 125, 150, 175, 200, 250, 300],
+            boundaryGap: false,
+            // 刻度线不显示
+            axisTick: {
+              show: false
+            },
+            // 轴标签样式
+            axisLabel: {
+              color: '#86909C',
+              hideOverlap: true,
+              showMinLabel: false,
+              showMaxLabel: false
+            },
+            // 轴线样式
+            axisLine: {
+              lineStyle: {
+                color: '#19314B'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '载荷(KN)',
+            // 名称样式
+            nameTextStyle: {
+              color: '#6C8097',
+              padding: [0, 0, 0, 10]
+            },
+            // 轴标签样式
+            axisLabel: {
+              color: '#6C8097'
+            },
+            // 轴线样式
+            splitLine: {
+              lineStyle: {
+                color: '#152F49',
+                type: 'dashed'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '上冲程',
+            type: 'line',
+            stack: 'upStroke',
+            emphasis: {
+              focus: 'series'
+            },
+            color: '#FF5353',
+            symbol: 'none',
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(255,83,83,0.2)' },
+                { offset: 1, color: 'rgba(255,83,83,0)' }
+              ])
+            },
+            data: [40, 42, 25, 40, 42, 37, 39, 58, 42, 37, 40]
+          },
+          {
+            name: '下冲程',
+            type: 'line',
+            stack: 'downStroke',
+            emphasis: {
+              focus: 'series'
+            },
+            color: '#0094FF',
+            symbol: 'none',
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(0,148,255,0.2)' },
+                { offset: 1, color: 'rgba(0,148,255,0)' }
+              ])
+            },
+            data: [40, 25, 40, 50, 40, 60, 80, 45, 40, 50, 40]
+          }
+        ]
+      })
+    },
+    // 初始化 功图计产监控
+    initProductionMonitoring () {
+      this.$refs.productionMonitoring.updateMyChartOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+            // type: 'cross',
+            // label: {
+            //   backgroundColor: '#6a7985'
+            // }
+          }
+        },
+        legend: {
+          data: ['产油量(t/d)', '产液量(m³/d)'],
+          align: 'left',
+          width: '80%',
+          top: 0,
+          right: 0,
+          itemHeight: 2,
+          itemWidth: 12,
+          itemGap: 16,
+          textStyle: {
+            color: 'rgba(255,255,255,0.96)'
+          }
+        },
+        grid: {
+          top: '30px',
+          left: '0px',
+          right: '10px',
+          bottom: '0px',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['01-31', '02-10', '02-15', '02-20', '02-25', '03-01'],
+            boundaryGap: false,
+            // 刻度线不显示
+            axisTick: {
+              show: false
+            },
+            // 轴标签样式
+            axisLabel: {
+              color: '#86909C',
+              hideOverlap: true
+              // showMinLabel: false,
+              // showMaxLabel: false
+            },
+            // 轴线样式
+            axisLine: {
+              lineStyle: {
+                color: '#19314B'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '产油量(t/d) / 产液量(m³/d)',
+            // 名称样式
+            nameTextStyle: {
+              color: '#6C8097',
+              padding: [0, 0, 0, 110]
+            },
+            // 轴标签样式
+            axisLabel: {
+              color: '#6C8097'
+            },
+            // 轴线样式
+            splitLine: {
+              lineStyle: {
+                color: '#152F49',
+                type: 'dashed'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '产油量(t/d)',
+            type: 'line',
+            stack: 'oilProduction',
+            color: '#2EE4FD',
+            symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII=',
+            symbolSize: 15,
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(46,228,253,0.2)' },
+                { offset: 1, color: 'rgba(46,228,253,0)' }
+              ])
+            },
+            data: [40, 42, 25, 40, 42, 37]
+          },
+          {
+            name: '产液量(m³/d)',
+            type: 'line',
+            stack: 'liquidProduction',
+            color: '#0094FF',
+            symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII=',
+            symbolSize: 15,
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(0,148,255,0.2)' },
+                { offset: 1, color: 'rgba(0,148,255,0)' }
+              ])
+            },
+            data: [40, 25, 40, 50, 40, 60]
+          }
+        ]
+      })
+    },
+    // 初始化 载荷分布图
+    initLoadDistribution () {
+      this.$refs.loadDistribution.updateMyChartOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+            // type: 'cross',
+            // label: {
+            //   backgroundColor: '#6a7985'
+            // }
+          }
+        },
+        legend: {
+          data: ['最大载荷(KN)', '最小载荷(KN)'],
+          align: 'left',
+          width: '80%',
+          top: 0,
+          right: 0,
+          itemHeight: 2,
+          itemWidth: 12,
+          itemGap: 16,
+          textStyle: {
+            color: 'rgba(255,255,255,0.96)'
+          }
+        },
+        grid: {
+          top: '30px',
+          left: '0px',
+          right: '10px',
+          bottom: '0px',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: [0.5, 1, 1, 1.5, 2, 2.5, 3],
+            boundaryGap: false,
+            // 刻度线不显示
+            axisTick: {
+              show: false
+            },
+            // 轴标签样式
+            axisLabel: {
+              color: '#86909C',
+              hideOverlap: true
+              // showMinLabel: false,
+              // showMaxLabel: false
+            },
+            // 轴线样式
+            axisLine: {
+              lineStyle: {
+                color: '#19314B'
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: '载荷(KN)',
+            // 名称样式
+            nameTextStyle: {
+              color: '#6C8097',
+              padding: [0, 0, 0, 10]
+            },
+            // 轴标签样式
+            axisLabel: {
+              color: '#6C8097'
+            },
+            // 轴线样式
+            splitLine: {
+              lineStyle: {
+                color: '#152F49',
+                type: 'dashed'
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '最大载荷(KN)',
+            type: 'line',
+            stack: 'maxLoad',
+            color: '#FF5353',
+            data: [40, 42, 25, 40, 42, 37, 10]
+          },
+          {
+            name: '最小载荷(KN)',
+            type: 'line',
+            stack: 'minLoad',
+            color: '#FFC97A',
+            data: [40, 25, 40, 50, 40, 60, 20]
+          }
+        ]
+      })
+    }
+  }
 }
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+@import "~@/assets/less/modifyLessVars.less";
+.search-operate-btns {
+  margin-left: 32px;
+}
+.search-input {
+  width: 220px;
+}
 
+.flex-column {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  & > div {
+    flex: auto;
+  }
+}
+
+.pump-type {
+  position: relative;
+  background-image: url("~@assets/images/systemOverview/wellheadDataMonitoring/pump-type-bg.png");
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: left;
+  height: 84px;
+  width: 364px;
+  margin: 0 auto 20px;
+
+  &-title {
+    position: absolute;
+    left: 88px;
+    top: 18px;
+    font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
+    font-weight: 400;
+    font-size: 15px;
+    color: rgba(255,255,255,0.96);
+    line-height: 18px;
+  }
+  &-remarks {
+    position: absolute;
+    left: 88px;
+    top: 50px;
+    font-family: Rubik, Rubik, sans-serif;
+    font-weight: 400;
+    font-size: 12px;
+    color: #D0DEEE;
+    line-height: 14px;
+  }
+}
+
+// 工作状态相关样式
+.working-status-container {
+  height: 100%;
+
+  .working-status-title {
+    background-size: 124px 16px;
+    background: url("~@/assets/images/text-bg.png") no-repeat 0 6px;
+    font-family: DingTalk JinBuTi, DingTalk JinBuTi, sans-serif;
+    font-weight: 400;
+    font-size: 15px;
+    color: rgba(255,255,255,0.96);
+    line-height: 18px;
+    padding-left: 4px;
+  }
+
+  .working-status-img {
+    height: 178px;
+    font-size: 0;
+    text-align: center;
+    margin: 12px auto 18px;
+
+    img {
+      height: 100%;
+    }
+  }
+
+  .working-status-btns {
+    display: flex;
+    justify-content: center;
+
+    button:not(:last-child) {
+      margin-right: 16px;
+    }
+  }
+}
+
+// 实时示功图头部
+.indicator-diagram-extra {
+
+  .info-row .info-label,
+  .info-row .info-value,
+  .time {
+    font-family: Rubik, Rubik, sans-serif;
+    font-weight: 400;
+    font-size: 13px;
+    color: #D0DEEE;
+    line-height: 15px;
+  }
+
+  .info-row .info-value {
+    color: #2EE4FD;
+  }
+  .divider-vertical {
+    width: 1px;
+    height: 12px;
+    background: rgba(108,128,151,0.3);
+    margin: 0 12px;
+    display: inline-block;
+  }
+}
+
+// 表格样式
+
+// 表头字体
+/deep/ .ant-table-thead tr > th {
+  font-family: Alimama ShuHeiTi, Alimama ShuHeiTi, sans-serif;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 20px;
+}
+// 表头边框错位
+/deep/ .ant-table-fixed-header .ant-table-scroll .ant-table-header {
+  margin-right: -11px;
+}
+// 确认
+.confirm,
+.confirm:hover {
+  color: #2BFF82;
+}
+// 查看
+.show,
+.show:hover {
+  color: #2EE4FD;
+}
+.action-batch  {
+  height: 100px;
+}
+.all-alarms {
+  position: absolute;
+  top: 40px;
+  left: 50%;
+  transform: translate(-50%, -30%);
+  display: inline-block;
+  width: 40px;
+  height: 100px;
+  background: url("~@/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png");
+}
 </style>