|
@@ -8,7 +8,7 @@
|
|
|
<a-tab-pane key="2" tab="地质单元目录" forceRender="true">
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
- <DoubleLeftOutlined @click="showTree=false"/>
|
|
|
+ <DoubleLeftOutlined @click="showTree=false;colspan=6;"/>
|
|
|
</div>
|
|
|
<div style="margin-top: -15px">
|
|
|
<a-input-search
|
|
@@ -42,7 +42,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="query-index-close" v-else>
|
|
|
- <DoubleRightOutlined @click="showTree=true"/>
|
|
|
+ <DoubleRightOutlined @click="showTree=true;colspan=8;"/>
|
|
|
</div>
|
|
|
<div class="query-index-content">
|
|
|
<div class="query-index-form">
|
|
@@ -163,7 +163,7 @@
|
|
|
</div>
|
|
|
<div class="query-index-table" v-else>
|
|
|
<a-row :gutter="[24,8]">
|
|
|
- <a-col :span="8" v-for="item in data">
|
|
|
+ <a-col :span="colspan" v-for="item in data">
|
|
|
<a-card :title="'井名:'+item.well_common_name" class="ant-card-index" bodyStyle="padding: 10px;">
|
|
|
<template #extra>
|
|
|
<a-button type="link" @click="detail(item.well_id)">查看详情</a-button>
|
|
@@ -189,38 +189,46 @@
|
|
|
<th>最近采油日期:</th>
|
|
|
<td>{{ item.oil_prod_recent_date }}</td>
|
|
|
</tr>
|
|
|
- <tr>
|
|
|
+ <tr v-if="showColumnType.includes('oil')">
|
|
|
<th>最近月产油量:</th>
|
|
|
- <td>{{ item.oil_prod_mon }}t</td>
|
|
|
+ <td>
|
|
|
+ {{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>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
- <tr>
|
|
|
+ <tr v-if="showColumnType.includes('oil')">
|
|
|
<th>累产油量:</th>
|
|
|
- <td>{{ item.oil_prod_year }}t</td>
|
|
|
+ <td>
|
|
|
+ {{item.oil_prod_year == null ? "" : (item.oil_prod_year + "t")}}
|
|
|
+ </td>
|
|
|
</tr>
|
|
|
- <tr>
|
|
|
+ <tr v-if="showColumnType.includes('gas')">
|
|
|
<th>最近月产气量:</th>
|
|
|
- <td>{{ item.gas_prod_mon }}m³</td>
|
|
|
+ <td>
|
|
|
+ {{item.gas_prod_mon == null ? "" : (item.gas_prod_mon + "m³")}}
|
|
|
+ </td>
|
|
|
<td colspan="2" rowspan="2">
|
|
|
<div style="height:25px">
|
|
|
<ChartCell :timeType="('month')" :dataType="('gas')" :wellId="item.well_id"></ChartCell>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
- <tr>
|
|
|
+ <tr v-if="showColumnType.includes('gas')">
|
|
|
<th>累产气量:</th>
|
|
|
- <td>{{ item.gas_prod_year }}m³</td>
|
|
|
+ <td>
|
|
|
+ {{item.gas_prod_year == null ? "" : (item.gas_prod_year + "m³")}}
|
|
|
+ </td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</a-card>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</div>
|
|
|
- <a-pagination :page-size-options="['5', '20', '30', '40', '50']" show-size-changer
|
|
|
+ <a-pagination :page-size-options="pagination.pageSizeOptions" show-size-changer
|
|
|
v-model:current="pagination.current" :total="pagination.total"
|
|
|
style="float: right;margin-top: 10px;"
|
|
|
:pageSize="pagination.pageSize" :show-total="total => `共 ${total} 条`"
|
|
@@ -279,6 +287,7 @@ export default defineComponent({
|
|
|
const showQuery = ref(false);
|
|
|
const selectedRowKeys = ref([]);
|
|
|
const activeTab = ref("1");
|
|
|
+ const colspan =ref(8);
|
|
|
const showTree = ref(true);
|
|
|
const isShowDoc = ref(false);
|
|
|
const showColumnType = ref(['oil', 'gas']);
|
|
@@ -434,11 +443,12 @@ export default defineComponent({
|
|
|
filterColumns.value = filterValue as any;
|
|
|
}
|
|
|
);
|
|
|
+
|
|
|
const onCheckboxChange = () => {
|
|
|
setTimeout(() => {
|
|
|
- let v = document.getElementsByClassName("ant-table-body")[0];
|
|
|
- if (v) {
|
|
|
- v.scrollLeft = v.scrollWidth;
|
|
|
+ let tbody = document.getElementsByClassName("ant-table-body")[0];
|
|
|
+ if (tbody) {
|
|
|
+ tbody.scrollLeft = tbody.scrollWidth;
|
|
|
}
|
|
|
}, 300)
|
|
|
}
|
|
@@ -461,9 +471,24 @@ 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'],
|
|
|
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;
|
|
|
+ }
|
|
|
+ loadData();
|
|
|
+ });
|
|
|
+
|
|
|
const loadData = async function () {
|
|
|
loading.value = true;
|
|
|
const result: any = await get('wellInfo/getList', formState);
|
|
@@ -602,7 +627,7 @@ export default defineComponent({
|
|
|
formRef, viewModel, handleTableChange, detail,
|
|
|
formState, isShowDoc, showDoc, docList, resetFields, showColumnType, filterColumns,
|
|
|
labelCol, getTdColor, downFile,
|
|
|
- tabChange, onCheckboxChange, treeRef,
|
|
|
+ tabChange, onCheckboxChange, treeRef,colspan,
|
|
|
treeOnExpand,
|
|
|
subjectTrees,
|
|
|
getSubjectTree, searchTree,
|
|
@@ -707,6 +732,7 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
.well-card-table {
|
|
|
+ width:100%;
|
|
|
th {
|
|
|
width: 25%;
|
|
|
text-align: left;
|
|
@@ -722,10 +748,11 @@ export default defineComponent({
|
|
|
|
|
|
.ant-card-index {
|
|
|
|
|
|
- .ant-card-head-title{
|
|
|
+ .ant-card-head-title {
|
|
|
font-weight: bold;
|
|
|
- color:#1f37dd;
|
|
|
+ color: #1f37dd;
|
|
|
}
|
|
|
+
|
|
|
.ant-card-head {
|
|
|
padding: 0px 10px;
|
|
|
height: 35px;
|
|
@@ -737,7 +764,10 @@ export default defineComponent({
|
|
|
margin-top: 5px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+.ant-card-index:hover{
|
|
|
+ box-shadow: 3px 2px 10px #999;
|
|
|
+ opacity: 0.8;
|
|
|
+}
|
|
|
.color_level1, .ant-table-tbody > tr > td.color_level1:hover {
|
|
|
}
|
|
|
|