<template>
|
<div class="resourceQuery">
|
<moon-map></moon-map>
|
<div class="left_box">
|
<div class="top_box">
|
<div class="input_box">
|
<el-form
|
:model="form"
|
label-width="120px"
|
label-position="top"
|
size="small"
|
>
|
<el-form-item label="">
|
<el-input
|
v-model="form.name"
|
placeholder=""
|
prefix-icon="el-icon-search"
|
/>
|
</el-form-item>
|
<el-form-item label="传感器类型">
|
<el-select
|
style="width: 100%"
|
v-model="form.region"
|
placeholder=""
|
>
|
<el-option
|
v-for="(e, i) in stretchOptions"
|
:label="e.label"
|
:value="e.value"
|
:key="i"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="数据类型">
|
<el-select
|
style="width: 100%"
|
v-model="form.region"
|
placeholder=""
|
>
|
<el-option
|
v-for="(e, i) in stretchOptions"
|
:label="e.label"
|
:value="e.value"
|
:key="i"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="时间范围">
|
<el-date-picker
|
style="width: 100%"
|
v-model="form.time"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
format="yyyy-MM-DD HH:mm:ss"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<!-- <div class="btnstyle editBtn">
|
<el-button type="primary" @click="onSubmit">确定</el-button>
|
<el-button class="delbtn">取消</el-button>
|
</div> -->
|
</el-form-item>
|
</el-form>
|
<div class="KJCX">
|
<div class="KJCX_title">空间查询</div>
|
<div class="KJCX_btn_list">
|
<div class="KJCX_btn">
|
<span>线</span>
|
<div class="btn_bg x"></div>
|
</div>
|
<div class="KJCX_btn">
|
<span>矩形</span>
|
<div class="btn_bg jx"></div>
|
</div>
|
<div class="KJCX_btn">
|
<span>多边形</span>
|
<div class="btn_bg db"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="btn_box">
|
<div class="btn">
|
<el-button type="primary" class="btnbox">检索</el-button>
|
</div>
|
<div>
|
<el-button type="primary" class="btnbox delbtn">重置</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="pagination">
|
<el-pagination
|
small
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="currentPage4"
|
:page-sizes="[100, 200, 300, 400]"
|
:page-size="100"
|
layout="sizes, prev, pager, next, jumper"
|
:total="400"
|
>
|
</el-pagination>
|
</div>
|
<div class="list_box">
|
<div
|
class="list"
|
v-for="(e, i) in list"
|
:key="i"
|
:class="{ list_active: e.checked }"
|
@click.stop="checkedList(e)"
|
>
|
<div class="attribute_box">
|
<div class="attribute">
|
<span class="attribute_title">图幅名称：</span>
|
<span class="attribute_content">{{ e.name }}</span>
|
</div>
|
<div class="attribute">
|
<span class="attribute_title">存情位量：</span>
|
<span class="attribute_content">{{ e.time }}</span>
|
</div>
|
<div class="attribute">
|
<span class="attribute_title">生产时间：</span>
|
<span class="attribute_content">{{ e.data }}</span>
|
</div>
|
<div class="attribute" style="margin: 0">
|
<span class="attribute_title">数据大小：</span>
|
<span class="attribute_content">dsadas</span>
|
</div>
|
</div>
|
<div class="all_btn" v-on:click.stop="details(e)">
|
<i class="el-icon-more"></i>
|
</div>
|
</div>
|
</div>
|
<div class="bottom_box">
|
<span class="msg_box"
|
>显示第{{ paginationData.pageNo }}到{{
|
paginationData.pageSize
|
}}条，共{{ list.length }}条记录，已选择{{
|
listChecked.length
|
}}条</span
|
>
|
<div class="bottom_btn">
|
<el-button type="primary" class="btnbox">全选</el-button>
|
<el-button type="primary" class="btnbox delbtn">取消</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="details_box" v-show="detailsBox">
|
<div class="details_t">
|
<i class="el-icon-close" @click="detailsBox = false"></i>
|
</div>
|
<div class="details_table">
|
<div class="table_header">
|
<div class="table_td">属性</div>
|
<div class="table_td">属性值</div>
|
</div>
|
<div class="table_tr" v-for="(e, i) in tableList" :key="i">
|
<div class="table_td">{{ e.name }}</div>
|
<div class="table_td">{{ e.value }}</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import moonMap from "../../components/MapView/moonMap.vue"; //地图
|
export default {
|
components: {
|
moonMap,
|
},
|
data() {
|
return {
|
paginationData: {
|
pageNo: 1,
|
pageSize: 10,
|
},
|
tableList: [
|
{
|
name: "dataid",
|
value: "LC81350352022001LGN00",
|
},
|
{
|
name: "satellite",
|
value: "LANDSAT8",
|
},
|
{
|
name: "datatype",
|
value: "OLLTIRS",
|
},
|
{
|
name: "ines samples",
|
value: "7931.0",
|
},
|
{
|
name: "sensor",
|
value: "7811.0",
|
},
|
],
|
listChecked: [],
|
list: [
|
{
|
name: "名称",
|
CQWZ: "位置",
|
time: "时间",
|
data: "大小",
|
checked: false,
|
},
|
{
|
name: "名称",
|
CQWZ: "位置",
|
time: "时间",
|
data: "大小",
|
checked: false,
|
},
|
{
|
name: "名称",
|
CQWZ: "位置",
|
time: "时间",
|
data: "大小",
|
checked: false,
|
},
|
{
|
name: "名称",
|
CQWZ: "位置",
|
time: "时间",
|
data: "大小",
|
checked: false,
|
},
|
],
|
currentPage4: 4,
|
form: {
|
name: "",
|
region: "",
|
selectName: "",
|
layerUrl: "",
|
children: [],
|
value1: "",
|
},
|
stretchOptions: [
|
{
|
value: "目录",
|
label: "目录",
|
},
|
],
|
detailsBox: false,
|
};
|
},
|
methods: {
|
details(val) {
|
this.detailsBox = true;
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
},
|
checkedList(val) {
|
val.checked = !val.checked;
|
if (val.checked) {
|
this.listChecked.push(val);
|
}
|
|
if (this.listChecked.length > 0) {
|
if (!val.checked) {
|
this.listChecked.forEach((e, i) => {
|
if (e.name == val.name) {
|
this.listChecked.splice(i, 1);
|
}
|
});
|
}
|
}
|
},
|
},
|
created() {},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.resourceQuery {
|
width: 100%;
|
height: 98%;
|
position: relative;
|
.left_box {
|
width: 427px;
|
height: 780px;
|
left: 20px;
|
top: 10px;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
padding: 10px;
|
position: absolute;
|
z-index: 12;
|
.top_box {
|
padding: 10px;
|
background: #1e2a3d;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.btn_box {
|
.btn {
|
margin-bottom: 37px;
|
}
|
.btnbox {
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
}
|
.btnbox:hover {
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #689cff;
|
}
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
.input_box {
|
width: 282px;
|
.KJCX_btn_list {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
.KJCX_title {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff;
|
padding-bottom: 6px;
|
}
|
.KJCX_btn {
|
display: flex;
|
align-items: center;
|
span {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff;
|
}
|
.btn_bg {
|
width: 26px;
|
height: 26px;
|
cursor: pointer;
|
margin-left: 7px;
|
}
|
.x {
|
background: url("../../assets/img/x.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.jx {
|
background: url("../../assets/img/jx.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.db {
|
background: url("../../assets/img/db.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
/deep/ .el-input.is-disabled .el-input__wrapper,
|
/deep/ .el-input__wrapper {
|
background: rgba(13, 19, 29, 0.4);
|
border: 1px solid rgba(214, 228, 255, 0.4);
|
}
|
/deep/ .el-input__wrapper.is-focus {
|
/* border: 1px solid #D6E4FF;
|
box-shadow:none; */
|
box-shadow: 0 0 0 1px #d6e4ff;
|
}
|
/deep/ .el-input__inner {
|
color: #d6e4ff;
|
}
|
/deep/ .el-form-item__label {
|
font-size: 12px;
|
font-family: Source Han Sans CN;
|
font-weight: 300;
|
color: #d6e4ff !important;
|
padding-bottom: 6px;
|
line-height: 1;
|
}
|
/deep/ .el-date-editor .el-range-input {
|
background: rgba(13, 19, 29, 0.4);
|
}
|
}
|
}
|
.pagination {
|
padding: 10px;
|
background: #1e2a3d;
|
margin: 5px 0;
|
}
|
.list_box {
|
overflow: auto;
|
// height: 350px;
|
height: 42%;
|
.list {
|
padding: 10px;
|
background: #0d131d;
|
margin: 2px 0;
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
cursor: pointer;
|
.attribute_box {
|
.attribute {
|
font-size: 12px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #d6e4ff;
|
margin-bottom: 10px;
|
}
|
}
|
.all_btn {
|
color: rgba(214, 228, 255, 1);
|
font-size: 18px;
|
cursor: pointer;
|
}
|
}
|
.list_active {
|
background: rgba(104, 156, 255, 0.5);
|
}
|
}
|
.list_box::-webkit-scrollbar {
|
width: 2px;
|
}
|
.list_box::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
background: rgba(115, 161, 250, 0.5);
|
}
|
.list_box::-webkit-scrollbar-track {
|
border-radius: 0;
|
background: rgba(105, 105, 105, 0.5);
|
}
|
.bottom_box {
|
width: 100%;
|
box-sizing: border-box;
|
margin-top: 4px;
|
background: #1e2a3d;
|
padding: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.msg_box {
|
font-size: 12px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #d6e4ff;
|
white-space: nowrap;
|
}
|
.bottom_btn {
|
display: flex;
|
|
.btnbox {
|
width: 47px;
|
height: 25px;
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #234066;
|
border-radius: 2px;
|
font-size: 12px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
.btnbox:hover {
|
background: rgba(104, 156, 255, 0.2);
|
border: 1px solid #689cff;
|
}
|
.delbtn {
|
background: rgba(245, 108, 108, 0.2);
|
border: 1px solid #5a0914;
|
}
|
}
|
}
|
}
|
.details_box {
|
width: 533px;
|
// height: 430px;
|
background: rgba(7, 8, 14, 0.8);
|
padding: 10px;
|
position: absolute;
|
top: 355px;
|
left: 489px;
|
.details_t {
|
height: 12px;
|
display: flex;
|
justify-content: flex-end;
|
font-size: 12px;
|
color: rgba(142, 151, 168, 1);
|
i {
|
cursor: pointer;
|
}
|
}
|
.details_table {
|
margin-top: 10px;
|
// height: 400px;
|
border: 1px solid rgba(214, 228, 255, 0.4);
|
border-radius: 4px;
|
.table_tr,
|
.table_header {
|
display: flex;
|
background: rgba(38, 47, 71, 0.68);
|
}
|
.table_tr {
|
background: #000;
|
}
|
.table_tr:nth-child(odd) {
|
background: rgba(38, 47, 71, 0.68);
|
}
|
.table_td {
|
font-size: 14px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #d6e4ff;
|
padding-left: 22px;
|
padding-top: 6px;
|
padding-bottom: 6px;
|
}
|
.table_td:nth-child(1) {
|
overflow: hidden;
|
width: 184px;
|
border-right: 1px solid rgba(214, 228, 255, 0.4);
|
}
|
.table_td:nth-child(2) {
|
overflow: hidden;
|
width: 337px;
|
}
|
}
|
}
|
}
|
</style>
|
