|
@@ -289,23 +289,23 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
<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 type {FormInstance} from 'ant-design-vue';
|
|
import {useRoute} from 'vue-router';
|
|
import {useRoute} from 'vue-router';
|
|
import {get} from "@/api/common";
|
|
import {get} from "@/api/common";
|
|
-import type {TableColumnsType} from "ant-design-vue";
|
|
|
|
-import dayjs from "dayjs";
|
|
|
|
import {getPaginationTotalTitle} from "@/utils/common";
|
|
import {getPaginationTotalTitle} from "@/utils/common";
|
|
import type {TableProps} from "ant-design-vue";
|
|
import type {TableProps} from "ant-design-vue";
|
|
import {useTabsViewStore} from "@/store/modules/tabsView";
|
|
import {useTabsViewStore} from "@/store/modules/tabsView";
|
|
import ChartCell from '@/components/basic/chart/chart-cell.vue'
|
|
import ChartCell from '@/components/basic/chart/chart-cell.vue'
|
|
import ChartMap from '@/components/basic/chart/chart-map.vue'
|
|
import ChartMap from '@/components/basic/chart/chart-map.vue'
|
|
import {download} from "@/utils/downloadFile";
|
|
import {download} from "@/utils/downloadFile";
|
|
|
|
+import {columns,filterColumns,formState,getTdColor} from './table'
|
|
|
|
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
name: 'wellinfoindex',
|
|
name: 'wellinfoindex',
|
|
components: {ChartCell, ChartMap},
|
|
components: {ChartCell, ChartMap},
|
|
setup() {
|
|
setup() {
|
|
|
|
+
|
|
const route = useRoute();
|
|
const route = useRoute();
|
|
const expand = ref(false);
|
|
const expand = ref(false);
|
|
const formRef = ref<FormInstance>();
|
|
const formRef = ref<FormInstance>();
|
|
@@ -321,31 +321,16 @@ export default defineComponent({
|
|
const viewModel = ref("list");
|
|
const viewModel = ref("list");
|
|
const tabsViewStore = useTabsViewStore();
|
|
const tabsViewStore = useTabsViewStore();
|
|
const docList = ref([]);
|
|
const docList = ref([]);
|
|
- const wellTypeList = ref([{label: "直井", value: "直井"}, {label: "定向井", value: "定向井"}, {label: "分支井", value: "分支井"}]);
|
|
|
|
|
|
+ const wellTypeList = ref([{label: "直井", value: "直井"}, {label: "定向井", value: "定向井"}, {
|
|
|
|
+ label: "分支井",
|
|
|
|
+ value: "分支井"
|
|
|
|
+ }]);
|
|
const replaceFields = {
|
|
const replaceFields = {
|
|
children: 'children',
|
|
children: 'children',
|
|
title: 'label',
|
|
title: 'label',
|
|
key: 'value',
|
|
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) => {
|
|
const downFile = (record: any) => {
|
|
|
|
|
|
download(record.fileId, record.file_name);
|
|
download(record.fileId, record.file_name);
|
|
@@ -358,117 +343,8 @@ export default defineComponent({
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
- const oilHeader = () => {
|
|
|
|
- return {
|
|
|
|
- style: {'border-top': '2px solid red'},
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- const gasHeader = () => {
|
|
|
|
- return {
|
|
|
|
- style: {'border-top': '2px solid #009900'},
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- const waterHeader = () => {
|
|
|
|
- return {
|
|
|
|
- style: {'border-top': '2px solid #4472C4'},
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- const filterColumns = ref([]);
|
|
|
|
-
|
|
|
|
- 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},
|
|
|
|
- {title: '地质单元', dataIndex: 'project_name', key: 'project_name', width: 120},
|
|
|
|
- {title: '井型', dataIndex: 'well_type', key: 'well_type', width: 120},
|
|
|
|
- {
|
|
|
|
- title: '开钻日期', dataIndex: 'spud_date', key: 'spud_date', width: 120, 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, 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, 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,
|
|
|
|
- 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,
|
|
|
|
- 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},
|
|
|
|
- {title: '设计井深(m)', dataIndex: 'budgeted_md', key: 'tempNo', width: 120},
|
|
|
|
- {
|
|
|
|
- title: '含水率', dataIndex: 'water_cut', key: 'water_cut', width: 60, align: 'center', customCell: (record) => {
|
|
|
|
- return {class: getTdColor(record.water_cut)};
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- title: '最近月产油量(t)',
|
|
|
|
- dataIndex: 'oil_prod_mon',
|
|
|
|
- key: 'oil_prod_mon',
|
|
|
|
- width: 120,
|
|
|
|
- customHeaderCell: oilHeader
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- 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: gasHeader
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- 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: waterHeader
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- 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 as any;
|
|
|
|
|
|
+
|
|
|
|
+ filterColumns.value = [...columns];
|
|
|
|
|
|
watch(
|
|
watch(
|
|
() => showColumnType.value,
|
|
() => showColumnType.value,
|
|
@@ -491,31 +367,21 @@ export default defineComponent({
|
|
}
|
|
}
|
|
return true
|
|
return true
|
|
})
|
|
})
|
|
- filterColumns.value = filterValue as any;
|
|
|
|
|
|
+ filterColumns.value = [...filterValue];
|
|
}
|
|
}
|
|
);
|
|
);
|
|
|
|
|
|
- const preCheckValues =ref( Object.assign(showColumnType.value));
|
|
|
|
|
|
+ const preCheckValues = ref(Object.assign(showColumnType.value));
|
|
const onCheckboxChange = (checkValues: []) => {
|
|
const onCheckboxChange = (checkValues: []) => {
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
let tbody = document.getElementsByClassName("ant-table-body")[0];
|
|
let tbody = document.getElementsByClassName("ant-table-body")[0];
|
|
if (tbody) {
|
|
if (tbody) {
|
|
tbody.scrollLeft = preCheckValues.value.length > checkValues.length ? 0 : tbody.scrollWidth;
|
|
tbody.scrollLeft = preCheckValues.value.length > checkValues.length ? 0 : tbody.scrollWidth;
|
|
}
|
|
}
|
|
- preCheckValues.value =checkValues;
|
|
|
|
|
|
+ preCheckValues.value = checkValues;
|
|
}, 300)
|
|
}, 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) => {
|
|
const onSelectChange = (keys: any) => {
|
|
selectedRowKeys.value = keys;
|
|
selectedRowKeys.value = keys;
|
|
};
|
|
};
|
|
@@ -685,12 +551,14 @@ export default defineComponent({
|
|
treeOnExpand,
|
|
treeOnExpand,
|
|
subjectTrees,
|
|
subjectTrees,
|
|
getSubjectTree, searchTree,
|
|
getSubjectTree, searchTree,
|
|
- treeOnSelect, pagination
|
|
|
|
|
|
+ treeOnSelect, pagination,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
- created() {
|
|
|
|
|
|
+ created
|
|
|
|
+ () {
|
|
this.loadData();
|
|
this.loadData();
|
|
- },
|
|
|
|
|
|
+ }
|
|
|
|
+ ,
|
|
activated() {
|
|
activated() {
|
|
}
|
|
}
|
|
});
|
|
});
|