| | |
| | | <template> |
| | | <div class="menuPop"> |
| | | <div style="padding: 5px"> |
| | | <el-form |
| | | :inline="true" |
| | | :model="formInline" |
| | | class="demo-form-inline" |
| | | > |
| | | <el-form :inline="true" :model="formInline" class="demo-form-inline"> |
| | | <el-form-item> |
| | | <el-select |
| | | v-model="formInline.name" |
| | |
| | | ></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-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"> |
| | |
| | | label="序号" |
| | | width="50" |
| | | /> |
| | | <el-table-column |
| | | label="定位" |
| | | width="100" |
| | | align="center" |
| | | > |
| | | <el-table-column label="定位" width="100" align="center"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | icon="el-icon-map-location" |
| | |
| | | inquiry_selectFields, |
| | | inquiry_selectDomains, |
| | | decr, |
| | | } from '../../api/api.js'; |
| | | } from "../../api/api.js" |
| | | export default { |
| | | computed: { |
| | | storeTime() { |
| | | return this.$store.state.mapSpaceQueryLayer; |
| | | return this.$store.state.mapSpaceQueryLayer |
| | | }, |
| | | }, |
| | | data() { |
| | |
| | | filter: null, |
| | | }, |
| | | formInline: { |
| | | name: '', |
| | | region: '', |
| | | name: "", |
| | | region: "", |
| | | }, |
| | | attributeData: [], |
| | | optionx: [], |
| | | options: [], |
| | | conditions: [ |
| | | ['=', '<>', 'like'], |
| | | ['>=', '>', ' =', '<=', '<', '<>'], |
| | | ['>=', '>', ' =', '<=', '<', '<>'], |
| | | ["=", "<>", "like"], |
| | | [">=", ">", " =", "<=", "<", "<>"], |
| | | [">=", ">", " =", "<=", "<", "<>"], |
| | | ], |
| | | options1: [ |
| | | { |
| | | value: '=', |
| | | label: '=', |
| | | value: "=", |
| | | label: "=", |
| | | }, |
| | | { |
| | | value: 'like', |
| | | label: 'like', |
| | | value: "like", |
| | | label: "like", |
| | | }, |
| | | { |
| | | value: '<>', |
| | | label: '<>', |
| | | value: "<>", |
| | | label: "<>", |
| | | }, |
| | | ], |
| | | options2: [ |
| | | { |
| | | value: '=', |
| | | label: '=', |
| | | value: "=", |
| | | label: "=", |
| | | }, |
| | | { |
| | | value: '<>', |
| | | label: '<>', |
| | | value: "<>", |
| | | label: "<>", |
| | | }, |
| | | { |
| | | value: '<=', |
| | | label: '<=', |
| | | value: "<=", |
| | | label: "<=", |
| | | }, |
| | | { |
| | | value: '<', |
| | | label: '<', |
| | | value: "<", |
| | | label: "<", |
| | | }, |
| | | { |
| | | value: '>=', |
| | | label: '>=', |
| | | value: ">=", |
| | | label: ">=", |
| | | }, |
| | | { |
| | | value: '>', |
| | | label: '>', |
| | | value: ">", |
| | | label: ">", |
| | | }, |
| | | ], |
| | | value: '', |
| | | value: "", |
| | | tableData: [], |
| | | spaceLayer: '', |
| | | spaceLayer: "", |
| | | imagePoint: null, |
| | | domainsLayer: null, |
| | | querytype: null, |
| | | }; |
| | | } |
| | | }, |
| | | watch: { |
| | | async storeTime(index) { |
| | | this.spaceLayer = index; |
| | | this.getDomainsLayer(); |
| | | this.spaceLayer = index |
| | | this.getDomainsLayer() |
| | | // this.getTableselectFields(); |
| | | // this.restSpacePopLayer(); |
| | | }, |
| | | |
| | | }, |
| | | created() { |
| | | this.spaceLayer = this.$store.state.mapSpaceQueryLayer; |
| | | this.spaceLayer = this.$store.state.mapSpaceQueryLayer |
| | | // this.showSpacePopLayer(); |
| | | // this.getTableselectFields(); |
| | | this.getDomainsLayer(); |
| | | this.getDomainsLayer() |
| | | }, |
| | | |
| | | methods: { |
| | | closeSpaceBox() { |
| | | if (this.imagePoint != null) { |
| | | sgworld.Creator.DeleteObject(this.imagePoint); |
| | | this.imagePoint = null; |
| | | sgworld.Creator.DeleteObject(this.imagePoint) |
| | | this.imagePoint = null |
| | | } |
| | | this.$store.state.mapPopBoolean = false; |
| | | this.$store.state.mapPopBoxFlag = null; |
| | | this.$store.state.mapPopBoolean = false |
| | | this.$store.state.mapPopBoxFlag = null |
| | | }, |
| | | setSpaceTableLayer() { |
| | | this.setListDataStart(); |
| | | this.getSpaceTableLayer(); |
| | | this.setListDataStart() |
| | | this.getSpaceTableLayer() |
| | | }, |
| | | restSpacePopLayer() { |
| | | this.formInline.input = null; |
| | | this.showSpacePopLayer(); |
| | | this.formInline.input = null |
| | | this.showSpacePopLayer() |
| | | }, |
| | | changeValue(value) { |
| | | |
| | | var obj = {}; |
| | | var obj = {} |
| | | obj = this.optionx.find(function (item) { |
| | | return item.field === value; |
| | | }); |
| | | return item.field === value |
| | | }) |
| | | |
| | | // if (obj.type == 'serial' || obj.type == 'int') { |
| | | // this.options = this.options2; |
| | | // } else { |
| | | // this.options = this.options1; |
| | | // } |
| | | this.options = []; |
| | | this.options = [] |
| | | |
| | | var std = []; |
| | | var std = [] |
| | | this.querytype = obj.type |
| | | if (obj.type == "text" || obj.type == "blob") { |
| | | std = this.conditions[0]; |
| | | std = this.conditions[0] |
| | | } else if (obj.type == "date" || obj.type == "datetime") { |
| | | std = this.conditions[2]; |
| | | std = this.conditions[2] |
| | | } else { |
| | | std = this.conditions[1]; |
| | | 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.formInline.region = this.options[0].value |
| | | }, |
| | | setListDataStart() { |
| | | this.listdata.pageSize = 10; |
| | | this.listdata.pageIndex = 1; |
| | | this.tableData = []; |
| | | 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 = []; |
| | | 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]; |
| | | std = this.conditions[0] |
| | | } else if (val_date.type == "date" || val_date.type == "datetime") { |
| | | std = this.conditions[2]; |
| | | std = this.conditions[2] |
| | | } else { |
| | | std = this.conditions[1]; |
| | | 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(); |
| | | this.formInline.region = this.options[0].value |
| | | this.getSpaceTableLayer() |
| | | }, |
| | | //初始化查询表的字段 |
| | | async getTableselectFields() { |
| | | const data = await inquiry_selectFields({ name: this.spaceLayer }); |
| | | const data = await inquiry_selectFields({ name: this.spaceLayer }) |
| | | if (data.code != 200) { |
| | | this.$message.error('列表调用失败'); |
| | | this.$message.error("列表调用失败") |
| | | } |
| | | |
| | | this.optionx = []; |
| | | var valadata = data.result; |
| | | 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); |
| | | valadata[i].domainNa = this.getMatchDomainNa(valadata[i].domainNa) |
| | | } |
| | | this.optionx.push(valadata[i]); |
| | | this.attributeData.push(valadata[i]); |
| | | this.optionx.push(valadata[i]) |
| | | this.attributeData.push(valadata[i]) |
| | | } |
| | | } |
| | | this.showSpacePopLayer(); |
| | | this.showSpacePopLayer() |
| | | }, |
| | | getMatchDomainNa(res) { |
| | | var std = null; |
| | | var std = null |
| | | for (var i in this.domainsLayer) { |
| | | if (this.domainsLayer[i].domName == res) { |
| | | return (std = this.domainsLayer[i].codeDesc); |
| | | return (std = this.domainsLayer[i].codeDesc) |
| | | } |
| | | } |
| | | return std; |
| | | return std |
| | | }, |
| | | //初始化查询阈值表 |
| | | async getDomainsLayer() { |
| | | const data = await inquiry_selectDomains({ name: this.spaceLayer }); |
| | | const data = await inquiry_selectDomains({ name: this.spaceLayer }) |
| | | if (data.code != 200) { |
| | | this.$message.error('列表调用失败'); |
| | | this.$message.error("列表调用失败") |
| | | } |
| | | this.domainsLayer = data.result; |
| | | this.domainsLayer = data.result |
| | | |
| | | this.setListDataStart(); |
| | | this.getTableselectFields(); |
| | | this.setListDataStart() |
| | | this.getTableselectFields() |
| | | }, |
| | | //初始化查询表格信息 |
| | | async getSpaceTableLayer() { |
| | | this.listdata.name = this.spaceLayer; |
| | | this.listdata.name = this.spaceLayer |
| | | if (this.formInline.input == undefined || this.formInline.input == null) { |
| | | this.listdata.filter = null; |
| | | this.listdata.filter = null |
| | | } else { |
| | | |
| | | var val; |
| | | var val |
| | | var value = this.formInline.input |
| | | if (this.querytype == "long" || this.querytype == "integer") { |
| | | |
| | | val = parseInt(value); |
| | | } else if (this.querytype == 'double') { |
| | | |
| | | val = parseInt(value) |
| | | } else if (this.querytype == "double") { |
| | | if (this.formSql.value.indexOf(".") != -1) { |
| | | val = value; |
| | | 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) + "'"; |
| | | 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 + "'"; |
| | | val = "'" + value + "'" |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | this.listdata.filter = |
| | | this.formInline.name + " " + this.formInline.region + " " + val |
| | | |
| | | } |
| | | |
| | | const data = await dataQuerySelectByPage(this.listdata); |
| | | const data = await dataQuerySelectByPage(this.listdata) |
| | | if (data.code != 200) { |
| | | this.$message.error('列表调用失败'); |
| | | this.$message.error("列表调用失败") |
| | | } |
| | | var val_Data = data.result; |
| | | this.count = data.count; |
| | | var val_Data = data.result |
| | | this.count = data.count |
| | | |
| | | for (var i in val_Data) { |
| | | var valste = val_Data[i]; |
| | | 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; |
| | | valste[this.optionx[j].field] = this.optionx[j].domainNa |
| | | } |
| | | } |
| | | } |
| | | this.tableData = data.result; |
| | | this.$refs.filterTable.doLayout(); |
| | | 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); |
| | | } |
| | | const data = await dataQuerySelectWktById(param) |
| | | if (data.code != 200) { |
| | | this.$message.error('列表调用失败'); |
| | | this.$message.error("列表调用失败") |
| | | } |
| | | |
| | | var val1 = decr(data.result); |
| | | 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; |
| | | 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); |
| | | var wkt = this.$wkt.parse(val1) |
| | | |
| | | this.setMapLoaction(wkt, row); |
| | | this.setMapLoaction(wkt, row) |
| | | } |
| | | }, |
| | | handleSizeChange(val) { |
| | | this.listdata.pageSize = val; |
| | | this.getSpaceTableLayer(); |
| | | this.listdata.pageSize = val |
| | | this.getSpaceTableLayer() |
| | | }, |
| | | handleCurrentChange(val) { |
| | | this.listdata.pageIndex = val; |
| | | this.getSpaceTableLayer(); |
| | | this.listdata.pageIndex = val |
| | | this.getSpaceTableLayer() |
| | | }, |
| | | setMapLoaction(res, properties) { |
| | | if (this.$store.state.primitLayer != null) { |
| | | sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
| | | 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; |
| | | sgworld.Viewer.entities.remove(this.$store.state.primitLayer) |
| | | this.$store.state.primitLayer = null |
| | | } |
| | | var coord = res.coordinates; |
| | | var coord = res.coordinates |
| | | |
| | | if (res.type == 'Point') { |
| | | if (res.type == "Point") { |
| | | var val = Cesium.Cartesian3.fromDegrees( |
| | | res.coordinates[0], |
| | | res.coordinates[1], |
| | | |
| | | ); |
| | | res.coordinates[1] |
| | | ) |
| | | this.$store.state.primitLayer = Viewer.entities.add({ |
| | | properties: properties, |
| | | tag: "properties_point", |
| | |
| | | // 应用于图像的统一比例。比例大于会1.0放大标签,而比例小于会1.0缩小标签。 |
| | | scale: 1.0, |
| | | // 是否显示 |
| | | show: true |
| | | } |
| | | }); |
| | | this.$store.state.primitLayer.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY; |
| | | show: true, |
| | | }, |
| | | }) |
| | | this.$store.state.primitLayer.billboard.disableDepthTestDistance = |
| | | Number.POSITIVE_INFINITY |
| | | |
| | | sgworld.Navigate.flyToObj(this.$store.state.primitLayer) |
| | | |
| | | 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; |
| | | } |
| | | }, Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | |
| | | } else if (res.type == 'MultiPolygon' || res.type == 'LineString') { |
| | | |
| | | var val = res.coordinates[0][0]; |
| | | var std = []; |
| | | } 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, { |
| | |
| | | // 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 = []; |
| | | 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 }) |
| | | } |
| | | this.$store.state.primitLayer = sgworld.Creator.createPolyline(std, "#ffff00", 1, 0, "线"); |
| | | sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item); |
| | | 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; |
| | | } |
| | | }; |
| | | 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> |