<template>
|
<div class="menuPop">
|
<div style="padding: 5px">
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item>
|
<el-select
|
v-model="formInline.name"
|
style="width: 150px"
|
placeholder="...."
|
@change="changeValue($event)"
|
>
|
<el-option
|
v-for="item in optionx"
|
:key="item.field"
|
:label="item.alias"
|
:value="item.field"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-select
|
v-model="formInline.region"
|
style="width: 100px"
|
placeholder="...."
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-input
|
style="width: 150px"
|
v-model="formInline.input"
|
placeholder="请输入..."
|
></el-input>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" plain @click="setSpaceTableLayer"
|
>查询</el-button
|
>
|
<el-button plain size="small" @click="restSpacePopLayer"
|
>重置</el-button
|
>
|
</el-form-item>
|
</el-form>
|
<div class="centTable">
|
<el-table
|
:data="tableData"
|
border
|
height="100%"
|
ref="filterTable"
|
style="width: 100%"
|
>
|
<el-table-column
|
align="center"
|
type="index"
|
label="序号"
|
width="50"
|
/>
|
<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
|
v-for="(item, index) in attributeData"
|
:key="index"
|
:label="item.alias"
|
:prop="item.field"
|
show-overflow-tooltip
|
align="center"
|
:fit="true"
|
></el-table-column>
|
</el-table>
|
</div>
|
|
<div class="bottomPage pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="listdata.pageIndex"
|
:page-sizes="[10, 20, 50, 100]"
|
:page-size="listdata.pageSize"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="count"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
dataQuerySelectByPage,
|
dataQuerySelectWktById,
|
inquiry_selectFields,
|
inquiry_selectDomains,
|
decr,
|
} from "../../api/api.js"
|
export default {
|
computed: {
|
storeTime() {
|
return this.$store.state.mapSpaceQueryLayer
|
},
|
},
|
data() {
|
return {
|
count: 0,
|
listdata: {
|
pageIndex: 1,
|
pageSize: 10,
|
name: null,
|
srid: 4326,
|
wkt: null,
|
filter: null,
|
},
|
formInline: {
|
name: "",
|
region: "",
|
},
|
attributeData: [],
|
optionx: [],
|
options: [],
|
conditions: [
|
["=", "<>", "like"],
|
[">=", ">", " =", "<=", "<", "<>"],
|
[">=", ">", " =", "<=", "<", "<>"],
|
],
|
options1: [
|
{
|
value: "=",
|
label: "=",
|
},
|
{
|
value: "like",
|
label: "like",
|
},
|
{
|
value: "<>",
|
label: "<>",
|
},
|
],
|
options2: [
|
{
|
value: "=",
|
label: "=",
|
},
|
{
|
value: "<>",
|
label: "<>",
|
},
|
{
|
value: "<=",
|
label: "<=",
|
},
|
{
|
value: "<",
|
label: "<",
|
},
|
{
|
value: ">=",
|
label: ">=",
|
},
|
{
|
value: ">",
|
label: ">",
|
},
|
],
|
value: "",
|
tableData: [],
|
spaceLayer: "",
|
imagePoint: null,
|
domainsLayer: null,
|
querytype: null,
|
}
|
},
|
watch: {
|
async storeTime(index) {
|
this.spaceLayer = index
|
this.getDomainsLayer()
|
// this.getTableselectFields();
|
// this.restSpacePopLayer();
|
},
|
|
},
|
created() {
|
this.spaceLayer = this.$store.state.mapSpaceQueryLayer
|
// this.showSpacePopLayer();
|
// this.getTableselectFields();
|
this.getDomainsLayer()
|
},
|
|
methods: {
|
closeSpaceBox() {
|
if (this.imagePoint != null) {
|
sgworld.Creator.DeleteObject(this.imagePoint)
|
this.imagePoint = null
|
}
|
this.$store.state.mapPopBoolean = false
|
this.$store.state.mapPopBoxFlag = null
|
},
|
setSpaceTableLayer() {
|
this.setListDataStart()
|
this.getSpaceTableLayer()
|
},
|
restSpacePopLayer() {
|
this.formInline.input = null
|
this.showSpacePopLayer()
|
},
|
changeValue(value) {
|
var obj = {}
|
obj = this.optionx.find(function (item) {
|
return item.field === value
|
})
|
|
// if (obj.type == 'serial' || obj.type == 'int') {
|
// this.options = this.options2;
|
// } else {
|
// this.options = this.options1;
|
// }
|
this.options = []
|
|
var std = []
|
this.querytype = obj.type
|
if (obj.type == "text" || obj.type == "blob") {
|
std = this.conditions[0]
|
} else if (obj.type == "date" || obj.type == "datetime") {
|
std = this.conditions[2]
|
} else {
|
std = this.conditions[1]
|
}
|
for (var i in std) {
|
this.options.push({
|
label: std[i],
|
value: std[i],
|
})
|
}
|
|
this.formInline.region = this.options[0].value
|
},
|
setListDataStart() {
|
this.listdata.pageSize = 10
|
this.listdata.pageIndex = 1
|
this.tableData = []
|
},
|
//初始化查询条件
|
showSpacePopLayer() {
|
let val_date = this.optionx[0]
|
this.formInline.name = val_date.field
|
this.options = []
|
var std = []
|
this.querytype = val_date.type
|
if (val_date.type == "text" || val_date.type == "blob") {
|
std = this.conditions[0]
|
} else if (val_date.type == "date" || val_date.type == "datetime") {
|
std = this.conditions[2]
|
} else {
|
std = this.conditions[1]
|
}
|
for (var i in std) {
|
this.options.push({
|
label: std[i],
|
value: std[i],
|
})
|
}
|
|
this.formInline.region = this.options[0].value
|
this.getSpaceTableLayer()
|
},
|
//初始化查询表的字段
|
async getTableselectFields() {
|
const data = await inquiry_selectFields({ name: this.spaceLayer })
|
if (data.code != 200) {
|
this.$message.error("列表调用失败")
|
}
|
|
this.optionx = []
|
var valadata = data.result
|
for (var i in valadata) {
|
if (valadata[i].showtype == 1) {
|
if (
|
valadata[i].domainNa != null &&
|
valadata[i].domainNa != undefined
|
) {
|
valadata[i].domainNa = this.getMatchDomainNa(valadata[i].domainNa)
|
}
|
this.optionx.push(valadata[i])
|
this.attributeData.push(valadata[i])
|
}
|
}
|
this.showSpacePopLayer()
|
},
|
getMatchDomainNa(res) {
|
var std = null
|
for (var i in this.domainsLayer) {
|
if (this.domainsLayer[i].domName == res) {
|
return (std = this.domainsLayer[i].codeDesc)
|
}
|
}
|
return std
|
},
|
//初始化查询阈值表
|
async getDomainsLayer() {
|
const data = await inquiry_selectDomains({ name: this.spaceLayer })
|
if (data.code != 200) {
|
this.$message.error("列表调用失败")
|
}
|
this.domainsLayer = data.result
|
|
this.setListDataStart()
|
this.getTableselectFields()
|
},
|
//初始化查询表格信息
|
async getSpaceTableLayer() {
|
this.listdata.name = this.spaceLayer
|
if (this.formInline.input == undefined || this.formInline.input == null) {
|
this.listdata.filter = null
|
} else {
|
var val
|
var value = this.formInline.input
|
if (this.querytype == "long" || this.querytype == "integer") {
|
val = parseInt(value)
|
} else if (this.querytype == "double") {
|
if (this.formSql.value.indexOf(".") != -1) {
|
val = value
|
} else {
|
val = parseFloat(value).toFixed(1)
|
}
|
} else if (this.querytype == "date" || this.querytype == "datetime") {
|
var time = new Date(value)
|
var m = time.getMonth() + 1
|
var d = time.getDate()
|
var y = time.getFullYear()
|
val = "'" + y + "-" + this.add0(m) + "-" + this.add0(d) + "'"
|
} else {
|
val = "'" + value + "'"
|
}
|
|
this.listdata.filter =
|
this.formInline.name + " " + this.formInline.region + " " + val
|
}
|
|
const data = await dataQuerySelectByPage(this.listdata)
|
if (data.code != 200) {
|
this.$message.error("列表调用失败")
|
}
|
var val_Data = data.result
|
this.count = data.count
|
|
for (var i in val_Data) {
|
var valste = val_Data[i]
|
for (var j in this.optionx) {
|
if (
|
this.optionx[j].domainNa != null &&
|
this.optionx[j].domainNa != undefined
|
) {
|
valste[this.optionx[j].field] = this.optionx[j].domainNa
|
}
|
}
|
}
|
this.tableData = data.result
|
this.$refs.filterTable.doLayout()
|
},
|
async spaceLocation(index, row) {
|
var param = {
|
gid: row.gid,
|
name: this.spaceLayer,
|
}
|
const data = await dataQuerySelectWktById(param)
|
if (data.code != 200) {
|
this.$message.error("列表调用失败")
|
}
|
|
var val1 = decr(data.result)
|
if (val1) {
|
if (this.$store.state.primitLayer != null) {
|
sgworld.Viewer.entities.remove(this.$store.state.primitLayer)
|
sgworld.Creator.DeleteObject(this.$store.state.primitLayer)
|
this.$store.state.primitLayer = null
|
}
|
var wkt = this.$wkt.parse(val1)
|
|
this.setMapLoaction(wkt, row)
|
}
|
},
|
handleSizeChange(val) {
|
this.listdata.pageSize = val
|
this.getSpaceTableLayer()
|
},
|
handleCurrentChange(val) {
|
this.listdata.pageIndex = val
|
this.getSpaceTableLayer()
|
},
|
setMapLoaction(res, properties) {
|
if (this.$store.state.primitLayer != null) {
|
sgworld.Creator.DeleteObject(this.$store.state.primitLayer)
|
// this.$store.state.primitLayer = null;
|
sgworld.Viewer.entities.remove(this.$store.state.primitLayer)
|
this.$store.state.primitLayer = null
|
}
|
var coord = res.coordinates
|
|
if (res.type == "Point") {
|
var val = Cesium.Cartesian3.fromDegrees(
|
res.coordinates[0],
|
res.coordinates[1]
|
)
|
this.$store.state.primitLayer = Viewer.entities.add({
|
properties: properties,
|
tag: "properties_point",
|
position: val,
|
billboard: {
|
// 图像地址，URI或Canvas的属性
|
image: SmartEarthRootUrl + "Workers/image/mark.png",
|
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
// 大小是否以米为单位
|
sizeInMeters: false,
|
// 相对于坐标的垂直位置
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
// 相对于坐标的水平位置
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
|
scale: 1.0,
|
// 是否显示
|
show: true,
|
},
|
})
|
this.$store.state.primitLayer.billboard.disableDepthTestDistance =
|
Number.POSITIVE_INFINITY
|
|
sgworld.Navigate.flyToObj(this.$store.state.primitLayer)
|
} else if (res.type == "MultiPolygon" || res.type == "LineString") {
|
var val = res.coordinates[0][0]
|
var std = []
|
for (var i in val) {
|
std.push(val[i][0])
|
|
std.push(val[i][1])
|
}
|
|
this.$store.state.primitLayer = Viewer.entities.add({
|
properties: properties,
|
tag: "properties_line",
|
|
polyline: {
|
positions: Cesium.Cartesian3.fromDegreesArray(std),
|
width: 5,
|
material: new Cesium.Color(1.0, 0.0, 0.0, 0.3),
|
clampToGround: true,
|
},
|
})
|
|
// this.$store.state.primitLayer = sgworld.Creator.createPolygon(std, {
|
// fillColor: '#ffff00',
|
// outlineColor: '#fff',
|
// outlineWidth: 2
|
// }, 1, 0, "面");
|
sgworld.Navigate.flyToObj(this.$store.state.primitLayer)
|
} else if (res.type == "MultiLineString") {
|
var line = res.coordinates[0]
|
var std = []
|
for (var i in line) {
|
std.push({ x: line[i][0], y: line[i][1], z: 1000 })
|
}
|
const polyline = sgworld.Creator.createPolyline(
|
std,
|
"#ffff00",
|
1,
|
0,
|
"线"
|
)
|
const entity = polyline.item
|
entity.properties = properties
|
entity.tag = "properties_line"
|
|
|
this.$store.state.primitLayer = polyline
|
|
sgworld.Navigate.flyToObj(entity)
|
}
|
this.setMapHandler()
|
},
|
setMapHandler() {
|
window.propertieshandler = new Cesium.ScreenSpaceEventHandler(
|
sgworld.Viewer.scene.canvas
|
)
|
window.propertieshandler.setInputAction(event => {
|
let pick = sgworld.Viewer.scene.pick(event.position)
|
// ;
|
|
if (pick && pick.id && pick.id.tag == "properties_point") {
|
this.$store.state.propertiesFlag = "1"
|
let properties = pick.id.properties
|
let propertyNames = pick.id.properties.propertyNames
|
let obj = {}
|
obj["eventid"] = properties["_eventid"]._value
|
//
|
this.attributeData.forEach(item => {
|
propertyNames.forEach(itemElement => {
|
if (itemElement == item.field) {
|
obj[item.alias] = properties[itemElement]._value
|
}
|
})
|
})
|
this.$store.state.propertiesInfo = obj
|
} else if (pick && pick.id && pick.id._polyline && pick.id.tag == "properties_line") {
|
this.$store.state.propertiesFlag = "1"
|
let properties = pick.id.properties
|
let propertyNames = pick.id.properties.propertyNames
|
let obj = {}
|
obj["eventid"] = properties["_eventid"]._value
|
//
|
this.attributeData.forEach(item => {
|
propertyNames.forEach(itemElement => {
|
if (itemElement == item.field) {
|
obj[item.alias] = properties[itemElement]._value
|
}
|
})
|
})
|
this.$store.state.propertiesInfo = obj
|
}
|
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
|
},
|
},
|
destroyed() {
|
this.$store.state.propertiesFlag = null
|
if (propertieshandler != null && Cesium.defined(propertieshandler)) {
|
window.propertieshandler.removeInputAction(
|
Cesium.ScreenSpaceEventType.LEFT_CLICK
|
)
|
window.propertieshandler = null
|
}
|
},
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.menuPop {
|
width: calc(100% - 1px);
|
height: calc(100% - 1px);
|
margin: 0;
|
padding: 0;
|
overflow: hidden;
|
border: 1px solid gray;
|
float: left;
|
.centTable {
|
position: absolute;
|
height: 66%;
|
width: 98%;
|
}
|
.rightTitle {
|
padding: 5px;
|
|
width: 100%;
|
.boxClose {
|
float: right;
|
margin-right: 20px;
|
}
|
}
|
.bottomPage {
|
position: absolute;
|
bottom: 3%;
|
}
|
/deep/.el-form-item {
|
margin-bottom: 0px;
|
}
|
}
|
</style>
|
