<template>
|
<Popup ref="pop" top="20px" :title="title" @close="close(true)" width="1000px" :maxHeight="'700px'"
|
@cancel="close(false)">
|
<div class="menuBox">
|
<div class="serachContent">
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item label="名称">
|
<el-input size="small" v-model="formInline.name" placeholder="请输入定位名称..."></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" plain type="primary" @click="setInfoSearch"
|
icon="el-icon-search">查询</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" plain type="info" @click="setInfoRefresh"
|
icon="el-icon-refresh">重置</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="tableContent">
|
<div class="tableBox">
|
<el-table :data="tableData" border height="calc(100% - 2px)" ref="filterTable" style="width: 100%">
|
<el-table-column label="定位" width="100" align="center">
|
<template slot-scope="scope">
|
<el-button icon="el-icon-map-location" size="small"
|
@click="spaceLocation(scope.$index, scope.row)"></el-button>
|
</template>
|
</el-table-column>
|
<el-table-column label="名称" prop="name" align="center"></el-table-column>
|
<el-table-column label="环线" prop="line" align="center"></el-table-column>
|
<el-table-column label="类型" prop="type" align="center"></el-table-column>
|
<el-table-column label="位置" prop="geom" align="center"></el-table-column>
|
</el-table>
|
</div>
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageIndex"
|
:limit.sync="queryParams.pageSize" @pagination="getAttributeInfo" />
|
</div>
|
</div>
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from '@/components/Tool/Popup.vue';
|
import { zhangzitou_selectAll } from "@/api/mapView/map.js"
|
import mapConfig from '../../../assets/js/mapSdk/mapConfig';
|
|
|
export default {
|
name: 'attributeInfo',
|
components: { Popup },
|
data() {
|
return {
|
title: '属性信息',
|
total: 0,
|
queryParams: {
|
pageIndex: 1,
|
pageSize: 10,
|
name: "",
|
srid: 4326,
|
},
|
billboardEntity: null,
|
formInline: {
|
name: ''
|
}
|
};
|
},
|
methods: {
|
// 关闭弹窗
|
close(isCloseBtn, removeLayer = true) {
|
// removeLayer && this.removeImageLayer();
|
this.delBillboard();
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
},
|
|
// 打开弹窗
|
open() {
|
this.close(true);
|
this.$refs.pop.open();
|
this.getAttributeInfo();
|
},
|
setInfoSearch() {
|
this.queryParams.name = this.formInline.name;
|
this.getAttributeInfo();
|
},
|
setInfoRefresh() {
|
this.formInline.name = "";
|
this.queryParams.pageIndex = 1;
|
this.queryParams.pageSize = 10;
|
this.setInfoSearch();
|
},
|
getAttributeInfo() {
|
zhangzitou_selectAll({
|
name: this.queryParams.name,
|
page: this.queryParams.pageIndex,
|
limit: this.queryParams.pageSize,
|
srid: this.queryParams.srid
|
}).then(response => {
|
if (response.data.code != 200) return;
|
const valDta = response.data.result;
|
this.total = valDta.total;
|
this.tableData = valDta.pois
|
})
|
},
|
delBillboard() {
|
if (this.billboardEntity) {
|
this.billboardEntity.removeFromMap();
|
this.billboardEntity = null;
|
return
|
}
|
},
|
spaceLocation(index, row) {
|
var wkt = mapConfig.getWKTParse(row.geom);
|
this.delBillboard();
|
const url = config.sdkImg + 'Workers/image/mark.png';
|
this.billboardEntity = earthCtrl.factory.createBillboard({
|
name: "标签点",
|
image: url,
|
width: 16,
|
height: 22,
|
lon: wkt.coordinates[0],
|
lat: wkt.coordinates[1],
|
alt: 10,
|
scale: 1.5,
|
});
|
earthCtrl.userScene.flyTo(this.billboardEntity)
|
|
},
|
|
|
|
|
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.menuBox {
|
position: relative;
|
height: 660px;
|
width: calc(100% - 0px);
|
padding: 10px;
|
display: flex;
|
flex-direction: column;
|
|
.serachContent {
|
display: flex;
|
}
|
|
.tableContent {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
background: #ffffff;
|
|
.tableBox {
|
flex: 1;
|
|
}
|
|
.pagination-container {
|
padding: 0px 10px !important;
|
}
|
|
}
|
|
}
|
</style>
|
