|
@@ -0,0 +1,252 @@
|
|
|
+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}
|
|
|
+];
|