| | |
| | | ></el-input> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button size="small" |
| | | <el-button |
| | | size="small" |
| | | plain |
| | | @click="setSpaceTableLayer" |
| | | >查询</el-button> |
| | | <el-button |
| | | plain size="small" |
| | | plain |
| | | size="small" |
| | | @click="restSpacePopLayer" |
| | | >重置</el-button> |
| | | </el-form-item> |
| | |
| | | <div class="centTable"> |
| | | <el-table |
| | | :data="tableData" |
| | | height="260px" |
| | | border |
| | | height="100%" |
| | | ref="filterTable" |
| | | style="width: 100%" |
| | | > |
| | |
| | | :prop="item.field" |
| | | show-overflow-tooltip |
| | | align="center" |
| | | :fit="true" |
| | | ></el-table-column> |
| | | </el-table> |
| | | </div> |
| | |
| | | attributeData: [], |
| | | optionx: [], |
| | | options: [], |
| | | conditions: [ |
| | | ['=', '<>', 'like'], |
| | | ['>=', '>', ' =', '<=', '<', '<>'], |
| | | ['>=', '>', ' =', '<=', '<', '<>'], |
| | | ], |
| | | options1: [ |
| | | { |
| | | value: '=', |
| | |
| | | spaceLayer: '', |
| | | imagePoint: null, |
| | | domainsLayer: null, |
| | | querytype: null, |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | this.showSpacePopLayer(); |
| | | }, |
| | | changeValue(value) { |
| | | |
| | | var obj = {}; |
| | | obj = this.optionx.find(function (item) { |
| | | return item.value === value; |
| | | return item.field === value; |
| | | }); |
| | | if (obj.type == 'serial' || obj.type == 'int') { |
| | | this.options = this.options2; |
| | | |
| | | // 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 { |
| | | this.options = this.options1; |
| | | 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() { |
| | |
| | | showSpacePopLayer() { |
| | | let val_date = this.optionx[0]; |
| | | this.formInline.name = val_date.field; |
| | | if (val_date.type == 'serial' || val_date.type == 'int') { |
| | | this.options = this.options2; |
| | | 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 { |
| | | this.options = this.options1; |
| | | 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(); |
| | | }, |
| | |
| | | if (data.code != 200) { |
| | | this.$message.error('列表调用失败'); |
| | | } |
| | | |
| | | this.optionx = []; |
| | | var valadata = data.result; |
| | | for (var i in valadata) { |
| | |
| | | this.$message.error('列表调用失败'); |
| | | } |
| | | this.domainsLayer = data.result; |
| | | |
| | | this.setListDataStart(); |
| | | this.getTableselectFields(); |
| | | }, |
| | |
| | | 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 (querytype == "date" || 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 + |
| | | ' ' + |
| | | this.formInline.input; |
| | | this.formInline.name + " " + this.formInline.region + " " + val |
| | | |
| | | } |
| | | |
| | | const data = await dataQuerySelectByPage(this.listdata); |
| | | 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); |
| | | |
| | | this.setMapLoaction(wkt, row); |
| | | } |
| | | }, |
| | | handleSizeChange(val) { |
| | |
| | | this.listdata.pageIndex = val; |
| | | this.getSpaceTableLayer(); |
| | | }, |
| | | setMapLoaction(res) { |
| | | if (this.$store.state.primitLayer != null) { |
| | | sgworld.Creator.DeleteObject(this.$store.state.primitLayer); |
| | | this.$store.state.primitLayer = null; |
| | | } |
| | | 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') { |
| | | this.$store.state.primitLayer = sgworld.Creator.CreateLabel( |
| | | { X: coord[0], Y: coord[1], Altitude: 2000 }, |
| | | '', |
| | | SmartEarthRootUrl + 'Workers/image/mark.png', |
| | | { |
| | | disableDepthTestDistance: Infinity, |
| | | scale: 0.8, |
| | | }, |
| | | 0, |
| | | '巡检点' |
| | | var val = Cesium.Cartesian3.fromDegrees( |
| | | res.coordinates[0], |
| | | res.coordinates[1], |
| | | |
| | | ); |
| | | sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item); |
| | | } else if (res.type == 'MultiPolygon') { |
| | | 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) |
| | | |
| | | 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 = []; |
| | | for (var i in val) { |
| | | |
| | | std.push({ x: val[i][0], y: val[i][1], z: 1000 }) |
| | | std.push(val[i][0]) |
| | | |
| | | std.push(val[i][1]) |
| | | } |
| | | this.$store.state.primitLayer = sgworld.Creator.createPolygon(std, { |
| | | fillColor: '#ffff00', |
| | | outlineColor: '#fff', |
| | | outlineWidth: 2 |
| | | }, 1, 0, "面"); |
| | | sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item); |
| | | |
| | | this.$store.state.primitLayer = Viewer.entities.add({ |
| | | 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 = []; |
| | |
| | | |
| | | std.push({ x: line[i][0], y: line[i][1], z: 1000 }) |
| | | } |
| | | this.$store.state.primitLayer = sgworld.Creator.createPolyline(std, "#ffff00", 1, 0, "线"); |
| | | this.$store.state.primitLayer = sgworld.Creator.createPolyline(std, "#ffff00", 1, 0, "线"); |
| | | sgworld.Navigate.flyToObj(this.$store.state.primitLayer.item); |
| | | } |
| | | }, |
| | | }, |
| | | destroyed() { |
| | | this.$store.state.propertiesFlag = null; |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | |
| | | border: 1px solid gray; |
| | | float: left; |
| | | .centTable { |
| | | height: 230px; |
| | | position: absolute; |
| | | height: 66%; |
| | | width: 98%; |
| | | } |
| | | .rightTitle { |
| | | padding: 5px; |
| | | |
| | | |
| | | width: 100%; |
| | | .boxClose { |
| | | float: right; |
| | | margin-right: 20px; |
| | | |
| | | } |
| | | } |
| | | .bottomPage { |
| | | position: absolute; |
| | | bottom: 1%; |
| | | bottom: 3%; |
| | | } |
| | | |
| | | |
| | | /deep/.el-form-item { |
| | | margin-bottom: 0px; |
| | | } |
| | | } |
| | | </style> |