数据检索筛选功能修改完成

This commit is contained in:
2024-10-09 11:25:00 +08:00
parent 5cc716a3ba
commit 3c91e0edcf
2 changed files with 220 additions and 300 deletions

View File

@ -1,5 +1,23 @@
import request from '@/utils/request'
// 菜单
export function getMenu(query) {
return request({
url: '/search/mult.htm',
method: 'get',
params: query
})
}
// 获取航次和数据样品集列表
export function getDataList(query) {
return request({
url: '/search/result.htm',
method: 'get',
params: query
})
}
// 获取航次列表
export function getDataSearch(query) {
return request({

View File

@ -2,15 +2,21 @@
<div class="shuju">
<div class="shuju_con">
<div v-show="show == false" class="left">
<div class="tags">
<span class="tag" v-if="menu1">航次名称{{ menu1 }} <i class="el-icon-close" @click="menu1 = ''"></i></span>
<span class="tag" v-if="menu2">平台类型{{ menu2 }} <i class="el-icon-close" @click="menu2 = ''"></i></span>
<span class="tag" v-if="menu3">设备类型{{ menu3 }} <i class="el-icon-close" @click="menu3 = ''"></i></span>
<span class="tag" v-if="menu4">数据样品类型{{ menu4 }} <i class="el-icon-close" @click="menu4 = ''"></i></span>
</div>
<div class="left1">
<div class="xiala">
<el-select v-model="searchTypeValue" placeholder="">
<el-option v-for="(item, index) in searchType" :key="index" :label="item" :value="item" />
<el-option v-for="(item, index) in searchType" :key="index" :label="item.label" :value="item.label" :disabled="item.disabled" />
</el-select>
</div>
<el-input v-model="searchValue" placeholder="" />
<el-button class="sousuo" type="primary" icon="el-icon-search" @click="getSearch" />
<el-button v-if="menuShow" class="caidan" type="default" icon="el-icon-s-operation" @click="openDialog" />
<el-button v-if="menuShow" class="caidan" type="default" icon="el-icon-s-operation" @click="handleMenu" />
</div>
<div class="left3">
<el-radio-group v-model="radio">
@ -18,6 +24,30 @@
<el-radio label="航次">航次</el-radio>
</el-radio-group>
</div>
<div class="left4" v-if="searchTypeValue == '航次名称' && menuList1.length">
<div class="list">
<div class="list-title">请选择航次名称</div>
<div class="list-value" v-for="(item,index) in menuList1" :key="index" @click="selectMenu1(item)">{{ item.name }}</div>
</div>
</div>
<div class="left4" v-if="searchTypeValue == '平台类型' && menuList2.length">
<div class="list">
<div class="list-title">请选择平台类型</div>
<div class="list-value" v-for="(item,index) in menuList2" :key="index" @click="selectMenu2(item)">{{ item.name + '(' + item.value + ')' }}</div>
</div>
</div>
<div class="left4" v-if="searchTypeValue == '设备类型' && menuList3.length">
<div class="list">
<div class="list-title">请选择设备类型</div>
<div class="list-value" v-for="(item,index) in menuList3" :key="index" @click="selectMenu3(item)">{{ item.name + '(' + item.value + ')' }}</div>
</div>
</div>
<div class="left4" v-if="searchTypeValue == '数据样品类型' && menuList4.length">
<div class="list">
<div class="list-title">请选择数据样品类型</div>
<div class="list-value" v-for="(item,index) in menuList4" :key="index" @click="selectMenu4(item)">{{ item.name + '(' + item.value + ')' }}</div>
</div>
</div>
<div class="left4" v-if="radio == '数据样品集'">
<div v-for="(item, index) in dataList" :key="index" class="left4_1" @click="openList(item)">
<div class="left4_top">
@ -118,101 +148,17 @@
<img class="logo" src="../../static/images/logo_map.png" alt="" @click="goHome" />
</div>
</div>
<!-- 航次名称弹窗-->
<el-dialog title="请选择航次" :visible.sync="dialog1" width="1000px" :before-close="handleClose1">
<el-table ref="tableData1" stripe border :data="tableData1" @selection-change="handleSelectionChange"
:header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }">
<el-table-column type="index" label="#" width="50" />
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="voyage_name" label="航次名称" />
<el-table-column prop="ship_name" label="科考船舶" />
<el-table-column prop="voyage_start_date" label="离岗日期">
<template slot-scope="scope">
<span>{{ scope.row.voyage_start_date.slice(0, 10) }}</span>
</template>
</el-table-column>
<el-table-column prop="voyage_end_date" label="返岗日期">
<template slot-scope="scope">
<span>{{ scope.row.voyage_end_date.slice(0, 10) }}</span>
</template>
</el-table-column>
<el-table-column prop="voyage_officer" label="首席" />
<el-table-column prop="member_total" label="参航人数" />
<el-table-column prop="funding_org" label="资助机构" />
<el-table-column prop="funding_code" label="资助编号" />
</el-table>
<div class="pagination-box">
<el-pagination background :page-sizes="[10, 20, 30]" :page-size="params1.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total1" :current-page="pageNum1"
@size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
</div>
</el-dialog>
<!-- 平台类型弹窗-->
<el-dialog title="请选择平台" :visible.sync="dialog2" width="1200px" :before-close="handleClose2">
<el-table ref="tableData2" stripe border :data="tableData2" @selection-change="handleSelectionChange"
:header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }">
<el-table-column type="index" label="#" width="50" />
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="platform_name" label="平台类型名称" />
<el-table-column prop="platform_eng" label="英文类型名称" />
<el-table-column prop="platform_alias" label="别名" />
<el-table-column prop="platform_order" label="排序" width="50" />
<el-table-column prop="platform_group" label="分组" />
<el-table-column prop="create_time" label="创建时间" />
</el-table>
<div class="pagination-box">
<el-pagination background :page-sizes="[10, 20, 30]" :page-size="params2.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total2" :current-page="pageNum2"
@size-change="handleSizeChange2" @current-change="handleCurrentChange2" />
</div>
</el-dialog>
<!-- 设备类型弹窗-->
<el-dialog title="请选择设备" :visible.sync="dialog3" width="1200px" :before-close="handleClose3">
<el-table ref="tableData3" stripe border :data="tableData3" @selection-change="handleSelectionChange"
:header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }">
<el-table-column type="index" label="#" width="50" />
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="equipment_name" label="设备类型名称" width="300" />
<el-table-column prop="equipment_eng" label="英文名称" width="350" />
<el-table-column prop="equipment_alias" label="别名" width="100" />
<el-table-column prop="equipment_order" label="排序" width="50" />
<el-table-column prop="equipment_group" label="分组" />
<el-table-column prop="create_time" label="创建时间" width="160" />
</el-table>
<div class="pagination-box">
<el-pagination background :page-sizes="[10, 20, 30]" :page-size="params3.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total3" :current-page="pageNum3"
@size-change="handleSizeChange3" @current-change="handleCurrentChange3" />
</div>
</el-dialog>
<!-- 数据样品类型弹窗-->
<el-dialog title="请选择数据样品类型" :visible.sync="dialog4" width="1200px" :before-close="handleClose4">
<el-table ref="tableData4" stripe border :data="tableData4" @selection-change="handleSelectionChange"
:header-cell-style="{ background: '#dddfe6', color: '#555960', textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }">
<el-table-column type="index" label="#" width="50" />
<el-table-column type="selection" width="50" align="center" />
<el-table-column prop="data_name" label="数据样品类型类型名称" width="300" />
<el-table-column prop="data_eng" label="英文名称" width="350" />
<el-table-column prop="data_alias" label="别名" width="100" />
<el-table-column prop="data_order" label="排序" width="50" />
<el-table-column prop="data_group" label="分组" />
<el-table-column prop="create_time" label="创建时间" width="160" />
</el-table>
<div class="pagination-box">
<el-pagination background :page-sizes="[10, 20, 30]" :page-size="params4.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total4" :current-page="pageNum4"
@size-change="handleSizeChange4" @current-change="handleCurrentChange4" />
</div>
</el-dialog>
</div>
</template>
<script>
import { getDataSearch, voyageNameList, PlatformTypeList, equipmentTypeList, dataTypeList, dataPoints, sampleLineList, sampleStationList } from '../api/dataSearch'
import {
getMenu,
getDataList,
dataPoints,
sampleLineList,
sampleStationList
} from '../api/dataSearch'
import { getParamsList, getVoyageLine } from '../api/home'
import Cookies from 'js-cookie'
const Cesium = window.Cesium
@ -223,49 +169,45 @@ export default {
show: false,
viewer: null,
color: [Cesium.Color.RED, Cesium.Color.GREEN, Cesium.Color.BLUE, Cesium.Color.CHARTREUSE, Cesium.Color.DARKBLUE],
searchType: ['航次名称', '平台类型', '平台名称', '设备类型', '数据样品类型', '数据集名称', '航次首席'],
searchType: [
{
label: '航次名称',
disabled: false
},
{
label: '平台类型',
disabled: false
},
{
label: '平台名称'
},
{
label: '设备类型',
disabled: false
},
{
label: '数据样品类型',
disabled: false
},
{
label: '数据集名称'
},
{
label: '航次首席'
}
],
searchTypeValue: '航次名称',
radio: '航次',
menu1: '',
menu2: '',
menu3: '',
menu4: '',
menuList1: [],
menuList2: [],
menuList3: [],
menuList4: [],
dataList: [],
searchValue: '',
dialog1: false,
params1: {
start: 0,
limit: 10,
group: 10
},
pageNum1: 1,
tableData1: [],
total1: 0,
dialog2: false,
params2: {
start: 0,
limit: 10,
group: 10
},
pageNum2: 1,
tableData2: [],
total2: 0,
dialog3: false,
params3: {
start: 0,
limit: 10,
group: 10
},
pageNum3: 1,
tableData3: [],
total3: 0,
dialog4: false,
params4: {
start: 0,
limit: 10,
group: 10
},
pageNum4: 1,
tableData4: [],
total4: 0,
// id
ids: [],
menuShow: true,
currenId: null,
fold: false,
@ -286,19 +228,7 @@ export default {
},
watch: {
radio(val) {
const type = this.searchTypeValue
const isType = type == '航次名称' || type == '平台类型' || type == '设备类型' || type == '数据样品类型'
const isQuery = this.searchValue
const isIds = this.ids.length
if (isQuery) {
this.getList()
} else {
if (isType && isIds) {
this.getListIds()
} else {
this.dataList = []
}
}
},
searchTypeValue(val) {
if (val == '航次名称' || val == '平台类型' || val == '设备类型' || val == '数据样品类型') {
@ -306,8 +236,36 @@ export default {
} else {
this.menuShow = false
}
},
menu1(val) {
if (val) {
this.searchType[0].disabled = true
} else {
this.searchType[0].disabled = false
}
},
menu2(val) {
if (val) {
this.searchType[1].disabled = true
} else {
this.searchType[1].disabled = false
}
},
menu3(val) {
if (val) {
this.searchType[3].disabled = true
} else {
this.searchType[3].disabled = false
}
},
menu4(val) {
if (val) {
this.searchType[4].disabled = true
} else {
this.searchType[4].disabled = false
}
},
},
methods: {
//
getParams() {
@ -323,20 +281,83 @@ export default {
}
})
},
//
handleMenu() {
this.dataList = []
getMenu({
start: 0,
limit: 10000,
search_type: this.searchTypeValue,
return_type: this.radio,
voyage_name: this.menu1,
platform_type: this.menu2,
equipment_type: this.menu3,
data_type: this.menu4
}).then(res => {
if (this.searchTypeValue === '航次名称') {
this.menuList1 = res.page.records
} else if (this.searchTypeValue === '平台类型') {
this.menuList2 = res.page.records
} else if (this.searchTypeValue === '设备类型') {
this.menuList3 = res.page.records
} else if (this.searchTypeValue === '数据样品类型') {
this.menuList4 = res.page.records
}
})
},
selectMenu1(item) {
this.menu1 = item.name
this.menuList1 = []
this.searchType[0].disabled = true
const str = this.searchType.find(item => {
return item.disabled !== true
})
this.searchTypeValue = str.label
},
selectMenu2(item) {
this.menu2 = item.name
this.menuList2 = []
this.searchType[1].disabled = true
const str = this.searchType.find(item => {
return item.disabled !== true
})
this.searchTypeValue = str.label
},
selectMenu3(item) {
this.menu3 = item.name
this.menuList3 = []
this.searchType[3].disabled = true
const str = this.searchType.find(item => {
return item.disabled !== true
})
this.searchTypeValue = str.label
},
selectMenu4(item) {
this.menu4 = item.name
this.menuList4 = []
this.searchType[4].disabled = true
const str = this.searchType.find(item => {
return item.disabled !== true
})
this.searchTypeValue = str.label
},
//
getList() {
this.clearAll()
this.dataList = []
const params = {
start: 0,
limit: 10000,
search_type: this.searchTypeValue,
return_type: this.radio,
voyage_name: this.menu1,
platform_type: this.menu2,
equipment_type: this.menu3,
data_type: this.menu4,
search_value: this.searchValue,
limit: 20,
start: 0,
group: 10,
FrameSessionId: Cookies.get('JSESSIONID')
}
getDataSearch(params).then(res => {
getDataList(params).then(res => {
const arr = res.page.records
if (this.radio == '航次') {
this.getVoyagePoints(arr)
@ -348,10 +369,7 @@ export default {
},
//
getSearch() {
this.ids = []
if (this.searchValue) {
this.getList()
}
},
//
getVoyagePoints(arr) {
@ -578,152 +596,6 @@ export default {
toshow() {
this.show = false
},
// ids
getListIds() {
this.clearAll()
this.dataList = []
const params = {
search_type: this.searchTypeValue,
return_type: this.radio,
search_value: this.searchValue,
limit: 20,
start: 0,
group: 10,
ids: this.ids.toString()
}
getDataSearch(params).then(res => {
const arr = res.page.records
if (this.radio == '航次') {
this.getVoyagePoints(arr)
}
if (this.radio == '数据样品集') {
this.getDataPoints(arr)
}
})
},
//
handleSelectionChange(selection) {
this.ids = selection.map(item => item.tsy_id)
},
//
openDialog() {
this.ids = []
if (this.searchTypeValue == '航次名称') {
this.dialog1 = true
this.getVoyageNameList()
} else if (this.searchTypeValue == '平台类型') {
this.dialog2 = true
this.getPlatformTypeList()
} else if (this.searchTypeValue == '设备类型') {
this.dialog3 = true
this.getEquipmentTypeList()
} else if (this.searchTypeValue == '数据样品类型') {
this.dialog4 = true
this.getDataTypeList()
} else {
return false
}
},
//
handleClose1() {
this.dialog1 = false
if (this.ids.length) {
this.getListIds()
} else {
this.dataList = []
}
},
//
getVoyageNameList() {
voyageNameList(this.params1).then(res => {
this.tableData1 = res.page.records
this.total1 = Number(res.page.total)
})
},
handleCurrentChange1(val) {
this.pageNum1 = val
this.params1.start = val * this.params1.limit - this.params1.limit
this.getVoyageNameList()
},
handleSizeChange1(val) {
this.params1.limit = val
this.getVoyageNameList()
},
//
handleClose2() {
this.dialog2 = false
if (this.ids.length) {
this.getListIds()
} else {
this.dataList = []
}
},
//
getPlatformTypeList() {
PlatformTypeList(this.params2).then(res => {
this.tableData2 = res.page.records
this.total2 = Number(res.page.total)
})
},
handleCurrentChange2(val) {
this.pageNum2 = val
this.params2.start = val * this.params2.limit - this.params2.limit
this.getPlatformTypeList()
},
handleSizeChange2(val) {
this.params2.limit = val
this.getPlatformTypeList()
},
//
handleClose3() {
this.dialog3 = false
if (this.ids.length) {
this.getListIds()
} else {
this.dataList = []
}
},
//
getEquipmentTypeList() {
equipmentTypeList(this.params3).then(res => {
this.tableData3 = res.page.records
this.total3 = Number(res.page.total)
})
},
handleCurrentChange3(val) {
this.pageNum3 = val
this.params3.start = val * this.params3.limit - this.params3.limit
this.getEquipmentTypeList()
},
handleSizeChange3(val) {
this.params3.limit = val
this.getEquipmentTypeList()
},
//
handleClose4() {
this.dialog4 = false
if (this.ids.length) {
this.getListIds()
} else {
this.dataList = []
}
},
//
getDataTypeList() {
dataTypeList(this.params4).then(res => {
this.tableData4 = res.page.records
this.total4 = Number(res.page.total)
})
},
handleCurrentChange4(val) {
this.pageNum4 = val
this.params4.start = val * this.params4.limit - this.params4.limit
this.getDataTypeList()
},
handleSizeChange4(val) {
this.params4.limit = val
this.getDataTypeList()
},
//
openList(item) {
if (this.currenId == item.tsy_id) {
@ -956,6 +828,36 @@ export default {
}
}
}
.list {
margin-top: 20px;
border: 1px solid #e5e5e5;
div {
padding: 5px 10px;
border-bottom: 1px solid #e5e5e5;
}
.list-value {
cursor: pointer;
}
:last-child {
border-bottom: none;
}
}
}
.tags {
display: flex;
flex-wrap: wrap;
.tag {
padding: 5px;
background-color: rgb(249,249,249);
margin: 0 15px 15px 0;
}
}
.arrow {