diff --git a/src/utils/charts.js b/src/utils/charts.js
new file mode 100644
index 0000000..784513d
--- /dev/null
+++ b/src/utils/charts.js
@@ -0,0 +1,199 @@
+// 折线图点base64
+export const lineSymbolBase64 = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAdhJREFUOE+tlEFLVGEUhp/TrbTRUcPFjMVkSQQuIig0C4I2Qi36Aa76G25cufFvtOoHtEncuEgqSyFcuCjKGquZTWUOU5nXY+94vhjCaRF98HG58H3Pfc973nON/7CsneHuetc+DQwBg8BRYAfYAqpAzczy9nt/QnqBceAnsBEXBTgGnASGgQx4bmaNBPoNcXcBrgFvgA9xWBd0xoE9YBc4BZwDHidQC+LuOnwD2JRcoAs4HqUkiNRJlXYZOAMsmtlegsiDEWA1ACeAQoCOhIofwHegGc8rKtnMqgkyESV8AXqA3lqT89VtZnO4lMF6pch0ucBLYDtAA1JkZssJcgtYCvnypu9Znfu5czGZlxkrYyXuAl8BmaoOXTezhwlyB1gAVEaf9pM6q3irvQfL2J0ocTkgAn379eFJM3uQILdDiQxOSu7ljupurcxYGysx1aZEnZKS+QS5Gp4oUDJUnlyoNpjLndEMXlSKzJQLvIpSVI5yM2RmTxOkApwFVoDuAOmpVv+tO6/N7H2C6OBN4F3kRBkRQJ50yoli8Ugj0CmxHw9JrLrRObHJPHcvQstMXXgLfI45kqr+mB3N0fKhs9MGUocUa/mkiypNCj4BUripqHec4n/9tewDCYOsEgwJGJUAAAAASUVORK5CYII='
+const styleObj = {
+  // x轴颜色
+  xAxisLineColor: 'rgba(108,128,151,0.4)',
+  // x轴文字颜色
+  xAxisFontColor: '#86909C',
+  // y轴文字颜色
+  yAxisFontColor: '#6C8097',
+  // 图例文字颜色
+  legendFontColor: 'rgba(255, 255, 255, 0.96)'
+}
+// 公共配置
+export function generateBaseOption () {
+  return {
+    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: styleObj.legendFontColor
+      }
+    },
+    grid: {
+      top: '30px',
+      left: '0px',
+      right: '10px',
+      bottom: '0px',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        // name: '',
+        // nameLocation: 'end',
+        // nameTextStyle: {
+        //   color: '#6C8097',
+        //   align: 'right',
+        //   verticalAlign: 'top',
+        //   padding: [8, 4, 0, 0]
+        // },
+        data: [], // 横坐标
+        boundaryGap: false,
+        // 刻度线不显示
+        axisTick: {
+          show: false
+        },
+        // 轴标签样式
+        axisLabel: {
+          color: styleObj.xAxisFontColor,
+          hideOverlap: true,
+          showMinLabel: false,
+          showMaxLabel: false
+        },
+        // 轴线样式
+        axisLine: {
+          lineStyle: {
+            color: styleObj.xAxisLineColor
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '',
+        // 名称样式
+        nameTextStyle: {
+          color: styleObj.yAxisFontColor
+        // padding: [0, 0, 0, 5] // 根据情况调整
+        },
+        // 轴标签样式
+        axisLabel: {
+          color: styleObj.yAxisFontColor
+        },
+        // 轴线样式
+        splitLine: {
+          lineStyle: {
+            color: styleObj.xAxisLineColor,
+            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: data['上冲程']
+//     },
+//     {
+//       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: data['下冲程']
+//     }
+//   ]
+// }
+// {
+//   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: data.oilProduction
+//     },
+//     {
+//       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: data.liquidProduction
+//     }
+//   ]
+// }
+// {
+//   series: [
+//     {
+//       name: '最大载荷(KN)',
+//       type: 'line',
+//       stack: 'maxLoad',
+//       color: '#FF5353',
+//       symbol: 'none',
+//       data: data['最大载荷']
+//     },
+//     {
+//       name: '最小载荷(KN)',
+//       type: 'line',
+//       stack: 'minLoad',
+//       color: '#FFC97A',
+//       symbol: 'none',
+//       data: data['最小载荷']
+//     }
+//   ]
+// }
diff --git a/src/views/systemOverview/systemSettings/SystemSettings.vue b/src/views/systemOverview/systemSettings/SystemSettings.vue
index b54931f..fca3852 100644
--- a/src/views/systemOverview/systemSettings/SystemSettings.vue
+++ b/src/views/systemOverview/systemSettings/SystemSettings.vue
@@ -65,10 +65,9 @@
               <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
+                      'tag-blue width-76': record.userType === userType.admin.value,
+                      'tag-cyan width-76': record.userType === userType.common.value
                 }">{{ text || text === 0 ? text : global.emptyLine }}</div>
               </a-tooltip>
             </template>
@@ -160,10 +159,9 @@
               <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
+                      'tag-blue width-118': text === msgType.hostToDevice.label,
+                      'tag-cyan width-118': text === msgType.deviceToHost.label
                 }">{{ text || text === 0 ? text : global.emptyLine }}</div>
               </a-tooltip>
             </template>
@@ -562,4 +560,10 @@ export default {
     }
   }
 }
+.width-118 {
+  width: 118px;
+}
+.width-76 {
+  width: 76px;
+}
 </style>
diff --git a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
index 6c528f8..a7266a0 100644
--- a/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
+++ b/src/views/systemOverview/wellheadDataMonitoring/WellheadDataMonitoring.vue
@@ -129,32 +129,54 @@
         </a-col>
       </a-row>
       <div>
-        <a-table
-          style="width: calc(100% - 100px);display: inline-block;"
-          bordered
-          ref="leftTable"
-          size="middle"
-          rowKey="id"
-          :scroll="{y:120}"
-          :columns="columns"
-          :dataSource="dataSource"
-          :pagination="false">
-          <template slot="text" slot-scope="text">
-            <a-tooltip>
-              <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
-              <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
-            </a-tooltip>
-          </template>
+        <div class="left-table">
+          <a-table
+            bordered
+            ref="leftTable"
+            size="middle"
+            rowKey="id"
+            :scroll="{y:120}"
+            :columns="columns"
+            :dataSource="dataSource"
+            :pagination="false">
+            <template slot="text" slot-scope="text">
+              <a-tooltip>
+                <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+                <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+              </a-tooltip>
+            </template>
 
-          <span slot="action" slot-scope="text, record">
-          <a @click="handleConfirm(record)" :disabled="record.disabledConfirm" class="confirm mr-10">确认</a>
-          <a @click="handleShow(record)" class="show">查看</a>
-        </span>
-        </a-table>
+            <span slot="action" slot-scope="text, record">
+              <a @click="handleConfirm(record)" :disabled="record.disabledConfirm" class="confirm mr-10">确认</a>
+              <a @click="handleShow(record)" class="show">查看</a>
+            </span>
+          </a-table>
+          <!-- 左侧表格的滚动条 -->
+          <div class="left-table-scrollbar">
+            <a-table
+              bordered
+              class="border-table"
+              ref="borderTable"
+              size="middle"
+              rowKey="id"
+              :showHeader='false'
+              :scroll="{y:120}"
+              :columns="[columns[0]]"
+              :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>
+            </a-table>
+          </div>
+        </div>
+        <!-- 右侧固定表格 -->
         <a-table
           bordered
           class="right-fixed-table"
-          style='display: inline-block; width: 100px'
           ref="rightTable"
           size="middle"
           rowKey="id"
@@ -182,6 +204,7 @@ import * as echarts from 'echarts'
 import { getOilWellRealTimeData, getWellheadList } from '@api/systemOverview'
 import { wellheadType } from '@/enums/commonEnums'
 import CommonEmpty from '@comp/CommonEmpty'
+import { generateBaseOption, lineSymbolBase64 } from '@/utils/charts'
 
 // 默认写死数据
 const staticData = {
@@ -317,6 +340,15 @@ const staticMonitoringChart = {
   liquidProduction: [40, 25, 40, 50, 40, 60]
 }
 
+// 左侧表格和滚动条表格dom和滚动事件
+let borderTable = null
+let leftTable = null
+const borderTableScroll = (e) => {
+  leftTable.scrollTop = e.target.scrollTop
+}
+const leftTableScroll = (e) => {
+  borderTable.scrollTop = e.target.scrollTop
+}
 export default {
   name: 'WellheadDataMonitoring',
   components: { CommonEmpty, ResponsiveChart, CommonCardInfo, CommonCard },
@@ -501,10 +533,22 @@ export default {
   },
   mounted () {
     this.searchQuery()
+    this.$nextTick(() => {
+      /* 处理左侧表格滚动两个表格滚动同步 begin */
+      // 还原UI图：左侧两个表格，其中一个只显示滚动条，任意一个滚动，两个表格双向绑定滚动事件
+      borderTable = this.$refs.borderTable.$el.querySelector('.ant-table-body')
+      leftTable = this.$refs.leftTable.$el.querySelector('.ant-table-body')
+      borderTable.addEventListener('scroll', borderTableScroll)
+      leftTable.addEventListener('scroll', leftTableScroll)
+      /* 处理左侧表格滚动两个表格滚动同步 end */
+    })
   },
   beforeDestroy () {
     // 离开页面前清除定时器
     clearInterval(this.timer)
+    // 离开时清除事件
+    borderTable.remove('scroll', borderTableScroll)
+    leftTable.remove('scroll', leftTableScroll)
   },
   methods: {
     searchQuery () {
@@ -581,130 +625,47 @@ export default {
         this.$refs.productionMonitoring.updateMyChartOption()
         return
       }
-      this.$refs.indicatorDiagram && 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: data['X轴'],
-            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, 5]
-            },
-            // 轴标签样式
-            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: data['上冲程']
+      // 获取基础配置
+      const legendData = ['上冲程', '下冲程']
+      const option = generateBaseOption()
+      option.legend.data = legendData
+      option.xAxis.data = data['X轴']
+      option.yAxis[0].name = '载荷(KN)'
+      option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
+      option.series = [
+        {
+          name: legendData[0],
+          type: 'line',
+          stack: 'upStroke',
+          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)' }
+            ])
           },
-          {
-            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: data['下冲程']
-          }
-        ]
-      })
+          data: data['上冲程']
+        },
+        {
+          name: legendData[1],
+          type: 'line',
+          stack: 'downStroke',
+          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: data['下冲程']
+        }
+      ]
+      // 设置数据
+      this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption(option)
     },
     // 初始化 功图计产监控
     initProductionMonitoring (data) {
@@ -717,119 +678,49 @@ export default {
         this.$refs.productionMonitoring.updateMyChartOption()
         return
       }
-      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: data.xAxis,
-            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',
-              align: 'center',
-              padding: [0, 0, 0, 105]
-            },
-            // 轴标签样式
-            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: data.oilProduction
+      // 获取基础配置
+      const legendData = ['产油量(t/d)', '产液量(m³/d)']
+      const option = generateBaseOption()
+      option.legend.data = legendData
+      option.xAxis.data = data['X轴']
+      option.yAxis[0].name = '产油量(t/d) / 产液量(m³/d)'
+      option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 105]
+      option.series = [
+        {
+          name: legendData[0],
+          type: 'line',
+          stack: 'oilProduction',
+          color: '#2EE4FD',
+          symbol: lineSymbolBase64,
+          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)' }
+            ])
           },
-          {
-            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: data.liquidProduction
-          }
-        ]
-      })
+          data: data.oilProduction
+        },
+        {
+          name: legendData[1],
+          type: 'line',
+          stack: 'liquidProduction',
+          color: '#0094FF',
+          symbol: lineSymbolBase64,
+          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: data.liquidProduction
+        }
+      ]
+      // 设置数据
+      this.$refs.productionMonitoring.updateMyChartOption(option)
     },
     // 初始化 载荷分布图
     initLoadDistribution (data) {
@@ -842,102 +733,33 @@ export default {
         this.$refs.productionMonitoring.updateMyChartOption()
         return
       }
-      this.$refs.loadDistribution && this.$refs.loadDistribution.updateMyChartOption({
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
-            // type: 'cross',
-            // label: {
-            //   backgroundColor: '#6a7985'
-            // }
-          }
+      // 获取基础配置
+      const legendData = ['最大载荷(KN)', '最小载荷(KN)']
+      const option = generateBaseOption()
+      option.legend.data = legendData
+      option.xAxis.data = data['X轴']
+      option.yAxis[0].name = '载荷(KN)'
+      option.yAxis[0].nameTextStyle.padding = [0, 0, 0, 5]
+      option.series = [
+        {
+          name: legendData[0],
+          type: 'line',
+          stack: 'maxLoad',
+          color: '#FF5353',
+          symbol: 'none',
+          data: data['最大载荷']
         },
-        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: data['X轴'],
-            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, 5]
-            },
-            // 轴标签样式
-            axisLabel: {
-              color: '#6C8097'
-            },
-            // 轴线样式
-            splitLine: {
-              lineStyle: {
-                color: '#152F49',
-                type: 'dashed'
-              }
-            }
-          }
-        ],
-        series: [
-          {
-            name: '最大载荷(KN)',
-            type: 'line',
-            stack: 'maxLoad',
-            color: '#FF5353',
-            symbol: 'none',
-            data: data['最大载荷']
-          },
-          {
-            name: '最小载荷(KN)',
-            type: 'line',
-            stack: 'minLoad',
-            color: '#FFC97A',
-            symbol: 'none',
-            data: data['最小载荷']
-          }
-        ]
-      })
+        {
+          name: legendData[1],
+          type: 'line',
+          stack: 'minLoad',
+          color: '#FFC97A',
+          symbol: 'none',
+          data: data['最小载荷']
+        }
+      ]
+      // 设置数据
+      this.$refs.loadDistribution && this.$refs.loadDistribution.updateMyChartOption(option)
     },
     // 油井工作状态
     handleChangeWorkingCondition (status) {
@@ -1115,7 +937,19 @@ export default {
   height: 100px;
   background: url("~@/assets/images/systemOverview/wellheadDataMonitoring/all-alarms-btn.png");
 }
+.left-table {
+  display: inline-block;
+  margin-right: -7px;
+  width: calc(100% - 100px);
+  position: relative;
+
+}
 .right-fixed-table {
+  display: inline-block;
+  box-shadow: -6px 0 12px -4px black;
+  position: relative;
+  z-index: 2;
+  width: 107px;
   /deep/ th {
     height: 40px;
     border-radius: 0;
@@ -1144,4 +978,26 @@ export default {
     }
   }
 }
+// 左侧表格的滚动条
+.left-table-scrollbar {
+  position: absolute;
+  right: 10px;
+  top: 40px;
+  bottom: 0;
+  width: 6px;
+  overflow: hidden;
+  .border-table {
+    position: absolute;
+    z-index: 3;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 10px;
+    // 仅用于滚动条的表格，去掉背景色
+    /deep/ .ant-table.ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body,
+    /deep/ .ant-table .ant-table-tbody {
+      background: transparent;
+    }
+  }
+}
 </style>