|
|
@@ -1,52 +1,75 @@
|
|
|
<template>
|
|
|
<div class="card-search">
|
|
|
<div>
|
|
|
- <a-form
|
|
|
- ref="formRef"
|
|
|
- name="advanced_search"
|
|
|
- class="ant-advanced-search-form"
|
|
|
- :model="formState"
|
|
|
- @finish="onQuery"
|
|
|
- >
|
|
|
- <div>
|
|
|
- <a-space>
|
|
|
- <a-select v-model:value="formState.tabName" :options="fieldList" class="operTexts"></a-select>
|
|
|
- <a-input v-model:value="formState.subjectName" style="width: 400px"></a-input>
|
|
|
- <a-button type="primary" html-type="submit" @click="onQuery">查询</a-button>
|
|
|
- <a-button @click="() => {formRef.resetFields();}">重置</a-button>
|
|
|
- </a-space>
|
|
|
- </div>
|
|
|
- <a-divider orientation="center" @click="pageState.showMoreQuery=!pageState.showMoreQuery">
|
|
|
- <template v-if="pageState.showMoreQuery">
|
|
|
- 展开更多
|
|
|
- <DoubleRightOutlined rotate="90"/>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- 折 叠
|
|
|
- <DoubleLeftOutlined rotate="90"/>
|
|
|
- </template>
|
|
|
- </a-divider>
|
|
|
- </a-form>
|
|
|
+ <a-space>
|
|
|
+ <a-select v-model:value="formState.tabName" :options="fieldList" class="operTexts"></a-select>
|
|
|
+ <a-input v-model:value="formState.subjectName" style="width: 400px"></a-input>
|
|
|
+ <a-button type="primary" html-type="submit" @click="onQuery">查询</a-button>
|
|
|
+ <a-button @click="() => {formRef.resetFields();}">重置</a-button>
|
|
|
+ </a-space>
|
|
|
+ </div>
|
|
|
+ <div v-show="pageState.showMoreQuery">
|
|
|
+ <queryCriteria ref="queryRef"></queryCriteria>
|
|
|
+ </div>
|
|
|
+ <a-divider orientation="center" @click="pageState.showMoreQuery=!pageState.showMoreQuery">
|
|
|
+ <template v-if="!pageState.showMoreQuery">
|
|
|
+ 展开更多
|
|
|
+ <DoubleRightOutlined rotate="90"/>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ 收 起
|
|
|
+ <DoubleLeftOutlined rotate="90"/>
|
|
|
+ </template>
|
|
|
+ </a-divider>
|
|
|
+ <a-spin :spinning="pageState.loading">
|
|
|
<div class="search-container">
|
|
|
<div class="search-body">
|
|
|
<div class="search-order">
|
|
|
<div>综合排序
|
|
|
<p class="search-order-icon">
|
|
|
- <caret-up-outlined @click="pageState.defaultOrder='asc'" :style="{ color: pageState.defaultOrder=='asc'? '#1890FF':'#cccccc' }"/>
|
|
|
- <caret-down-outlined @click="pageState.defaultOrder='desc'" :style="{ color: pageState.defaultOrder=='desc'? '#1890FF':'#cccccc' }"/></p></div>
|
|
|
+ <caret-up-outlined @click="pageState.defaultOrder='asc'"
|
|
|
+ :style="{ color: pageState.defaultOrder=='asc'? '#1890FF':'#cccccc' }"/>
|
|
|
+ <caret-down-outlined @click="pageState.defaultOrder='desc'"
|
|
|
+ :style="{ color: pageState.defaultOrder=='desc'? '#1890FF':'#cccccc' }"/>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
<div>创建时间
|
|
|
<p class="search-order-icon">
|
|
|
- <caret-up-outlined @click="pageState.timeOrder='asc'" :style="{ color: pageState.timeOrder=='asc'? '#1890FF':'#cccccc' }"/>
|
|
|
- <caret-down-outlined @click="pageState.timeOrder='desc'" :style="{ color: pageState.timeOrder=='desc'? '#1890FF':'#cccccc' }"/></p>
|
|
|
+ <caret-up-outlined @click="pageState.timeOrder='asc'"
|
|
|
+ :style="{ color: pageState.timeOrder=='asc'? '#1890FF':'#cccccc' }"/>
|
|
|
+ <caret-down-outlined @click="pageState.timeOrder='desc'"
|
|
|
+ :style="{ color: pageState.timeOrder=='desc'? '#1890FF':'#cccccc' }"/>
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <component is="cycleView" :kid="'id'"></component>
|
|
|
- <component is="listView" :kid="'id'"></component>
|
|
|
- <component is="tableView"></component>
|
|
|
- <component is="listView"></component>
|
|
|
- <component is="tableView"></component>
|
|
|
- <component is="chatView" :kid="'id'"></component>
|
|
|
- <component is="docView"></component>
|
|
|
+ <template v-for="(it,index) in dataList">
|
|
|
+ <div>
|
|
|
+ <div class="search-body-title">
|
|
|
+ 井名：{{ it.well_common_name }}<p @click="showWell(it.well_id)">
|
|
|
+ <img src="~@/assets/images/info.png" width="18" height="16"/>查看井基础信息</p>
|
|
|
+ </div>
|
|
|
+ <div class="search-body-item">
|
|
|
+ <component :is="it.component" :indexSetting="it.indexSetting" :data="it" v-show="it.showMore||index<=3"></component>
|
|
|
+
|
|
|
+ <a-divider orientation="center" @click="it.showMore=!it.showMore">
|
|
|
+ <template v-if="!it.showMore">
|
|
|
+ 展开更多
|
|
|
+ <DoubleRightOutlined rotate="90"/>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ 收 起
|
|
|
+ <DoubleLeftOutlined rotate="90"/>
|
|
|
+ </template>
|
|
|
+ </a-divider>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <a-pagination show-size-changer
|
|
|
+ v-model:current="pageParams.current" :total="pageParams.total"
|
|
|
+ style="float: right;margin-top: 10px;"
|
|
|
+ :pageSize="pageParams.pageSize" :show-total="total => `共 ${total} 条`"
|
|
|
+ @change="(current)=>handleChange({ current: current,pageSize: pageParams.pageSize })"
|
|
|
+ @showSizeChange="(current,pageSize)=>handleChange({ current: current,pageSize: pageSize })"/>
|
|
|
</div>
|
|
|
<div class="search-sider">
|
|
|
<div class="search-sider-block">
|
|
|
@@ -83,7 +106,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </a-spin>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -96,32 +119,92 @@ import listView from '@/components/basic/es-result/list-view.vue';
|
|
|
import chatView from '@/components/basic/es-result/chat-view.vue';
|
|
|
import docView from '@/components/basic/es-result/doc-view.vue';
|
|
|
import cycleView from '@/components/basic/es-result/cycle-view.vue';
|
|
|
+import {get, postData} from "@/api/common";
|
|
|
+import queryCriteria from '@/components/basic/es-result/query-criteria.vue';
|
|
|
+import {useTabsViewStore} from "@/store/modules/tabsView";
|
|
|
+import {getPaginationTotalTitle} from "@/utils/common";
|
|
|
+import type {TableProps} from "ant-design-vue";
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'esdomainResult',
|
|
|
- components: {tableView, listView, chatView, docView,cycleView},
|
|
|
+ components: {tableView, listView, chatView, docView, cycleView, queryCriteria},
|
|
|
setup() {
|
|
|
|
|
|
const route = useRoute();
|
|
|
const router = useRouter();
|
|
|
const formRef = ref<FormInstance>();
|
|
|
+ const tabsViewStore = useTabsViewStore();
|
|
|
+ const dataList = ref<any>([]);
|
|
|
+ const indexList = ref<any>([]);
|
|
|
const formState = reactive({
|
|
|
page: 1, rows: 10, subjectName: '', tabName: '', tabCode: null, total: 0
|
|
|
});
|
|
|
+ const displayType = ['cycleView', 'tableView', 'listView', 'chatView', 'docView'];
|
|
|
+
|
|
|
const pageState = reactive({
|
|
|
showMoreQuery: false,
|
|
|
- defaultOrder:'',
|
|
|
- timeOrder:''
|
|
|
+ defaultOrder: '',
|
|
|
+ timeOrder: '',
|
|
|
+ loading: false
|
|
|
+ });
|
|
|
+ const pageParams = ref({
|
|
|
+ total: 0,
|
|
|
+ current: 1,
|
|
|
+ pageSize: 3,
|
|
|
+ showSizeChanger: true,
|
|
|
+ showTotal: total => getPaginationTotalTitle(total)
|
|
|
});
|
|
|
|
|
|
+ const handleChange: TableProps['onChange'] = (
|
|
|
+ pag: { pageSize: number; current: number },
|
|
|
+ ) => {
|
|
|
+ pageParams.value.current = pag.current;
|
|
|
+ pageParams.value.pageSize = pag.pageSize;
|
|
|
+ onQuery();
|
|
|
+ };
|
|
|
+
|
|
|
+ const queryRef = ref<typeof queryCriteria>();
|
|
|
const fieldList = [
|
|
|
{value: '', label: '不限'},
|
|
|
{value: 'wellId', label: '井号'},
|
|
|
{value: 'wellName', label: '井名'}
|
|
|
] as SelectProps['options'];
|
|
|
|
|
|
+ get('esindex/getList', {page: 1, rows: 99}).then(result => {
|
|
|
+ indexList.value = result.list;
|
|
|
+ })
|
|
|
+ const showWell = (well_id) => {
|
|
|
+ tabsViewStore.addTabByPath('/wellinfo/detail', {id: well_id});
|
|
|
+ }
|
|
|
+
|
|
|
function onQuery() {
|
|
|
- console.log("");
|
|
|
+ let queryObject = queryRef.value?.getQuery();
|
|
|
+ loadData(queryObject);
|
|
|
+ }
|
|
|
+
|
|
|
+ function loadData(queryObject) {
|
|
|
+ queryObject.page = pageParams.value.current - 1;
|
|
|
+ queryObject.limit = pageParams.value.pageSize;
|
|
|
+
|
|
|
+ pageState.loading = true;
|
|
|
+ postData('esquery/Query', queryObject).then(result => {
|
|
|
+ pageState.loading = false;
|
|
|
+ console.log(result);
|
|
|
+ dataList.value = (result as any).rows;
|
|
|
+ pageParams.value.total = (result as any).total;
|
|
|
+
|
|
|
+ getIndexSetting();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function getIndexSetting() {
|
|
|
+ dataList.value.forEach(it => {
|
|
|
+ let itSetting = indexList.value.find(ind => ind.indexCode == it.index);
|
|
|
+ if (itSetting) {
|
|
|
+ it.component = displayType[itSetting.displayType-1];
|
|
|
+ it.indexSetting = itSetting;
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
const listData: string[] = [
|
|
|
@@ -134,10 +217,27 @@ export default defineComponent({
|
|
|
'井号5-1',
|
|
|
];
|
|
|
return {
|
|
|
- router, route, formState, fieldList, formRef, onQuery, pageState, listData
|
|
|
+ router,
|
|
|
+ route,
|
|
|
+ formState,
|
|
|
+ fieldList,
|
|
|
+ formRef,
|
|
|
+ onQuery,
|
|
|
+ showWell,
|
|
|
+ pageState,
|
|
|
+ listData,
|
|
|
+ queryRef,
|
|
|
+ loadData,
|
|
|
+ dataList,
|
|
|
+ handleChange,
|
|
|
+ pageParams
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
+ let queryObject = localStorage.getItem("queryObject");
|
|
|
+ if (queryObject != null) {
|
|
|
+ this.loadData(JSON.parse(queryObject));
|
|
|
+ }
|
|
|
},
|
|
|
activated() {
|
|
|
}
|
|
|
@@ -152,25 +252,52 @@ export default defineComponent({
|
|
|
width: 80%;
|
|
|
min-width: 800px;
|
|
|
|
|
|
+ .search-body-title {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ padding-left: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ p {
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-weight: normal;
|
|
|
+ display: flex;
|
|
|
+ border: 1px solid #c9c9c9;
|
|
|
+ padding: 3px 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-body-item {
|
|
|
+ padding: 10px 20px;
|
|
|
+ margin-right: 10px;
|
|
|
+ box-shadow: 3px 2px 10px #999;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
.search-order {
|
|
|
display: flex;
|
|
|
font-size: 16px;
|
|
|
- margin-bottom: 9px;
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
- div{
|
|
|
+ div {
|
|
|
display: flex;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
- .search-order-icon{
|
|
|
+
|
|
|
+ .search-order-icon {
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
- span{
|
|
|
+ span {
|
|
|
height: 9px;
|
|
|
- cursor:pointer;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -183,15 +310,16 @@ export default defineComponent({
|
|
|
.search-sider-block {
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
- .search-sider-process{
|
|
|
+ .search-sider-process {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- span{
|
|
|
+
|
|
|
+ span {
|
|
|
padding: 3px 10px;
|
|
|
border: 1px solid black;
|
|
|
margin: 5px;
|
|
|
background-color: #f5f5f5;
|
|
|
- cursor:pointer;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
}
|
xiaoqiao
