井筒--拖拽列

vue/public/appconfig.json

@@ -1,5 +1,6 @@
 {
   "isDev": true,
   "SSOLoginUrl": "http://www.baidu.com",
-  "huabeiHost": "http://10.73.178.206:8077/"
+ /* //"huabeiHost": "http://10.73.178.206:8077/"*/
+  "huabeiHost": "http://192.168.0.68:8077/"
 }

vue/src/views/wellinfo/index.vue

@@ -262,20 +262,6 @@
                       @showSizeChange="(current,pageSize)=>handleTableChange({ current: current,pageSize: pageSize })"/>
       </a-spin>
       <div style="width:100%;height: 500px;margin-top:15px">
-
-        <!--        <draggable v-model="filterColumns" item-key="id">
-                  <template #item="{element}">
-                    <div> {{ element.title }}</div>
-                  </template>
-                </draggable>
-                <ul>
-                  <li v-for="(item,index) in filterColumns" draggable="true"
-                      @dragstart="dragStart(index)"
-                      @dragover.prevent="dragOver($event)"
-                      @dragenter.prevent @drop="dragEnter(index)">
-                    {{ item.title }}
-                  </li>
-                </ul>-->
         <ChartMap :datas="data"></ChartMap>
       </div>
     </div>
@@ -303,149 +289,23 @@
 </template>
 
 <script lang="ts">
-import {ref, defineComponent, reactive, computed, watch} from 'vue';
+import {ref, defineComponent, computed, watch} from 'vue';
 import type {FormInstance} from 'ant-design-vue';
 import {useRoute} from 'vue-router';
 import {get} from "@/api/common";
-import type {TableColumnsType} from "ant-design-vue";
-import dayjs from "dayjs";
 import {getPaginationTotalTitle} from "@/utils/common";
 import type {TableProps} from "ant-design-vue";
 import {useTabsViewStore} from "@/store/modules/tabsView";
 import ChartCell from '@/components/basic/chart/chart-cell.vue'
 import ChartMap from '@/components/basic/chart/chart-map.vue'
 import {download} from "@/utils/downloadFile";
-import type {GetComponentProps} from "ant-design-vue/lib/vc-table/interface";
+import {columns,filterColumns,formState,getTdColor} from './table'
 
 export default defineComponent({
   name: 'wellinfoindex',
   components: {ChartCell, ChartMap},
   setup() {
-    const state = reactive({
-      dragIndex: 0
-    });
-    const dragStart = (e) => {
-      e.stopPropagation();
-      state.dragIndex = parseInt(e.srcElement.attributes["colstart"].value);
-    }
-    const dragOver = (e) => {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "move";
-    }
-    const handleDrag = (e) => {
-      e.currentTarget.style.opacity = "0";
-    };
-    const dragEnd = (e) => {
-      e.currentTarget.style.opacity = "1";
-      state.dragIndex = -1;
-    };
-    const groupList = ['oil_prod_mon', 'oil_prod_year', 'oil', 'gas_prod_mon', 'gas_prod_year', 'gas', 'water_prod_mon', 'water_prod_year', 'water'];
-    const dragEnter = (e) => {
-      e.preventDefault();
-      console.log(e.srcElement.attributes["colstart"].value);
-      let index = parseInt(e.srcElement.attributes["colstart"].value);
-      if (state.dragIndex != -1 && state.dragIndex != index) {
-
-        let newItems = [...filterColumns.value];
-        const dragItem = filterColumns.value[state.dragIndex];
-        const dragKey = dragItem.key == undefined ? "" : dragItem.key.toString();
-
-        const moveItem = filterColumns.value[index];
-        const moveKey = moveItem.key == undefined ? "" : moveItem.key.toString();
-
-        if (state.dragIndex < index) {//右移
-          /*  let num1 = moveItem.key == 'oil_prod_mon' || dragItem.key == 'oil_prod_mon' ? 3 : 1;//如果是块的情况多移动两个列
-            let num2 = dragItem.key == 'oil_prod_mon' ? state.dragIndex : index;//块为起点还是放下点
-            let num3 = dragItem.key == 'oil_prod_mon' ?1:0;
-            let group = newItems.slice(num2, num2 + num1);
-            console.log(state.dragIndex,'dragIndex',index,'index',group);
-            newItems.splice(num2, num1);
-            newItems.splice(state.dragIndex+num3, 0, ...group);*/
-          let moveList = groupList;
-          if (!groupList.includes(moveKey)) {
-            moveList = [moveKey];
-          } else {
-            let star = groupList.indexOf(moveKey);
-            moveList = groupList.slice(star, star + 3);
-          }
-          let group = columns.filter(x => moveList.includes(x.key == undefined ? "" : x.key.toString()));
-          newItems = newItems.filter(x => !moveList.includes(x.key == undefined ? "" : x.key.toString()));
-          newItems.splice(state.dragIndex, 0, ...group);
-          //如果起始为块则需要减两列
-          //如果放下为块则要加两列
-          /* let shift = groupList.includes(moveKey) || groupList.includes(dragKey) ? 3 : 1;
-           index = (groupList.includes(dragKey) ? index - 2 + (groupList.includes(moveKey) ? 2 : 0) : state.dragIndex + shift);*/
-          if (!groupList.includes(dragKey)&&!groupList.includes(moveKey)){
-            index = state.dragIndex+ 1;
-          }
-          if (groupList.includes(dragKey)) {
-            index = index - 2;
-          }
-          if (groupList.includes(moveKey)) {
-            index = index + 2;
-          }
-          // index = index + (num1 - 1);
-          /* let oil = ['oil_prod_mon', 'oil_prod_year', 'oil'];
-           let group = newItems.filter(x => oil.includes(x.key == undefined ? "" : x.key.toString()));
-           newItems = newItems.filter(x => !oil.includes(x.key == undefined ? "" : x.key.toString()));
-           newItems.splice(state.dragIndex+1, 0, ...group); */
-        } else {//=左移
-
-          let moveList = groupList;
-          if (!groupList.includes(dragKey)) {
-            moveList = [dragKey];
-          } else {
-            let star = groupList.indexOf(dragKey);
-            moveList = groupList.slice(star, star + 3);
-          }
-          let group = columns.filter(x => moveList.includes(x.key == undefined ? "" : x.key.toString()));
-          newItems = newItems.filter(x => !moveList.includes(x.key == undefined ? "" : x.key.toString()));
-          newItems.splice(index, 0, ...group);
-          filterColumns.value = newItems;
-          //单个块可正常移动
-          /* let num1 = moveItem.key == 'oil_prod_mon' || dragItem.key == 'oil_prod_mon' ? 3 : 1;//如果是块的情况多移动两个列
-           let num2 = dragItem.key == 'oil_prod_mon' ? state.dragIndex : index;//块为起点还是放下点
-           let num3 = dragItem.key == 'oil_prod_mon' ? 0 : 1;
-           let group = newItems.slice(num2, num2 + num1);
-           newItems.splice(num2, num1);
-           newItems.splice(index + num3, 0, ...group);*/
-        }
 
-        /*if (moveItem.key == 'oil_prod_mon' || dragItem.key == "oil_prod_mon") {
-          if (state.dragIndex < index) {//右移
-            let group = newItems.slice(index, index + 3);
-            newItems.splice(index, 3);
-            newItems.splice(state.dragIndex, 0, ...group);
-          } else {
-            let group = newItems.slice(state.dragIndex, state.dragIndex + 3);
-            newItems.splice(state.dragIndex, 3);
-            newItems.splice(index, 0, ...group);
-          }
-        } else {
-          newItems.splice(state.dragIndex, 1);
-          newItems.splice(index, 0, dragItem);
-        }*/
-        //单个列移动
-        /* newItems.splice(state.dragIndex, 1);
-        newItems.splice(index, 0, dragItem);
-        state.dragIndex = index;
-        filterColumns.value = newItems;*/
-
-        filterColumns.value = newItems;
-        state.dragIndex = index;
-      }
-    };
-    const onHeaderCell= () => {
-      return {
-        draggable: true,
-        onDragstart: dragStart,
-        onDrop: dragEnter,
-        onDragover: dragOver,
-        onHandleDrag: handleDrag,
-        onDragEnd: dragEnd,
-        onDragenter: dragEnter
-      }
-    }
     const route = useRoute();
     const expand = ref(false);
     const formRef = ref<FormInstance>();
@@ -470,25 +330,7 @@ export default defineComponent({
       title: 'label',
       key: 'value',
     };
-    const formState = reactive({
-      page: 1,
-      rows: 10,
-      total: 0,
-      ref_date: new Date(), //重置查询条件使用
-      well_common_name: '',
-      well_id: '',
-      well_type: '',
-      spud_date_begin: '',
-      spud_date_end: '',
-      completion_date_begin: '',
-      completion_date_end: '',
-      oil_prod_begin_date_begin: '',
-      oil_prod_begin_date_end: '',
-      oil_prod_recent_date_begin: '',
-      oil_prod_recent_date_end: '',
-      org_id_a1: '',
-      project_id: ''
-    });
+
     const downFile = (record: any) => {
 
       download(record.fileId, record.file_name);
@@ -501,153 +343,7 @@ export default defineComponent({
         }
       })
     }
-    const oilHeader = () => {
-      return {
-        style: {'border-top': '2px solid red'},
-      }
-    }
-    const oilDragHeader:GetComponentProps<any> = () => {
-      return {...oilHeader(),...onHeaderCell()}
-    }
-
-    const gasHeader = () => {
-      return {
-        style: {'border-top': '2px solid #009900'},
-      }
-    }
-    const gasDragHeader:GetComponentProps<any> = () => {
-      return {...gasHeader(),...onHeaderCell()}
-    }
-    const waterHeader = () => {
-      return {
-        style: {'border-top': '2px solid #4472C4'},
-      }
-    }
-    const waterDragHeader:GetComponentProps<any> = () => {
-      return {...waterHeader(),...onHeaderCell()}
-    }
-    const filterColumns = ref<TableColumnsType>([]);
 
-    const columns: TableColumnsType = [
-      {
-        title: '序号',
-        width: 60,
-        dataIndex: 'index',
-        key: 'index',
-        align: "center", fixed: 'left',
-        customRender: item => `${formState.rows * (formState.page - 1) + item.index + 1}`
-      },
-      {
-        title: '井名',
-        dataIndex: 'well_common_name',
-        key: 'well_common_name',
-        width: 120,
-        fixed: 'left'
-      },
-      {title: '采油厂机构', dataIndex: 'org_name_a1', key: 'org_name_a1', width: 120, customHeaderCell: onHeaderCell},
-      {title: '地质单元', dataIndex: 'project_name', key: 'project_name', width: 120, customHeaderCell: onHeaderCell},
-      {title: '井型', dataIndex: 'well_type', key: 'well_type', width: 120, customHeaderCell: onHeaderCell},
-      {
-        title: '开钻日期',
-        dataIndex: 'spud_date',
-        key: 'spud_date',
-        width: 120,
-        customHeaderCell: onHeaderCell,
-        customRender: ({record}) =>
-          record.spud_date == null ? "" : (dayjs(record.spud_date).format('YYYY-MM-DD'))
-      },
-      {
-        title: '完钻日期',
-        dataIndex: 'end_drilling_date',
-        key: 'end_drilling_date',
-        width: 120,
-        customHeaderCell: onHeaderCell,
-        customRender: ({record}) =>
-          record.end_drilling_date == null ? "" : (dayjs(record.end_drilling_date).format('YYYY-MM-DD'))
-      },
-      {
-        title: '完井日期',
-        dataIndex: 'completion_date',
-        key: 'completion_date',
-        width: 120,
-        customHeaderCell: onHeaderCell,
-        customRender: ({record}) =>
-          record.end_drilling_date == null ? "" : (dayjs(record.completion_date).format('YYYY-MM-DD'))
-      },
-      {
-        title: '开始采油日期',
-        dataIndex: 'oil_prod_begin_date',
-        key: 'oil_prod_begin_date', width: 120, customHeaderCell: onHeaderCell,
-        customRender: ({record}) =>
-          record.oil_prod_begin_date == null ? "" : (dayjs(record.oil_prod_begin_date).format('YYYY-MM-DD'))
-      },
-      {
-        title: '最近采油日期',
-        dataIndex: 'oil_prod_recent_date',
-        key: 'oil_prod_recent_date', width: 120, customHeaderCell: onHeaderCell,
-        customRender: ({record}) =>
-          record.oil_prod_recent_date == null ? "" : (dayjs(record.oil_prod_recent_date).format('YYYY-MM-DD'))
-      },
-      {title: '状态', dataIndex: 'current_state_name', key: 'current_state', width: 120, customHeaderCell: onHeaderCell},
-      {title: '设计井深(m)', dataIndex: 'budgeted_md', key: 'tempNo', width: 120, customHeaderCell: onHeaderCell},
-      {
-        title: '含水率',
-        dataIndex: 'water_cut',
-        key: 'water_cut',
-        width: 60,
-        align: 'center',
-        customHeaderCell: onHeaderCell,
-        customCell: (record) => {
-          return {class: getTdColor(record.water_cut)};
-        }
-      },
-      {
-        title: '最近月产油量(t)',
-        dataIndex: 'oil_prod_mon',
-        key: 'oil_prod_mon',
-        width: 120,
-        customHeaderCell: oilDragHeader
-      },
-      {
-        title: '累产油量(10kt)',
-        dataIndex: 'oil_prod_year',
-        key: 'oil_prod_year',
-        width: 120,
-        customHeaderCell: oilHeader
-      },
-      {title: '累产油量趋势', dataIndex: 'oil', key: 'oil', width: 100, customHeaderCell: oilHeader},
-      {
-        title: '最近月产气量(10^4m³)',
-        dataIndex: 'gas_prod_mon',
-        key: 'gas_prod_mon',
-        width: 170,
-        customHeaderCell: gasDragHeader
-      },
-      {
-        title: '累产气量(10^8m³)',
-        dataIndex: 'gas_prod_year',
-        key: 'gas_prod_year',
-        width: 150,
-        customHeaderCell: gasHeader
-      },
-      {title: '累产气量趋势', dataIndex: 'gas', key: 'gas', width: 100, customHeaderCell: gasHeader},
-      {
-        title: '最近注水量(t)',
-        dataIndex: 'water_prod_mon',
-        key: 'water_prod_mon',
-        width: 110,
-        customHeaderCell:waterDragHeader
-      },
-      {
-        title: '累注水量(10kt)',
-        dataIndex: 'water_prod_year',
-        key: 'water_prod_year',
-        width: 150,
-        customHeaderCell: waterHeader
-      },
-      {title: '累注水量趋势', dataIndex: 'water', key: 'water', width: 100, customHeaderCell: waterHeader},
-      {title: '操作列', dataIndex: 'operation', key: 'operation', align: 'center', width: 120}
-    ];
     filterColumns.value = [...columns];
 
     watch(
@@ -685,17 +381,7 @@ export default defineComponent({
         preCheckValues.value = checkValues;
       }, 300)
     }
-    const getTdColor = (water_cut) => {
-      if (water_cut == null || water_cut <= 2) {
-        return "";
-      } else if (water_cut > 2 && water_cut <= 40) {
-        return "color_level2";
-      } else if (water_cut > 40 && water_cut <= 8) {
-        return "color_level3";
-      } else {
-        return "color_level4";
-      }
-    }
+
     const onSelectChange = (keys: any) => {
       selectedRowKeys.value = keys;
     };
@@ -865,7 +551,7 @@ export default defineComponent({
       treeOnExpand,
       subjectTrees,
       getSubjectTree, searchTree,
-      treeOnSelect, pagination, dragStart, dragEnter, dragOver
+      treeOnSelect, pagination,
     };
   },
   created

vue/src/views/wellinfo/table.ts

@@ -0,0 +1,250 @@
+import type {TableColumnsType} from "ant-design-vue";
+import dayjs from "dayjs";
+import type {GetComponentProps} from "ant-design-vue/lib/vc-table/interface";
+import {reactive, ref} from "vue";
+
+const state = reactive({
+  dragIndex: 0
+});
+const dragStart = (e) => {
+  e.stopPropagation();
+  state.dragIndex = parseInt(e.srcElement.attributes["colstart"].value);
+}
+
+const groupList = ['oil_prod_mon', 'oil_prod_year', 'oil', 'gas_prod_mon', 'gas_prod_year', 'gas', 'water_prod_mon', 'water_prod_year', 'water'];
+const dragEnter = (e) => {
+  e.preventDefault();
+  console.log(e.srcElement.attributes["colstart"].value);
+  let index = parseInt(e.srcElement.attributes["colstart"].value);
+  if (state.dragIndex != -1 && state.dragIndex != index) {
+
+    let newItems = [...filterColumns.value];
+    const dragItem = filterColumns.value[state.dragIndex];
+    const dragKey = dragItem.key == undefined ? "" : dragItem.key.toString();
+    const moveItem = filterColumns.value[index];
+    const moveKey = moveItem.key == undefined ? "" : moveItem.key.toString();
+
+    if (state.dragIndex < index) {//右移
+      let moveList = groupList;
+      if (!groupList.includes(moveKey)) {
+        moveList = [moveKey];
+      } else {
+        let star = groupList.indexOf(moveKey);
+        moveList = groupList.slice(star, star + 3);
+      }
+      let group = columns.filter(x => moveList.includes(x.key == undefined ? "" : x.key.toString()));
+      newItems = newItems.filter(x => !moveList.includes(x.key == undefined ? "" : x.key.toString()));
+      newItems.splice(state.dragIndex, 0, ...group);
+      //如果起始为块则需要减两列
+      //如果放下为块则要加两列
+      if (!groupList.includes(dragKey)&&!groupList.includes(moveKey)){
+        index = state.dragIndex+ 1;
+      }
+      if (groupList.includes(dragKey)) {
+        index = index - 2;
+      }
+      if (groupList.includes(moveKey)) {
+        index = index + 2;
+      }
+    } else {//=左移
+
+      let moveList = groupList;
+      if (!groupList.includes(dragKey)) {
+        moveList = [dragKey];
+      } else {
+        let star = groupList.indexOf(dragKey);
+        moveList = groupList.slice(star, star + 3);
+      }
+      let group = columns.filter(x => moveList.includes(x.key == undefined ? "" : x.key.toString()));
+      newItems = newItems.filter(x => !moveList.includes(x.key == undefined ? "" : x.key.toString()));
+      newItems.splice(index, 0, ...group);
+      filterColumns.value = newItems;
+    }
+    filterColumns.value = newItems;
+    state.dragIndex = index;
+  }
+};
+const onHeaderCell= () => {
+  return {
+    draggable: true,
+    onDragstart: dragStart,
+    onDragenter: dragEnter
+  }
+}
+const oilHeader = () => {
+  return {
+    style: {'border-top': '2px solid red'},
+  }
+}
+const oilDragHeader:GetComponentProps<any> = () => {
+  return {...oilHeader(),...onHeaderCell()}
+}
+
+const gasHeader = () => {
+  return {
+    style: {'border-top': '2px solid #009900'},
+  }
+}
+const gasDragHeader:GetComponentProps<any> = () => {
+  return {...gasHeader(),...onHeaderCell()}
+}
+const waterHeader = () => {
+  return {
+    style: {'border-top': '2px solid #4472C4'},
+  }
+}
+const waterDragHeader:GetComponentProps<any> = () => {
+  return {...waterHeader(),...onHeaderCell()}
+}
+export const getTdColor = (water_cut) => {
+  if (water_cut == null || water_cut <= 2) {
+    return "";
+  } else if (water_cut > 2 && water_cut <= 40) {
+    return "color_level2";
+  } else if (water_cut > 40 && water_cut <= 8) {
+    return "color_level3";
+  } else {
+    return "color_level4";
+  }
+}
+export const filterColumns = ref<TableColumnsType>([]);
+
+export const formState = reactive({
+  page: 1,
+  rows: 10,
+  total: 0,
+  ref_date: new Date(), //重置查询条件使用
+  well_common_name: '',
+  well_id: '',
+  well_type: '',
+  spud_date_begin: '',
+  spud_date_end: '',
+  completion_date_begin: '',
+  completion_date_end: '',
+  oil_prod_begin_date_begin: '',
+  oil_prod_begin_date_end: '',
+  oil_prod_recent_date_begin: '',
+  oil_prod_recent_date_end: '',
+  org_id_a1: '',
+  project_id: ''
+});
+export const columns: TableColumnsType = [
+  {
+    title: '序号',
+    width: 60,
+    dataIndex: 'index',
+    key: 'index',
+    align: "center", fixed: 'left',
+    customRender: item => `${formState.rows * (formState.page - 1) + item.index + 1}`
+  },
+  {
+    title: '井名',
+    dataIndex: 'well_common_name',
+    key: 'well_common_name',
+    width: 120,
+    fixed: 'left'
+  },
+  {title: '采油厂机构', dataIndex: 'org_name_a1', key: 'org_name_a1', width: 120, customHeaderCell: onHeaderCell},
+  {title: '地质单元', dataIndex: 'project_name', key: 'project_name', width: 120, customHeaderCell: onHeaderCell},
+  {title: '井型', dataIndex: 'well_type', key: 'well_type', width: 120, customHeaderCell: onHeaderCell},
+  {
+    title: '开钻日期',
+    dataIndex: 'spud_date',
+    key: 'spud_date',
+    width: 120,
+    customHeaderCell: onHeaderCell,
+    customRender: ({record}) =>
+      record.spud_date == null ? "" : (dayjs(record.spud_date).format('YYYY-MM-DD'))
+  },
+  {
+    title: '完钻日期',
+    dataIndex: 'end_drilling_date',
+    key: 'end_drilling_date',
+    width: 120,
+    customHeaderCell: onHeaderCell,
+    customRender: ({record}) =>
+      record.end_drilling_date == null ? "" : (dayjs(record.end_drilling_date).format('YYYY-MM-DD'))
+  },
+  {
+    title: '完井日期',
+    dataIndex: 'completion_date',
+    key: 'completion_date',
+    width: 120,
+    customHeaderCell: onHeaderCell,
+    customRender: ({record}) =>
+      record.end_drilling_date == null ? "" : (dayjs(record.completion_date).format('YYYY-MM-DD'))
+  },
+  {
+    title: '开始采油日期',
+    dataIndex: 'oil_prod_begin_date',
+    key: 'oil_prod_begin_date', width: 120, customHeaderCell: onHeaderCell,
+    customRender: ({record}) =>
+      record.oil_prod_begin_date == null ? "" : (dayjs(record.oil_prod_begin_date).format('YYYY-MM-DD'))
+  },
+  {
+    title: '最近采油日期',
+    dataIndex: 'oil_prod_recent_date',
+    key: 'oil_prod_recent_date', width: 120, customHeaderCell: onHeaderCell,
+    customRender: ({record}) =>
+      record.oil_prod_recent_date == null ? "" : (dayjs(record.oil_prod_recent_date).format('YYYY-MM-DD'))
+  },
+  {title: '状态', dataIndex: 'current_state_name', key: 'current_state', width: 120, customHeaderCell: onHeaderCell},
+  {title: '设计井深(m)', dataIndex: 'budgeted_md', key: 'tempNo', width: 120, customHeaderCell: onHeaderCell},
+  {
+    title: '含水率',
+    dataIndex: 'water_cut',
+    key: 'water_cut',
+    width: 60,
+    align: 'center',
+    customHeaderCell: onHeaderCell,
+    customCell: (record) => {
+      return {class: getTdColor(record.water_cut)};
+    }
+  },
+  {
+    title: '最近月产油量(t)',
+    dataIndex: 'oil_prod_mon',
+    key: 'oil_prod_mon',
+    width: 120,
+    customHeaderCell: oilDragHeader
+  },
+  {
+    title: '累产油量(10kt)',
+    dataIndex: 'oil_prod_year',
+    key: 'oil_prod_year',
+    width: 120,
+    customHeaderCell: oilHeader
+  },
+  {title: '累产油量趋势', dataIndex: 'oil', key: 'oil', width: 100, customHeaderCell: oilHeader},
+  {
+    title: '最近月产气量(10^4m³)',
+    dataIndex: 'gas_prod_mon',
+    key: 'gas_prod_mon',
+    width: 170,
+    customHeaderCell: gasDragHeader
+  },
+  {
+    title: '累产气量(10^8m³)',
+    dataIndex: 'gas_prod_year',
+    key: 'gas_prod_year',
+    width: 150,
+    customHeaderCell: gasHeader
+  },
+  {title: '累产气量趋势', dataIndex: 'gas', key: 'gas', width: 100, customHeaderCell: gasHeader},
+  {
+    title: '最近注水量(t)',
+    dataIndex: 'water_prod_mon',
+    key: 'water_prod_mon',
+    width: 110,
+    customHeaderCell:waterDragHeader
+  },
+  {
+    title: '累注水量(10kt)',
+    dataIndex: 'water_prod_year',
+    key: 'water_prod_year',
+    width: 150,
+    customHeaderCell: waterHeader
+  },
+  {title: '累注水量趋势', dataIndex: 'water', key: 'water', width: 100, customHeaderCell: waterHeader},
+  {title: '操作列', dataIndex: 'operation', key: 'operation', align: 'center', width: 120}
+];