|
@@ -111,12 +111,15 @@
|
|
|
<a-col :span="24" style="text-align: right">
|
|
|
<a-checkbox-group v-model:value="showColumnType" @change="onCheckboxChange">
|
|
|
<a-row>
|
|
|
- <a-col :span="12">
|
|
|
+ <a-col :span="8">
|
|
|
<a-checkbox value="oil">显示产油</a-checkbox>
|
|
|
</a-col>
|
|
|
- <a-col :span="12">
|
|
|
+ <a-col :span="8">
|
|
|
<a-checkbox value="gas">显示产气</a-checkbox>
|
|
|
</a-col>
|
|
|
+ <a-col :span="8">
|
|
|
+ <a-checkbox value="water">显示产水</a-checkbox>
|
|
|
+ </a-col>
|
|
|
</a-row>
|
|
|
</a-checkbox-group>
|
|
|
<a-radio-group v-model:value="viewModel" style="text-align: left">
|
|
@@ -149,6 +152,11 @@
|
|
|
<ChartCell :timeType="('month')" :dataType="('gas')" :wellId="record.well_id"></ChartCell>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ <template v-if="column.dataIndex === 'water'">
|
|
|
+ <div style="height:25px">
|
|
|
+ <ChartCell :timeType="('month')" :dataType="('water')" :wellId="record.well_id"></ChartCell>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<template v-if="column.key === 'well_common_name'">
|
|
|
<a-button type="link" size="small" @click="detail(record.well_id)">{{
|
|
|
record.well_common_name
|
|
@@ -192,24 +200,25 @@
|
|
|
<tr v-if="showColumnType.includes('oil')">
|
|
|
<th>最近月产油量:</th>
|
|
|
<td>
|
|
|
- {{item.oil_prod_mon == null ? "" : (item.oil_prod_mon + "t")}}
|
|
|
+ {{ item.oil_prod_mon == null ? "" : (item.oil_prod_mon + "t") }}
|
|
|
</td>
|
|
|
<td colspan="2" rowspan="2">
|
|
|
<div style="height:25px">
|
|
|
- <ChartCell :timeType="('month')" :dataType="('oil')" :wellId="item.well_id" :lineColor="('#E63038')"></ChartCell>
|
|
|
+ <ChartCell :timeType="('month')" :dataType="('oil')" :wellId="item.well_id"
|
|
|
+ :lineColor="('#E63038')"></ChartCell>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr v-if="showColumnType.includes('oil')">
|
|
|
<th>累产油量:</th>
|
|
|
<td>
|
|
|
- {{item.oil_prod_year == null ? "" : (item.oil_prod_year + "t")}}
|
|
|
+ {{ item.oil_prod_year == null ? "" : (item.oil_prod_year + "t") }}
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr v-if="showColumnType.includes('gas')">
|
|
|
<th>最近月产气量:</th>
|
|
|
<td>
|
|
|
- {{item.gas_prod_mon == null ? "" : (item.gas_prod_mon + "m³")}}
|
|
|
+ {{ item.gas_prod_mon == null ? "" : (item.gas_prod_mon + "m³") }}
|
|
|
</td>
|
|
|
<td colspan="2" rowspan="2">
|
|
|
<div style="height:25px">
|
|
@@ -220,7 +229,24 @@
|
|
|
<tr v-if="showColumnType.includes('gas')">
|
|
|
<th>累产气量:</th>
|
|
|
<td>
|
|
|
- {{item.gas_prod_year == null ? "" : (item.gas_prod_year + "m³")}}
|
|
|
+ {{ item.gas_prod_year == null ? "" : (item.gas_prod_year + "m³") }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr v-if="showColumnType.includes('water')">
|
|
|
+ <th>最近注水量:</th>
|
|
|
+ <td>
|
|
|
+ {{ item.water_prod_mon == null ? "" : (item.water_prod_mon + "t") }}
|
|
|
+ </td>
|
|
|
+ <td colspan="2" rowspan="2">
|
|
|
+ <div style="height:25px">
|
|
|
+ <ChartCell :timeType="('month')" :dataType="('water')" :wellId="item.well_id"></ChartCell>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr v-if="showColumnType.includes('water')">
|
|
|
+ <th>累注水量:</th>
|
|
|
+ <td>
|
|
|
+ {{ item.water_prod_year == null ? "" : (item.water_prod_year + "10kt") }}
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
@@ -287,10 +313,10 @@ export default defineComponent({
|
|
|
const showQuery = ref(false);
|
|
|
const selectedRowKeys = ref([]);
|
|
|
const activeTab = ref("1");
|
|
|
- const colspan =ref(8);
|
|
|
+ const colspan = ref(8);
|
|
|
const showTree = ref(true);
|
|
|
const isShowDoc = ref(false);
|
|
|
- const showColumnType = ref(['oil', 'gas']);
|
|
|
+ const showColumnType = ref(['oil', 'gas', 'water']);
|
|
|
const data = ref([{children: [], label: '', value: ''}]);
|
|
|
const viewModel = ref("list");
|
|
|
const tabsViewStore = useTabsViewStore();
|
|
@@ -339,7 +365,12 @@ export default defineComponent({
|
|
|
}
|
|
|
const gasHeader = () => {
|
|
|
return {
|
|
|
- style: {'border-top': '2px solid #0c6be2'},
|
|
|
+ style: {'border-top': '2px solid #009900'},
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const waterHeader = () => {
|
|
|
+ return {
|
|
|
+ style: {'border-top': '2px solid #4472C4'},
|
|
|
}
|
|
|
}
|
|
|
const filterColumns = ref([]);
|
|
@@ -398,7 +429,7 @@ export default defineComponent({
|
|
|
customHeaderCell: oilHeader
|
|
|
},
|
|
|
{
|
|
|
- title: '累产油量(t)',
|
|
|
+ title: '累产油量(10kt)',
|
|
|
dataIndex: 'oil_prod_year',
|
|
|
key: 'oil_prod_year',
|
|
|
width: 120,
|
|
@@ -406,20 +437,35 @@ export default defineComponent({
|
|
|
},
|
|
|
{title: '累产油量趋势', dataIndex: 'oil', key: 'oil', width: 100, customHeaderCell: oilHeader},
|
|
|
{
|
|
|
- title: '最近月产气量(m³)',
|
|
|
+ title: '最近月产气量(10^4m³)',
|
|
|
dataIndex: 'gas_prod_mon',
|
|
|
key: 'gas_prod_mon',
|
|
|
- width: 130,
|
|
|
+ width: 170,
|
|
|
customHeaderCell: gasHeader
|
|
|
},
|
|
|
{
|
|
|
- title: '累产气量(m³)',
|
|
|
+ title: '累产气量(10^8m³)',
|
|
|
dataIndex: 'gas_prod_year',
|
|
|
key: 'gas_prod_year',
|
|
|
- width: 120,
|
|
|
+ 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;
|
|
@@ -438,18 +484,25 @@ export default defineComponent({
|
|
|
return false
|
|
|
}
|
|
|
}
|
|
|
+ if (!showColumnType.value.includes("water")) {
|
|
|
+ if (["water_prod_mon", "water_prod_year", "water"].includes(item.dataIndex)) {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
return true
|
|
|
})
|
|
|
filterColumns.value = filterValue as any;
|
|
|
}
|
|
|
);
|
|
|
|
|
|
- const onCheckboxChange = () => {
|
|
|
+ const preCheckValues =ref( Object.assign(showColumnType.value));
|
|
|
+ const onCheckboxChange = (checkValues: []) => {
|
|
|
setTimeout(() => {
|
|
|
let tbody = document.getElementsByClassName("ant-table-body")[0];
|
|
|
if (tbody) {
|
|
|
- tbody.scrollLeft = tbody.scrollWidth;
|
|
|
+ tbody.scrollLeft = preCheckValues.value.length > checkValues.length ? 0 : tbody.scrollWidth;
|
|
|
}
|
|
|
+ preCheckValues.value =checkValues;
|
|
|
}, 300)
|
|
|
}
|
|
|
const getTdColor = (water_cut) => {
|
|
@@ -471,20 +524,20 @@ export default defineComponent({
|
|
|
current: formState.page,
|
|
|
pageSize: formState.rows,
|
|
|
showSizeChanger: true,
|
|
|
- pageSizeOptions:viewModel.value=="list"?['10', '20', '30', '40', '50']:['12', '24', '36', '48', '60'],
|
|
|
+ pageSizeOptions: viewModel.value == "list" ? ['10', '20', '30', '40', '50'] : ['12', '24', '36', '48', '60'],
|
|
|
showTotal: total => getPaginationTotalTitle(total)
|
|
|
}));
|
|
|
|
|
|
watch(() => viewModel.value,
|
|
|
() => {
|
|
|
- pagination.value.current=1;
|
|
|
- formState.page=1;
|
|
|
- if(viewModel.value=="list"){
|
|
|
- formState.rows=10;
|
|
|
- pagination.value.pageSize=10;
|
|
|
- }else{
|
|
|
- formState.rows=12;
|
|
|
- pagination.value.pageSize=12;
|
|
|
+ pagination.value.current = 1;
|
|
|
+ formState.page = 1;
|
|
|
+ if (viewModel.value == "list") {
|
|
|
+ formState.rows = 10;
|
|
|
+ pagination.value.pageSize = 10;
|
|
|
+ } else {
|
|
|
+ formState.rows = 12;
|
|
|
+ pagination.value.pageSize = 12;
|
|
|
}
|
|
|
loadData();
|
|
|
});
|
|
@@ -605,7 +658,7 @@ export default defineComponent({
|
|
|
}
|
|
|
const treeOnSelect = function (selected, selectedNodes, node) {
|
|
|
console.log(selected, selectedNodes, node);
|
|
|
- if (selectedNodes.node.parent != undefined||activeTab.value == "1") {
|
|
|
+ if (selectedNodes.node.parent != undefined || activeTab.value == "1") {
|
|
|
if (activeTab.value == "1") {
|
|
|
formState.org_id_a1 = selected.length > 0 ? selectedNodes.node.key : '';
|
|
|
} else {
|
|
@@ -628,7 +681,7 @@ export default defineComponent({
|
|
|
formRef, viewModel, handleTableChange, detail,
|
|
|
formState, isShowDoc, showDoc, docList, resetFields, showColumnType, filterColumns,
|
|
|
labelCol, getTdColor, downFile,
|
|
|
- tabChange, onCheckboxChange, treeRef,colspan,
|
|
|
+ tabChange, onCheckboxChange, treeRef, colspan,
|
|
|
treeOnExpand,
|
|
|
subjectTrees,
|
|
|
getSubjectTree, searchTree,
|
|
@@ -733,7 +786,8 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
.well-card-table {
|
|
|
- width:100%;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
th {
|
|
|
width: 25%;
|
|
|
text-align: left;
|
|
@@ -765,10 +819,12 @@ export default defineComponent({
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
}
|
|
|
-.ant-card-index:hover{
|
|
|
+
|
|
|
+.ant-card-index:hover {
|
|
|
box-shadow: 3px 2px 10px #999;
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
+
|
|
|
.color_level1, .ant-table-tbody > tr > td.color_level1:hover {
|
|
|
}
|
|
|
|