+
-
+
+
+
+
+
+ 关键字:
+
+
+
+
+
+ 完整度:
+
+
+
+
+
+
+
+
+
+
-
+
+ {{item.name}}
+
+
+
+
+
+
+ save保存
+ open_in_browser提交审核
+
+
+
+
\ No newline at end of file
diff --git a/src/app/data-collection/water-collection/water-collection.component.scss b/src/app/data-collection/water-collection/water-collection.component.scss
index ef03c8d..4dc2a6c 100644
--- a/src/app/data-collection/water-collection/water-collection.component.scss
+++ b/src/app/data-collection/water-collection/water-collection.component.scss
@@ -5,14 +5,220 @@
display: flex;
box-sizing: border-box;
padding: 10px;
+ font-size: 16px;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ color: #000000;
}
.listbox{
width: 400px;
height: 100%;
background-color: #fff;
+ .topbox{
+ box-sizing: border-box;
+ padding: 10px 22px 22px;
+ .add{
+ height: 36px;
+ line-height: 36px;
+ display: flex;
+ justify-content: space-between;
+ }
+ .searchbox{
+ .inputbox{
+ width: 100%;
+ height: 36px;
+ font-size: 14px;
+ line-height: 36px;
+ margin: 10px 0;
+ display: flex;
+ span{
+ margin-right: 5px;
+ }
+ select,input{
+ flex: 1;
+ background-color: #F2F4F6;
+ border: 0;
+ border-radius: 5px;
+ box-sizing: border-box;
+ padding:0 8px;
+
+ }
+ .gray{
+ color: gray;
+ }
+ // input::-moz-placeholder {
+ // color: rgba(90, 83, 83, 0.89);
+ // opacity: 1;
+ // }
+ // input:-ms-input-placeholder {
+ // color: rgba(90, 83, 83, 0.89);;
+ // }
+ // input::-webkit-input-placeholder {
+ // color: rgba(90, 83, 83, 0.89);;
+ // }
+ }
+ }
+ }
+ .contantbox{
+ .title{
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0 22px;
+ height: 36px;
+ line-height: 36px;
+ span{
+ font-size: 14px;
+ font-weight: 500;
+ }
+ }
+ }
}
.mapbox{
flex: 1;
margin-left: 10px;
background-color: #fff;
+ display: flex;
+ flex-direction: column;
+ .mapcheckbox{
+ width: 100%;
+ height: 50px;
+ line-height: 50px;
+ mat-checkbox{
+ margin-right:60px;
+ font-size: 15px;
+ }
+ mat-checkbox:nth-child(1){
+ margin-left: 20px;
+ }
+ }
+ #map{
+ flex: 1;
+ position: relative;
+ #container{
+ width: 100%;
+ height: 100%;
+ }
+ .gistopbox{
+ position: absolute;
+ box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+ border-radius: 5px;
+ top: 3px;
+ width: 30%;
+ height:40px;
+ background: #FFFFFF;
+ display: flex;
+ align-items: center;
+ cursor: default;;
+ .inputBox{
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ font-size: 14px;
+ .positionInput{
+ border: 0;
+ border-radius: 6px;
+ width: 80%;
+ height: 28px;
+ background: #F2F2F2;
+ margin-left: 8px;
+ box-sizing: border-box;
+ padding-left: 10px;
+ }
+ }
+
+ }
+ .hidden{
+ opacity: 0;
+ z-index: -1;
+ }
+ .show{
+ opacity: 1;
+ z-index: 1;
+ }
+ }
+ .detailsbox{
+ width: 100%;
+ height:500px;
+ .tabsbox{
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
+ display: flex;
+ justify-content: space-between;
+ font-size: 15px;
+ .tabs{
+ div{
+ float: left;
+ width: 120px;
+ text-align: center;
+ cursor: pointer;
+ color: #000000;
+ opacity: 0.4;
+ border-right: 1px solid #F2F4F6;
+ }
+ .selectedBtn{
+ background-color: #2196F3;
+ color: #fff;
+ opacity: 1;
+ }
+ }
+ .btnbox{
+ span{
+ cursor: pointer;
+ color: #2196F3;
+ mat-icon{
+ vertical-align: text-top;
+ font-size: 20px;
+ width: 20px;
+ height: 20px;
+ }
+ }
+ span:hover{
+ text-decoration: underline;
+ }
+ .submitAudit{
+ margin: 0 30px;
+ }
+ }
+ }
+ .contant{
+ width: 100%;
+ height:480px;
+ overflow-y: auto;
+ p{
+ color: #2196F3;
+ background-color: #F2F4F6;
+ height: 33px;
+ line-height: 33px;
+ box-sizing: border-box;
+ padding-left: 20px;
+ font-size: 15px;
+ }
+ span{
+ font-size: 15px;
+ }
+ input,select{
+ height: 30px;
+ line-height: 30px;
+ box-sizing: border-box;
+ padding: 0 12px;
+ width: 60%;
+ margin-left: 5px;
+ border: 1px solid #EBEBEB;
+ border-radius: 5px;
+ }
+ textarea{
+ width: 89%;
+ margin-left: 5px;
+ height: 85%;
+ border: 1px solid #EBEBEB;
+ border-radius: 5px;
+ }
+
+ }
+ }
}
\ No newline at end of file
diff --git a/src/app/data-collection/water-collection/water-collection.component.ts b/src/app/data-collection/water-collection/water-collection.component.ts
index 18998f1..d013c7d 100644
--- a/src/app/data-collection/water-collection/water-collection.component.ts
+++ b/src/app/data-collection/water-collection/water-collection.component.ts
@@ -1,4 +1,7 @@
+import { Renderer2 } from '@angular/core';
+import { ElementRef } from '@angular/core';
import { Component, OnInit } from '@angular/core';
+declare var AMap: any;
@Component({
selector: 'app-water-collection',
@@ -7,9 +10,150 @@ import { Component, OnInit } from '@angular/core';
})
export class WaterCollectionComponent implements OnInit {
- constructor() { }
+ constructor(private elementRef: ElementRef,public renderer2: Renderer2) { }
+ isCheckedOfSearchDiv:boolean = true//列表过滤滑块
+ slideChange(e){
+ this.isCheckedOfSearchDiv = e.checked
+ }
+ searchForm:any = {
+ name:'',
+ integrityNum:''
+ }
+ listIntegrityNum:any[] = [
+ {id:0,name:'<=50%'},
+ {id:1,name:'50%-60%'},
+ {id:2,name:'60%-70%'},
+ {id:3,name:'70%-80%'},
+ {id:4,name:'80%-90%'},
+ {id:5,name:'90%-100%'}
+ ]
+ checkBoxList:any[] = [
+ {id:0,name:'消火栓'},
+ {id:1,name:'消防水池'},
+ {id:2,name:'天然水源'}
+ ]
ngOnInit(): void {
+ setTimeout(() => {
+ this.createMap()
+ }, 0);
+ }
+ //搜索
+ searchList(){
+ console.log(this.searchForm)
+ }
+ map:any
+ placeSearch:any//构造地点查询类
+ isMapLabel:boolean = false //是否已经标记坐标
+ newPositionMarkerContent:any =
+ '
' +
+ '
' +
+ '
'
+ newPositionMarkerContentBtn:any =
+ '
'
+ //创建地图
+ newPositionMarker:any//坐标实例
+ createMap(){
+ this.map = new AMap.Map('container', {
+ zoom:12
+ })
+ this.map.setCity('上海市');
+ //输入提示
+ var autoOptions = {
+ input: "tipinput"
+ };
+ AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{
+ let auto = new AMap.AutoComplete(autoOptions);
+ this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类
+ auto.on("select", (e)=>{
+ this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat])
+ this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat}
+ this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点
+ });//注册监听，当选中某条记录时会触发
+
+ });
+
+ if(this.isMapLabel){//如果已经标注单位坐标
+ console.log('已标注单位位置')
+ // this.map.setCenter([this.unitinfo.location.x,this.unitinfo.location.y]);
+ // this.oldPositionMarker = new AMap.Marker({
+ // position: [this.unitinfo.location.x,this.unitinfo.location.y],
+ // content: this.newPositionMarkerContent,
+ // offset: new AMap.Pixel(-15, -18)
+ // })
+ // // 将 markers 添加到地图
+ // this.map.add(this.oldPositionMarker);
+ }else{
+ console.log('未标注单位位置')
+ // this.map.setCity('上海市');
+ }
}
+ //点击位置
+ isGisTopBox:boolean = false //
+ searchTitle:any = ''//
+
+ positionLngLat:any = {}//临时坐标点
+ atLastPositionLngLat:any = {}//最终坐标点
+
+
+ setPosition(){
+ if(!this.isGisTopBox){
+ this.isGisTopBox = true
+ this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
+ let center
+ if(this.newPositionMarker && this.atLastPositionLngLat.x){//如果已经标注单位坐标
+ center = [this.atLastPositionLngLat.x, this.atLastPositionLngLat.y]
+ }else{
+ center = this.map.getCenter(); //获取当前地图中心位置
+ }
+ this.newPositionMarker = new AMap.Marker({
+ draggable: true,
+ position: center,
+ content: this.newPositionMarkerContentBtn,
+ offset: new AMap.Pixel(-15, -18)
+ });
+ this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]}
+ this.map.add(this.newPositionMarker);
+ this.isMapLabel = true
+ this.newPositionMarker.on('dragend', (e)=>{
+ this.positionLngLat = {x: e.lnglat.lng, y: e.lnglat.lat}
+ })
+ //点击确定
+ this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{
+ this.isGisTopBox = false
+ this.map.remove(this.newPositionMarker)
+ this.newPositionMarker = new AMap.Marker({
+ position: [this.positionLngLat.x,this.positionLngLat.y],
+ content: this.newPositionMarkerContent,
+ offset: new AMap.Pixel(-15, -18)
+ });
+ this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
+ this.map.add(this.newPositionMarker);
+ this.positionLngLat = this.atLastPositionLngLat
+ })
+ this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'click',(event)=>{
+ this.isGisTopBox = false
+ this.map.remove(this.newPositionMarker)
+ if(this.positionLngLat.x && this.positionLngLat.x != 0 && !this.atLastPositionLngLat.x){//直接取消
+ this.map.remove(this.newPositionMarker)
+ this.positionLngLat = {}
+ this.atLastPositionLngLat = {}
+ }else{
+ this.newPositionMarker = new AMap.Marker({
+ position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
+ content: this.newPositionMarkerContent,
+ offset: new AMap.Pixel(-15, -18)
+ });
+ this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
+ this.map.add(this.newPositionMarker);
+ this.positionLngLat = this.atLastPositionLngLat
+ }
+ })//取消
+ }
+
+ }
}
diff --git a/src/app/key-unit/key-unit-management/key-unit-management.component.html b/src/app/key-unit/key-unit-management/key-unit-management.component.html
index 9b78ece..fa0d039 100644
--- a/src/app/key-unit/key-unit-management/key-unit-management.component.html
+++ b/src/app/key-unit/key-unit-management/key-unit-management.component.html
@@ -1,5 +1,4 @@
-
-
|
' +
+ '