|
@@ -3,7 +3,7 @@
|
|
|
style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5);z-index: 999; "></div>
|
|
|
<div class="query-index">
|
|
|
<div data-v-step="1"
|
|
|
- :style="showOverlay && curStepVal==1?'margin:auto;width:660px;padding:10px; z-index:1000;display:inline-block;height:50px;background:white;':'margin:auto;width: 600px;padding:10px;'">
|
|
|
+ :style="showOverlay && curStepVal==1?'margin:auto;width:50%;padding:10px; z-index:1000;display:inline-block;height:50px;background:white;':'margin:auto;width: 50%;padding:10px;'">
|
|
|
<a-space>
|
|
|
<QueryHistoryComplete id="keyName" v-model:value="formState.defaultKeyString"
|
|
|
style="width: 500px"></QueryHistoryComplete>
|
|
@@ -26,39 +26,54 @@
|
|
|
</div>
|
|
|
<v-tour name="queryTour" style=" z-index: 1000;" :steps="steps" :options="myOptions"
|
|
|
:callbacks="myCallbacks"></v-tour>
|
|
|
-
|
|
|
<div data-v-step="2" v-show="formState.showMoreQuery"
|
|
|
- :style="showOverlay && curStepVal==2?'margin:auto;width:500px;padding:10px 10px 10px 50px; z-index:1000;display:inline-block;height:390px;background:white;':'margin:auto;width: 500px;padding:10px 10px 10px 50px;'">
|
|
|
+ style="height:90px;"
|
|
|
+ :style="showOverlay && curStepVal==2?'margin:auto;width:60%; z-index:1000;display:inline-block;background:white;':
|
|
|
+ 'margin:auto;width: 60%;'">
|
|
|
<a-divider orientation="left"><b style="color:#4E61D0">1.输入检索控制条件</b></a-divider>
|
|
|
<a-row :gutter="24">
|
|
|
- <a-col :span="24">
|
|
|
- <div class="col-title">组织单位:</div>
|
|
|
- <a-input v-model:value="formState.org_name_a1" style="width: 400px"></a-input>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item name="org_name_a1" label="组织单位:" :label-col="{span:6}">
|
|
|
+ <a-tree-select
|
|
|
+ show-search
|
|
|
+ allow-clear
|
|
|
+ tree-line
|
|
|
+ :tree-data="organizationTree"
|
|
|
+ tree-node-filter-prop="label"
|
|
|
+ :width="150"
|
|
|
+ @change="onChangeTree"
|
|
|
+ >
|
|
|
+ </a-tree-select>
|
|
|
+ </a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="24">
|
|
|
- <div class="col-title">作业区/项目部:</div>
|
|
|
- <a-input v-model:value="formState.bz_dwmc" style="width: 400px"></a-input>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item name="bz_dwmc" label="作业区/项目部:" :label-col="{span:6}">
|
|
|
+ <a-input v-model:value="formState.bz_dwmc"></a-input>
|
|
|
+ </a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="24">
|
|
|
- <div class="col-title">井名:</div>
|
|
|
- <a-input v-model:value="formState.well_common_name" style="width: 400px"></a-input>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item name="well_common_name" label="井名:" :label-col="{span:6}">
|
|
|
+ <a-input v-model:value="formState.well_common_name"></a-input>
|
|
|
+ </a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="24">
|
|
|
- <div class="col-title">地层名称:</div>
|
|
|
- <a-input v-model:value="formState.formation_name" style="width: 400px"></a-input>
|
|
|
+ <a-col :span="6">
|
|
|
+ <a-form-item name="formation_name" label="地层名称:" :label-col="{span:6}">
|
|
|
+ <a-input v-model:value="formState.formation_name"></a-input>
|
|
|
+ </a-form-item>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</div>
|
|
|
<div data-v-step="3" v-show="formState.showMoreQuery"
|
|
|
- :style="showOverlay && curStepVal==3?'margin:auto;width:500px;padding:10px; z-index:1000;display:inline-block;min-height:200px;background:white;':'margin:auto;width: 500px;padding:10px;'">
|
|
|
+ :style="showOverlay && curStepVal==3?'margin:auto;width:60%;z-index:1000;display:inline-block;background:white;':'margin:auto;width: 60%;'">
|
|
|
<a-divider orientation="left"><b style="color:#4E61D0">2.输入检索内容条件</b></a-divider>
|
|
|
<a-row :gutter="24">
|
|
|
<a-col :span="24" class="query-row" v-for="(it,index) in limiters">
|
|
|
- <div class="col-title">
|
|
|
+ <div>
|
|
|
<a-select v-model:value="it.relation" :options="operTexts" class="operTexts"></a-select>
|
|
|
</div>
|
|
|
- <a-select v-model:value="it.fields" :options="fieldList" class="operTexts"></a-select>
|
|
|
- <a-input v-model:value="it.value" style="width: 285px"></a-input>
|
|
|
+ <a-select style="width: 180px;" @change="onChangeField" v-model:value="it.fields" :options="fieldList" :field-names="{label:'fieldName',value:'fieldCode'}" class="operTexts"></a-select>
|
|
|
+ <a-date-picker v-if="fieldDataType==='DATE'" v-model:value="it.value" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 285px"/>
|
|
|
+ <a-input v-else v-model:value="it.value" style="width: 285px"></a-input>
|
|
|
<img src="~@/assets/images/add.png" @click="addQuery" v-if="index==0"/>
|
|
|
<img src="~@/assets/images/sub.png" @click="onDelete(index)" v-if="index>0"/>
|
|
|
</a-col>
|
|
@@ -72,6 +87,7 @@ import {defineComponent, ref, reactive, watch, getCurrentInstance} from 'vue';
|
|
|
import {type FormInstance, message, type SelectProps} from "ant-design-vue";
|
|
|
import QueryHistoryComplete from '@/components/basic/querylog/history-complete.vue';
|
|
|
import {show} from "dom7";
|
|
|
+import {get} from "@/api/common";
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
@@ -92,17 +108,17 @@ export default defineComponent({
|
|
|
target: '[data-v-step="1"]',
|
|
|
header: {
|
|
|
title: '<div style="height: 0;border-top: 12px solid transparent; border-bottom: 15px solid transparent;' +
|
|
|
- 'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
|
|
|
- 'position:absolute;right:364px;top:15px;"></div>' +
|
|
|
- '<div style="width:365px;color: white;background: #4c8dff;display:inline-block;' +
|
|
|
- 'font-size: 15px;border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
|
|
|
- '| “一框式”检索<span style="padding-left: 20px;">1/3</span></div>'
|
|
|
+ 'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
|
|
|
+ 'position:absolute;right:364px;top:15px;"></div>' +
|
|
|
+ '<div style="width:365px;color: white;background: #4c8dff;display:inline-block;' +
|
|
|
+ 'font-size: 15px;border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
|
|
|
+ '| “一框式”检索<span style="padding-left: 20px;">1/3</span></div>'
|
|
|
},
|
|
|
content: '<div style="display:inline-block;width:365px;font-size:14px;color: white;background: #4c8dff;' +
|
|
|
- 'border-radius:0 0 10px 10px;padding:5px 15px 0px 15px;position: absolute;top:55px;">' +
|
|
|
- '综合搜索栏,将检索功能浓缩至"一框"中。可直接输入多种类型的' +
|
|
|
- '关键词如井号、井名、生产作业名词到检索框中进行搜索;同时支持输入运算符“大于""等于""少于”“不等于”进行检索词的组合运算<br/>' +
|
|
|
- '<br/>点击“更多查询"可查看更多检索条件</div>',
|
|
|
+ 'border-radius:0 0 10px 10px;padding:5px 15px 0px 15px;position: absolute;top:55px;">' +
|
|
|
+ '综合搜索栏,将检索功能浓缩至"一框"中。可直接输入多种类型的' +
|
|
|
+ '关键词如井号、井名、生产作业名词到检索框中进行搜索;同时支持输入运算符“大于""等于""少于”“不等于”进行检索词的组合运算<br/>' +
|
|
|
+ '<br/>点击“更多查询"可查看更多检索条件</div>',
|
|
|
params: {
|
|
|
placement: 'right'
|
|
|
}
|
|
@@ -111,15 +127,15 @@ export default defineComponent({
|
|
|
target: '[data-v-step="2"]',
|
|
|
header: {
|
|
|
title: '<div style="height: 0;border-top: 12px solid transparent; border-bottom: 15px solid transparent;' +
|
|
|
- 'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
|
|
|
- 'position:absolute;right:369px;top:11px;"></div>' +
|
|
|
- '<div style="width:370px;color: white;background: #4c8dff;display: inline-block;font-size: 15px;' +
|
|
|
- 'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
|
|
|
- '| 检索控制条件<span style="padding-left: 205px;">2/3</span></div>',
|
|
|
+ 'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
|
|
|
+ 'position:absolute;right:369px;top:11px;"></div>' +
|
|
|
+ '<div style="width:370px;color: white;background: #4c8dff;display: inline-block;font-size: 15px;' +
|
|
|
+ 'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;">' +
|
|
|
+ '| 检索控制条件<span style="padding-left: 205px;">2/3</span></div>',
|
|
|
},
|
|
|
content: '<div style="display:inline-block;width:370px;height:50px;font-size:14px;color: white;background: #4c8dff;' +
|
|
|
- 'border-radius:0 0 10px 10px;padding:5px 15px 0px 15px;position: absolute;top:50px;">' +
|
|
|
- '可选择控件条件进行查询范围的缩窄<br/></div>',
|
|
|
+ 'border-radius:0 0 10px 10px;padding:5px 15px 0px 15px;position: absolute;top:50px;">' +
|
|
|
+ '可选择控件条件进行查询范围的缩窄<br/></div>',
|
|
|
params: {
|
|
|
placement: 'right'
|
|
|
}
|
|
@@ -128,27 +144,27 @@ export default defineComponent({
|
|
|
target: '[data-v-step="3"]',
|
|
|
header: {
|
|
|
title: '<div style="height: 0;border-top: 12px solid transparent; border-bottom: 15px solid transparent;' +
|
|
|
- 'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
|
|
|
- 'position:absolute;right:450px;bottom:11px;"></div>' +
|
|
|
- '<div style="color: white;background: #4c8dff;display: inline;font-size: 15px;' +
|
|
|
- 'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;' +
|
|
|
- 'position:relative;bottom:198px;">' +
|
|
|
- '| 多个检索项组合查询<span style="padding-left: 250px;">3/3</span></div>',
|
|
|
+ 'border-left: 15px solid transparent;border-right: 12px solid #4c8dff;' +
|
|
|
+ 'position:absolute;right:450px;bottom:11px;"></div>' +
|
|
|
+ '<div style="color: white;background: #4c8dff;display: inline;font-size: 15px;' +
|
|
|
+ 'border-radius:10px 10px 0 0;padding:5px 20px 0 10px;font-weight:bolder;' +
|
|
|
+ 'position:relative;bottom:198px;">' +
|
|
|
+ '| 多个检索项组合查询<span style="padding-left: 250px;">3/3</span></div>',
|
|
|
},
|
|
|
content: '<div style="color: white;background: #4c8dff;display: inline;width:450px;font-size: 14px;' +
|
|
|
- 'border-radius:0 0 10px 10px;position: absolute;bottom:-89px;padding:5px 15px 0px 15px;">' +
|
|
|
- '1.首先须在下拉框中选择“井号"或“井名"的类别,输入想搜索的井<br/>' +
|
|
|
- '2.再从下拉框中选择其他检索项如“产油量"等,输入该检索项具体<br/>' +
|
|
|
- '要查询的值。例如想查看并号为001的产油量等于100的查询结果。<br/>' +
|
|
|
- '3.支持自由选择检索项间的逻辑关系:<br/>' +
|
|
|
- 'AND(与)、OR(或)、NOT(非)<br/><br/>' +
|
|
|
- '举例:<br/>' +
|
|
|
- '1) 检索井名包含12和产油量为100的结果<br/>' +
|
|
|
- '<span style="padding-left: 20px;">检索式: 井名 12 AND 产油量100</span><br/>' +
|
|
|
- '2) 检索井名包含12但不查地形区为益地的结果<br/>' +
|
|
|
- '<span style="padding-left: 20px;">检索式: 井名 12 NOT 地形区 盆地</span><br/>' +
|
|
|
- '3) 检索井名为12-12或12-44的31<br/>' +
|
|
|
- '<span style="padding-left: 20px;">检索式: 井名 12-12 0R 井名 12-44</span></div>',
|
|
|
+ 'border-radius:0 0 10px 10px;position: absolute;bottom:-89px;padding:5px 15px 0px 15px;">' +
|
|
|
+ '1.首先须在下拉框中选择“井号"或“井名"的类别,输入想搜索的井<br/>' +
|
|
|
+ '2.再从下拉框中选择其他检索项如“产油量"等,输入该检索项具体<br/>' +
|
|
|
+ '要查询的值。例如想查看并号为001的产油量等于100的查询结果。<br/>' +
|
|
|
+ '3.支持自由选择检索项间的逻辑关系:<br/>' +
|
|
|
+ 'AND(与)、OR(或)、NOT(非)<br/><br/>' +
|
|
|
+ '举例:<br/>' +
|
|
|
+ '1) 检索井名包含12和产油量为100的结果<br/>' +
|
|
|
+ '<span style="padding-left: 20px;">检索式: 井名 12 AND 产油量100</span><br/>' +
|
|
|
+ '2) 检索井名包含12但不查地形区为益地的结果<br/>' +
|
|
|
+ '<span style="padding-left: 20px;">检索式: 井名 12 NOT 地形区 盆地</span><br/>' +
|
|
|
+ '3) 检索井名为12-12或12-44的31<br/>' +
|
|
|
+ '<span style="padding-left: 20px;">检索式: 井名 12-12 0R 井名 12-44</span></div>',
|
|
|
params: {
|
|
|
placement: 'right'
|
|
|
}
|
|
@@ -206,26 +222,26 @@ export default defineComponent({
|
|
|
}, props.queryObject?.formState));
|
|
|
|
|
|
watch(
|
|
|
- () => props.queryObject,
|
|
|
- () => {
|
|
|
- if (props.queryObject != null) {
|
|
|
- formState.value = Object.assign({}, {
|
|
|
- page: 1, rows: 10, showMoreQuery: true,
|
|
|
- well_common_name: '',
|
|
|
- bz_dwmc: '',
|
|
|
- formation_name: '',
|
|
|
- org_name_a1: '',
|
|
|
- defaultField: '',
|
|
|
- defaultKeyString: '',
|
|
|
- operation: 'AND'
|
|
|
- }, props.queryObject.formState);
|
|
|
- limiters.value = props.queryObject.limiters.length > 0 ? props.queryObject.limiters : [{
|
|
|
- field: '',
|
|
|
- keyString: '',
|
|
|
- operation: 'AND'
|
|
|
- }];
|
|
|
- }
|
|
|
- }, {}
|
|
|
+ () => props.queryObject,
|
|
|
+ () => {
|
|
|
+ if (props.queryObject != null) {
|
|
|
+ formState.value = Object.assign({}, {
|
|
|
+ page: 1, rows: 10, showMoreQuery: true,
|
|
|
+ well_common_name: '',
|
|
|
+ bz_dwmc: '',
|
|
|
+ formation_name: '',
|
|
|
+ org_name_a1: '',
|
|
|
+ defaultField: '',
|
|
|
+ defaultKeyString: '',
|
|
|
+ operation: 'AND'
|
|
|
+ }, props.queryObject.formState);
|
|
|
+ limiters.value = props.queryObject.limiters.length > 0 ? props.queryObject.limiters : [{
|
|
|
+ field: '',
|
|
|
+ keyString: '',
|
|
|
+ operation: 'AND'
|
|
|
+ }];
|
|
|
+ }
|
|
|
+ }, {}
|
|
|
);
|
|
|
|
|
|
function loadStyle() {
|
|
@@ -235,10 +251,10 @@ export default defineComponent({
|
|
|
const div = $divs[i];
|
|
|
if (curStepVal.value == 3) {
|
|
|
div.setAttribute("style", "background-color:#4c8dff;color:white;height:30px;width:100%;" +
|
|
|
- "position: relative;top:-201px;padding-top:4px;");
|
|
|
+ "position: relative;top:-201px;padding-top:4px;");
|
|
|
} else {
|
|
|
div.setAttribute("style", "background-color:#4c8dff;color:white;height:30px;width:100%;" +
|
|
|
- "position: relative;top:-1px;padding-top:4px;");
|
|
|
+ "position: relative;top:-1px;padding-top:4px;");
|
|
|
}
|
|
|
}
|
|
|
const $buttons = document.getElementsByClassName("v-step__button");
|
|
@@ -257,11 +273,25 @@ export default defineComponent({
|
|
|
{value: 'NOT', label: 'NOT'}
|
|
|
] as SelectProps['options'];
|
|
|
|
|
|
- const fieldList = [
|
|
|
- {value: 'well_id', label: '井号'},
|
|
|
- {value: 'well_common_name', label: '井名'},
|
|
|
- {value: 'well_purpose', label: '井别'}
|
|
|
- ] as SelectProps['options'];
|
|
|
+ // const fieldList = [
|
|
|
+ // {value: 'well_id', label: '井号'},
|
|
|
+ // {value: 'well_common_name', label: '井名'},
|
|
|
+ // {value: 'well_purpose', label: '井别'}
|
|
|
+ // ] as SelectProps['options'];
|
|
|
+ const fieldList = ref<SelectProps['options']>();
|
|
|
+ const fieldDataType = ref("");
|
|
|
+ const getFieldListByIndexIdAndParent = async function () {
|
|
|
+ get('esindex/getFieldListByIndexIdAndParentIsNull', {}).then(data => {
|
|
|
+ console.log("getFieldListByIndexIdAndParent", data)
|
|
|
+ fieldList.value = data;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ getFieldListByIndexIdAndParent();
|
|
|
+
|
|
|
+ const onChangeField = (val: any, option: any)=>{
|
|
|
+ console.log("onChangeField", val, option);
|
|
|
+ fieldDataType.value = option.dataType;
|
|
|
+ }
|
|
|
|
|
|
const addQuery = () => {
|
|
|
limiters.value.push({fields: '', value: '', opreation: '等于', relation: 'AND'});
|
|
@@ -300,14 +330,32 @@ export default defineComponent({
|
|
|
return false;
|
|
|
}
|
|
|
if (curTour.value && curTour.value['queryTour'] ) {
|
|
|
- (curTour.value['queryTour'] as any).start();
|
|
|
- loadStyle();
|
|
|
- showOverlay.value = true;
|
|
|
+ (curTour.value['queryTour'] as any).start();
|
|
|
+ loadStyle();
|
|
|
+ showOverlay.value = true;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ //#regin 组织单位
|
|
|
+ const organizationTree: any = ref([]);
|
|
|
+ const getOrganizationTree = async function () {
|
|
|
+ get('wellInfo/getOrganizationTree', {}).then(data => {
|
|
|
+ console.log("getOrganizationTree", data)
|
|
|
+ organizationTree.value = data;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ getOrganizationTree();
|
|
|
+
|
|
|
+ const onChangeTree = (item: any) =>{
|
|
|
+ //tree 使用lable做树的value值会报值重复错误
|
|
|
+ formState.value.org_name_a1 = item;
|
|
|
+ }
|
|
|
+ //#endregin
|
|
|
+
|
|
|
return {
|
|
|
formState, limiters, operTexts, fieldList, addQuery, onDelete, getQuery, formRef,
|
|
|
- steps, myOptions, curTour, curStepVal, showOverlay, loadStyle, myCallbacks,showHelp
|
|
|
+ steps, myOptions, curTour, curStepVal, showOverlay, loadStyle, myCallbacks,showHelp,
|
|
|
+ organizationTree, onChangeTree, onChangeField, fieldDataType
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -338,47 +386,48 @@ export default defineComponent({
|
|
|
background-color: white;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
-}
|
|
|
|
|
|
-.leftTriangle {
|
|
|
- height: 0;
|
|
|
- border-top: 12px solid transparent;
|
|
|
- border-bottom: 15px solid transparent;
|
|
|
- border-left: 15px solid transparent;
|
|
|
- border-right: 12px solid #4c8dff;
|
|
|
-}
|
|
|
+ .leftTriangle {
|
|
|
+ height: 0;
|
|
|
+ border-top: 12px solid transparent;
|
|
|
+ border-bottom: 15px solid transparent;
|
|
|
+ border-left: 15px solid transparent;
|
|
|
+ border-right: 12px solid #4c8dff;
|
|
|
+ }
|
|
|
|
|
|
-.tips {
|
|
|
- color: white;
|
|
|
- background: #4c8dff;
|
|
|
- display: inline-block;
|
|
|
- font-size: 14px;
|
|
|
- border-radius: 0 0 10px 10px;
|
|
|
- padding: 5px 15px 0px 15px;
|
|
|
-}
|
|
|
+ .tips {
|
|
|
+ color: white;
|
|
|
+ background: #4c8dff;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 0 0 10px 10px;
|
|
|
+ padding: 5px 15px 0px 15px;
|
|
|
+ }
|
|
|
|
|
|
-.ant-row {
|
|
|
+ .ant-row {
|
|
|
+ height: 36px;
|
|
|
|
|
|
- .ant-col {
|
|
|
- margin: 10px 0px;
|
|
|
+ .ant-col {
|
|
|
+ padding: 0px 0px !important;
|
|
|
|
|
|
- .col-title {
|
|
|
- width: 120px;
|
|
|
- text-align: left;
|
|
|
- float: left;
|
|
|
+ input{
|
|
|
+ width:150px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .query-row {
|
|
|
- display: flex;
|
|
|
|
|
|
- img {
|
|
|
- margin-left: 5px;
|
|
|
+ .query-row {
|
|
|
+ display: flex;
|
|
|
+ justify-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.operTexts {
|
|
|
- width: 80px;
|
|
|
+ .operTexts {
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|