|
|
@@ -5,7 +5,7 @@
|
|
|
<a-tabs v-model:activeKey="activeTab" @change="tabChange" style="width:97%;">
|
|
|
<a-tab-pane key="1" tab="组织架构目录">
|
|
|
</a-tab-pane>
|
|
|
- <a-tab-pane key="2" tab="地址单元目录" forceRender="true">
|
|
|
+ <a-tab-pane key="2" tab="地质单元目录" forceRender="true">
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
<DoubleLeftOutlined @click="showTree=false"/>
|
|
|
@@ -13,19 +13,20 @@
|
|
|
<div style="margin-top: -15px">
|
|
|
<a-input-search
|
|
|
v-model:value="subjectTrees.searchStr"
|
|
|
- placeholder="查找目录..."
|
|
|
+ placeholder="查找目录..." allow-clear
|
|
|
@search="searchTree"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="query-index-tree-box">
|
|
|
<a-tree
|
|
|
- :show-line="true"
|
|
|
+ :show-line="true" blockNode="true"
|
|
|
:tree-data="subjectTrees.data"
|
|
|
v-model:expandedKeys="subjectTrees.expandedKeys"
|
|
|
v-model:selectedKeys="subjectTrees.selectedKeys"
|
|
|
:replace-fields="replaceFields"
|
|
|
:autoExpandParent="subjectTrees.autoExpandParent"
|
|
|
@expand="treeOnExpand" @select="treeOnSelect">
|
|
|
+ <template #switcherIcon="{ switcherCls }"><caret-down-outlined style="font-size:20px;" :class="switcherCls" /></template>
|
|
|
<template #title="{ label,value,children }">
|
|
|
<span v-if="label!=null&&label.indexOf(subjectTrees.searchStr) > -1">
|
|
|
{{ label.substr(0, label.indexOf(subjectTrees.searchStr)) }}
|
|
|
@@ -45,10 +46,10 @@
|
|
|
<a-form ref="formRef" name="fromQuery"
|
|
|
class="ant-advanced-search-form"
|
|
|
:label-col="labelCol"
|
|
|
- :model="formState.temp">
|
|
|
+ :model="formState">
|
|
|
<a-row :gutter="24" class="query-index-row">
|
|
|
<a-col :span="6">
|
|
|
- <a-form-item name="tempName" label="井号:">
|
|
|
+ <a-form-item name="well_id" label="井号:">
|
|
|
<a-input v-model:value="formState.well_id"/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
@@ -58,7 +59,7 @@
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
|
- <a-form-item name="tempName" label="井型:">
|
|
|
+ <a-form-item name="well_type" label="井型:">
|
|
|
<a-select ref="select" v-model:value="formState.well_type"
|
|
|
:options="wellTypeList" :field-names="{label:'name',value:'value'}" :allow-clear="true">
|
|
|
</a-select>
|
|
|
@@ -68,41 +69,53 @@
|
|
|
<MenuOutlined @click="showQuery=true" v-if="!showQuery"/>
|
|
|
<LineOutlined @click="showQuery=false" v-else/>
|
|
|
<a-button type="primary" html-type="submit" @click="onQuery" style="margin-left: 10px;">查询</a-button>
|
|
|
- <a-button html-type="submit" @click="() => {formRef.resetFields();onQuery()}" style="margin-left: 10px;">
|
|
|
+ <a-button html-type="submit"
|
|
|
+ @click="() => {resetFields();formState.ref_date=new Date(); onQuery()}"
|
|
|
+ style="margin-left: 10px;">
|
|
|
重置
|
|
|
</a-button>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row :gutter="24" class="query-index-row" v-if="showQuery">
|
|
|
<a-col :span="6">
|
|
|
- <a-form-item name="tempName" label="开钻日期:">
|
|
|
- <a-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
|
|
|
+ <a-form-item name="spud_date_begin" label="开钻日期:">
|
|
|
+ <a-range-picker :key="formState.ref_date" format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
|
|
|
@change="(d)=>{onRangeChange(d,'spud_date_begin','spud_date_end')}"/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
|
- <a-form-item name="well_common_name" label="完井日期:">
|
|
|
- <a-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
|
|
|
+ <a-form-item name="completion_date_begin" label="完井日期:">
|
|
|
+ <a-range-picker :key="formState.ref_date" format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
|
|
|
@change="(d)=>{onRangeChange(d,'completion_date_begin','completion_date_end')}"/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
<a-col :span="6">
|
|
|
- <a-form-item name="tempName" label="开始采油日期:">
|
|
|
- <a-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
|
|
|
+ <a-form-item name="oil_prod_begin_date_begin" label="开始采油日期:">
|
|
|
+ <a-range-picker :key="formState.ref_date" format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
|
|
|
@change="(d)=>{onRangeChange(d,'oil_prod_begin_date_begin','oil_prod_begin_date_end')}"/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row :gutter="24" class="query-index-row" v-if="showQuery">
|
|
|
<a-col :span="6">
|
|
|
- <a-form-item name="tempName" label="最近采油日期:">
|
|
|
- <a-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
|
|
|
+ <a-form-item label="最近采油日期:">
|
|
|
+ <a-range-picker :key="formState.ref_date" format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']"
|
|
|
@change="(d)=>{onRangeChange(d,'oil_prod_recent_date_begin','oil_prod_recent_date_end')}"/>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row class="edit-operation">
|
|
|
<a-col :span="24" style="text-align: right">
|
|
|
+ <a-checkbox-group v-model:value="showColumnType">
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-checkbox value="oil">显示产油</a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="12">
|
|
|
+ <a-checkbox value="gas">显示产气</a-checkbox>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-checkbox-group>
|
|
|
<a-radio-group v-model:value="viewModel" style="text-align: left">
|
|
|
<a-radio-button value="list">
|
|
|
<UnorderedListOutlined/>
|
|
|
@@ -119,7 +132,7 @@
|
|
|
</div>
|
|
|
<a-spin :spinning="loading">
|
|
|
<div class="query-index-table" v-if="viewModel=='list'">
|
|
|
- <a-table :columns="columns" :data-source="data" :scroll="{ x:'100%', y: 500 }"
|
|
|
+ <a-table :columns="filterColumns" :data-source="data" :scroll="{ x:'100%', y: 550 }"
|
|
|
:row-key="record=>record.tempId" :pagination="false"
|
|
|
bordered>
|
|
|
<template #bodyCell="{ column,record }">
|
|
|
@@ -208,7 +221,7 @@
|
|
|
@change="(current)=>handleTableChange({ current: current,pageSize: pagination.pageSize })"
|
|
|
@showSizeChange="(current,pageSize)=>handleTableChange({ current: current,pageSize: pageSize })"/>
|
|
|
</a-spin>
|
|
|
- <div style="width:100%;height: 500px">
|
|
|
+ <div style="width:100%;height: 500px;margin-top:15px">
|
|
|
<ChartMap></ChartMap>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -236,7 +249,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import {ref, defineComponent, reactive, computed} from 'vue';
|
|
|
+import {ref, defineComponent, reactive, computed, watch} from 'vue';
|
|
|
import type {FormInstance} from 'ant-design-vue';
|
|
|
import {useRoute} from 'vue-router';
|
|
|
import {get} from "@/api/common";
|
|
|
@@ -250,7 +263,7 @@ import ChartMap from '@/components/basic/chart/chart-map.vue'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'wellinfoindex',
|
|
|
- components: {ChartCell,ChartMap},
|
|
|
+ components: {ChartCell, ChartMap},
|
|
|
setup() {
|
|
|
const route = useRoute();
|
|
|
const expand = ref(false);
|
|
|
@@ -261,6 +274,7 @@ export default defineComponent({
|
|
|
const activeTab = ref("1");
|
|
|
const showTree = ref(true);
|
|
|
const isShowDoc = ref(false);
|
|
|
+ const showColumnType = ref(['oil','gas']);
|
|
|
const data = ref([{children: [], label: '', value: ''}]);
|
|
|
const viewModel = ref("list");
|
|
|
const tabsViewStore = useTabsViewStore();
|
|
|
@@ -271,11 +285,11 @@ 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: '',
|
|
|
@@ -290,6 +304,26 @@ export default defineComponent({
|
|
|
org_id_a1: '',
|
|
|
project_id: ''
|
|
|
});
|
|
|
+ const resetFields = function () {
|
|
|
+ let keys: string[] = Object.keys(formState);
|
|
|
+ keys.forEach(key => {
|
|
|
+ if (typeof (formState[key]) == "string") {
|
|
|
+ formState[key] = '';
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const oilHeader = () => {
|
|
|
+ return {
|
|
|
+ style: {'border-top': '2px solid red'},
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const gasHeader = () => {
|
|
|
+ return {
|
|
|
+ style: {'border-top': '2px solid #0c6be2'},
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const filterColumns = ref([]);
|
|
|
+
|
|
|
const columns: TableColumnsType = [
|
|
|
{
|
|
|
title: '序号',
|
|
|
@@ -337,14 +371,59 @@ export default defineComponent({
|
|
|
return {class: getTdColor(record.water_cut)};
|
|
|
}
|
|
|
},
|
|
|
- {title: '月产油量(t)', dataIndex: 'oil_prod_mon', key: 'oil_prod_mon', width: 120},
|
|
|
- {title: '累产油量(t)', dataIndex: 'oil_prod_year', key: 'oil_prod_year', width: 120},
|
|
|
- {title: '累产油量趋势', dataIndex: 'oil', key: 'oil', width: 150},
|
|
|
- {title: '月产气量(m³)', dataIndex: 'gas_prod_mon', key: 'gas_prod_mon', width: 120},
|
|
|
- {title: '累产气量(m³)', dataIndex: 'gas_prod_year', key: 'gas_prod_year', width: 120},
|
|
|
- {title: '累产气量趋势', dataIndex: 'gas', key: 'gas', width: 150},
|
|
|
+ {
|
|
|
+ title: '最近月产油量(t)',
|
|
|
+ dataIndex: 'oil_prod_mon',
|
|
|
+ key: 'oil_prod_mon',
|
|
|
+ width: 120,
|
|
|
+ customHeaderCell: oilHeader
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '累产油量(t)',
|
|
|
+ dataIndex: 'oil_prod_year',
|
|
|
+ key: 'oil_prod_year',
|
|
|
+ width: 120,
|
|
|
+ customHeaderCell: oilHeader
|
|
|
+ },
|
|
|
+ {title: '累产油量趋势', dataIndex: 'oil', key: 'oil', width: 100, customHeaderCell: oilHeader},
|
|
|
+ {
|
|
|
+ title: '最近月产气量(m³)',
|
|
|
+ dataIndex: 'gas_prod_mon',
|
|
|
+ key: 'gas_prod_mon',
|
|
|
+ width: 130,
|
|
|
+ customHeaderCell: gasHeader
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '累产气量(m³)',
|
|
|
+ dataIndex: 'gas_prod_year',
|
|
|
+ key: 'gas_prod_year',
|
|
|
+ width: 120,
|
|
|
+ customHeaderCell: gasHeader
|
|
|
+ },
|
|
|
+ {title: '累产气量趋势', dataIndex: 'gas', key: 'gas', width: 100, customHeaderCell: gasHeader},
|
|
|
{title: '操作列', dataIndex: 'operation', key: 'operation', align: 'center', width: 120}
|
|
|
];
|
|
|
+ filterColumns.value = columns as any;
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => showColumnType.value,
|
|
|
+ () => {
|
|
|
+ const filterValue = columns.filter((item: any) => {
|
|
|
+ if (!showColumnType.value.includes("oil")) {
|
|
|
+ if (["oil_prod_mon", "oil_prod_year", "oil"].includes(item.dataIndex)) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!showColumnType.value.includes("gas")) {
|
|
|
+ if (["gas_prod_mon", "gas_prod_year", "gas"].includes(item.dataIndex)) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ })
|
|
|
+ filterColumns.value = filterValue as any;
|
|
|
+ }
|
|
|
+ );
|
|
|
const getTdColor = (water_cut) => {
|
|
|
if (water_cut == null || water_cut <= 2) {
|
|
|
return "";
|
|
|
@@ -495,10 +574,10 @@ export default defineComponent({
|
|
|
const labelCol = {style: {width: '100px'}};
|
|
|
|
|
|
return {
|
|
|
- route, selectedRowKeys, columns, loading, activeTab, showTree, onSelectChange, data,
|
|
|
+ route, selectedRowKeys, loading, activeTab, showTree, onSelectChange, data,
|
|
|
expand, onQuery, loadData, onRangeChange, showQuery, wellTypeList, replaceFields,
|
|
|
formRef, viewModel, handleTableChange, detail,
|
|
|
- formState, isShowDoc, showDoc, docList,
|
|
|
+ formState, isShowDoc, showDoc, docList, resetFields, showColumnType, filterColumns,
|
|
|
labelCol, getTdColor,
|
|
|
tabChange,
|
|
|
treeOnExpand,
|
|
|
@@ -584,7 +663,7 @@ export default defineComponent({
|
|
|
padding: 5px;
|
|
|
padding-top: 10px;
|
|
|
overflow-y: scroll;
|
|
|
- max-height: 600px;
|
|
|
+ max-height: 1000px;
|
|
|
}
|
|
|
|
|
|
.col-text {
|
|
|
@@ -616,19 +695,19 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.color_level1, .color_level1:hover {
|
|
|
+.color_level1, .ant-table-tbody>tr>td.color_level1:hover {
|
|
|
}
|
|
|
|
|
|
-.color_level2, .color_level2:hover {
|
|
|
+.color_level2, .ant-table-tbody>tr>td.color_level2:hover {
|
|
|
background-color: #EAF4FF !important;
|
|
|
}
|
|
|
|
|
|
-.color_level3, .color_level3:hover {
|
|
|
- background-color: #D5EAFF;
|
|
|
+.color_level3, .ant-table-tbody>tr>td.color_level3:hover {
|
|
|
+ background-color: #D5EAFF !important;
|
|
|
}
|
|
|
|
|
|
-.color_level4, .color_level4:hover {
|
|
|
- background-color: #B7DBFF;
|
|
|
+.color_level4, .ant-table-tbody>tr>td.color_level4:hover {
|
|
|
+ background-color: #B7DBFF !important;
|
|
|
}
|
|
|
</style>
|
|
|
|
xiaoqiao