[update] echarts公共配置抽离，井口数据监控表格调整UI相同

2024-04-11 15:09:40 +08:00
parent b8de008598
commit cd6403dc8d
3 changed files with 417 additions and 358 deletions
@@ -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['最小载荷']
+//     }
+//   ]
+// }
@@ -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>
@@ -129,8 +129,8 @@
        </a-col>
      </a-row>
      <div>
+        <div class="left-table">
          <a-table
-          style="width: calc(100% - 100px);display: inline-block;"
            bordered
            ref="leftTable"
            size="middle"
@@ -151,10 +151,32 @@
              <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,99 +625,18 @@ 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: [
+      // 获取基础配置
+      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 = [
        {
-            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: '上冲程',
+          name: legendData[0],
          type: 'line',
          stack: 'upStroke',
-            emphasis: {
-              focus: 'series'
-            },
          color: '#FF5353',
          symbol: 'none',
          smooth: true,
@@ -686,12 +649,9 @@ export default {
          data: data['上冲程']
        },
        {
-            name: '下冲程',
+          name: legendData[1],
          type: 'line',
          stack: 'downStroke',
-            emphasis: {
-              focus: 'series'
-            },
          color: '#0094FF',
          symbol: 'none',
          smooth: true,
@@ -704,7 +664,8 @@ export default {
          data: data['下冲程']
        }
      ]
-      })
+      // 设置数据
+      this.$refs.indicatorDiagram && this.$refs.indicatorDiagram.updateMyChartOption(option)
    },
    // 初始化 功图计产监控
    initProductionMonitoring (data) {
@@ -717,91 +678,20 @@ 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: [
+      // 获取基础配置
+      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 = [
        {
-            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)',
+          name: legendData[0],
          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=',
+          symbol: lineSymbolBase64,
          symbolSize: 15,
          smooth: true,
          areaStyle: {
@@ -813,11 +703,11 @@ export default {
          data: data.oilProduction
        },
        {
-            name: '产液量(m³/d)',
+          name: legendData[1],
          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=',
+          symbol: lineSymbolBase64,
          symbolSize: 15,
          smooth: true,
          areaStyle: {
@@ -829,7 +719,8 @@ export default {
          data: data.liquidProduction
        }
      ]
-      })
+      // 设置数据
+      this.$refs.productionMonitoring.updateMyChartOption(option)
    },
    // 初始化 载荷分布图
    initLoadDistribution (data) {
@@ -842,86 +733,16 @@ 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'
-            // }
-          }
-        },
-        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: [
+      // 获取基础配置
+      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 = [
        {
-            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)',
+          name: legendData[0],
          type: 'line',
          stack: 'maxLoad',
          color: '#FF5353',
@@ -929,7 +750,7 @@ export default {
          data: data['最大载荷']
        },
        {
-            name: '最小载荷(KN)',
+          name: legendData[1],
          type: 'line',
          stack: 'minLoad',
          color: '#FFC97A',
@@ -937,7 +758,8 @@ export default {
          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>