+ add_circle_outline
+
+
+
+ add_circle_outline
+ delete
+
+ | + |
+ |
+ 区域 | ++ + | +面积 | ++ + | +基本情况 | ++ + | +
|---|
realistic-picture works!
+
+
diff --git a/src/app/ui/realistic-picture/realistic-picture.component.scss b/src/app/ui/realistic-picture/realistic-picture.component.scss
index e69de29..ce2c26d 100644
--- a/src/app/ui/realistic-picture/realistic-picture.component.scss
+++ b/src/app/ui/realistic-picture/realistic-picture.component.scss
@@ -0,0 +1,96 @@
+.content {
+ margin: 0 0 0 10px;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ .leftBox {
+ flex: 15%;
+ padding-top: 10px;
+ .bank {
+ display: flex;
+ padding-left: 10px;
+ .mat-icon {margin-right: 15px;}
+ }
+ }
+ .rightBox {
+ border-left: 1px solid #999;
+ flex: 85%;
+ display: flex;
+ flex-direction: column;
+ .topBox {
+ flex: 5%; padding: 10px;
+ display: flex;
+ :first-child {flex: 85%;};
+ :last-child {flex: 15%;}
+ }
+ .bottomBox {
+ flex: 95%;
+ padding: 5px 0 0 25px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;}
+ }
+}
+
+//icon统一样式
+.mat-icon {
+ cursor:pointer;
+ width: 18px;
+ height: 18px;
+ vertical-align:top;
+ margin-right: 10px;
+}
+.title {margin-right: 30px;font-weight: 500; font-size: 18px;}
+
+.material {
+ cursor:pointer;
+ height: 30px;
+ font-size: 16px;
+ margin-top: 10px;
+ padding-left: 15px;
+ .btn {
+ color: #FFC122;
+ }
+}
+.imgBox{
+ width: 300px;
+ height: 200px;
+ margin: 0 25px 25px 0;
+ display: inline-block;
+ img {width: 100%;cursor:pointer;}
+ input{
+ font-size:12px;
+ width: 100px;
+ height:18px;
+ border-radius:3px;
+ border:1px solid #c8cccf;
+ outline:0;
+ text-align:left;
+ padding-left: 5px;
+ display:inline-block;
+ cursor: pointer;}
+ input::-webkit-input-placeholder{
+ color: #986655;
+ font-size: 12px;
+ }
+ a {display: inline-block;
+ width: 45px;
+ height: 24px;
+ line-height: 24px;
+ text-align: center;
+ border-radius: 3px;
+ background-color: #2196F3;
+ font-size: 14px;
+ color: #fff;}
+}
+
+//左侧实景图文件样式
+ .leftFile {
+ background-color: rgba(225,225,225,0.8);
+ }
+//选中图片样式
+ .selectImg {
+ -webkit-filter: drop-shadow(0px 0px 5px #000);
+ filter: drop-shadow(0px 0px 5px #000);
+ border: 2px solid #00FF00;
+ }
\ No newline at end of file
diff --git a/src/app/ui/realistic-picture/realistic-picture.component.ts b/src/app/ui/realistic-picture/realistic-picture.component.ts
index b2dc063..aecbc9d 100644
--- a/src/app/ui/realistic-picture/realistic-picture.component.ts
+++ b/src/app/ui/realistic-picture/realistic-picture.component.ts
@@ -1,4 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+
@Component({
selector: 'app-realistic-picture',
@@ -7,9 +11,120 @@ import { Component, OnInit } from '@angular/core';
})
export class RealisticPictureComponent implements OnInit {
- constructor() { }
+ constructor(private http:HttpClient,public dialog: MatDialog) { }
ngOnInit(): void {
+
+ }
+
+ allRealPicture:any=[{name:'单位实景图'},{name:'高科技创业园'}]; //所有实景图文件
+ selectReal:any; //选中的实景图文件
+ selectRealIndex:any=0; //选中的实景图文件下标
+ isDownload:boolean = false; //是否批量下载
+ downloadList:any = []; //选中需要下载的图片
+
+ //切换左侧实际图文件
+ changeReal (e,index) {
+ if (this.selectRealIndex != index) {
+ this.selectReal = e
+ this.selectRealIndex = index
+ }
+ }
+
+ //选择批量下载
+ download () {this.isDownload = !this.isDownload}
+
+ // 预览图片---批量选择图片
+ operation () {
+ if (this.isDownload) { //批量选择图片
+
+ } else { //预览图片
+ let dialogRef = this.dialog.open(previewImg,
+ {height: '400px',
+ width:'600px',
+ data: {}});
+ dialogRef.afterClosed().subscribe();
+ }
+
+ }
+
+ //新建实景图文件
+ addReal () {
+ let dialogRef = this.dialog.open(addRealPicture,
+ {data: {}});
+ dialogRef.afterClosed().subscribe();
+ }
+
+ //编辑实景图文件
+ editReal () {
+ if (this.selectReal) {
+ let dialogRef = this.dialog.open(editRealPicture,
+ {data: {}});
+ dialogRef.afterClosed().subscribe();
+ }
}
+
+
+
+
}
+
+
+
+//预览图片组件
+@Component({
+ selector: 'app-previewImg',
+ templateUrl: './previewImg.html',
+ styleUrls: ['./realistic-picture.component.scss']
+})
+export class previewImg {
+
+ constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef
+
+
+
+
+
+
+ 实景图
+ add_circle_outline
+ create
+ cloud_download
+ delete
+
+
+
+
+ folder {{item.name}}
+
+ 
+
+
+ uploading-cad works!
+
+
+
+
+
+
+
+
+
+ 已用/容量:
+ 500MB/5G
+
+| + |
+ |
+ 名称 | ++ + | +时间 | ++ + | +状态 | ++ + | +大小 | ++ + | +
|---|