+
{{item.groupName}}
@@ -137,25 +227,30 @@
@@ -163,23 +258,26 @@
-
+
增加分组
diff --git a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
index 9bb249f..b70344b 100644
--- a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
+++ b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
@@ -1,3 +1,16 @@
+
+*{
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ scrollbar-width: none; /* Firefox */
+}
+::-webkit-scrollbar {
+ display: none; /* Chrome Safari */
+}
.bigbox {
width: 100%;
height: 100%;
@@ -7,6 +20,7 @@
color: red;
}
.titlebox {
+ z-index: 100;
width: 100%;
height: 50px;
background-color: white;
@@ -65,6 +79,100 @@
height: 85%;
background-color: white;
top: 66px;
+ min-width: 268px;
+ overflow-y: auto;
+ .leftKeyImg{
+ .keyImgTitle{
+ width: 100%;
+ height: 33px;
+ line-height: 33px;
+ text-align: center;
+ font-size: 15px;
+ color: #2196F3;
+ background: #e8f4fe;
+ }
+ .planlist{
+ width: 100%;
+ height: 100%;
+ overflow-y: auto;
+ }
+ .content{
+ box-sizing: border-box;
+ padding: 15px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ .realPictureItem{
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ }
+ .realPictureTitle{
+ width: 100%;
+ font-size: 14px;
+ height: 33px;
+ line-height: 33px;
+ text-align: center;
+ margin-bottom: 5px;
+ }
+ .contentitem{
+ margin-right: 15px;
+ div{
+ width: 100px;
+ height: 100px;
+ border-radius: 10px;
+ border: 1px solid #2196F3;
+ overflow: hidden;
+ img{
+ width: 100%;
+ height: 100%;
+ cursor: pointer;
+ }
+ }
+ p{
+ text-align: center;
+ font-size: 13px;
+ margin: 5px 0;
+ width: 100px;
+ }
+ }
+ .realPictureImgItem{
+ position: relative;
+ img{
+ cursor: default!important;
+ }
+ .realPictureImgItemBtn{
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 66px;
+ height: 30px;
+ line-height: 30px;
+ text-align: center;
+ color: white;
+ background: #2196f3;
+ display: none;
+ border-radius: 8px;
+ cursor: pointer;
+ font-size: 12px;
+ }
+ .realPictureImgItemBtn1{
+ top: 15px;
+ }
+ .realPictureImgItemBtn2{
+ top: 55px;
+ }
+ }
+ .realPictureImgItem:hover{
+ // background: rgba(0,0,0,0.2);
+ .realPictureImgItemBtn{
+ display: block;
+ }
+ }
+ }
+ }
+
}
.mainbox {
background-color: white;
@@ -234,6 +342,28 @@
}
}
.keyImgImg {
+ .imgbox{
+ margin-top: 10px;
+ text-align: center;
+ position: relative;
+ img{
+ max-width: 100%;
+ width: auto;
+ height: auto;
+ }
+ .deleteImg{
+ display: none;
+ cursor: pointer;
+ position: absolute;
+ right: 0px;
+ top: 0px;
+ }
+ }
+ .imgbox:hover{
+ .deleteImg{
+ display: block;
+ }
+ }
.uploadBtn{
display: flex;
justify-content: center;
diff --git a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts
index 27da630..ee666d1 100644
--- a/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts
+++ b/src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts
@@ -7,8 +7,10 @@
* @LastEditTime: 2021-06-17 10:01:26
*/
import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, Renderer2, ViewChild, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-create-plan-online-five',
@@ -17,7 +19,7 @@ import { ActivatedRoute } from '@angular/router';
})
export class CreatePlanOnlineFiveComponent implements OnInit {
- constructor(private http: HttpClient, private route: ActivatedRoute) { }
+ constructor(private http: HttpClient, private route: ActivatedRoute, public snackBar: MatSnackBar, public dialog: MatDialog) { }
planName: string //预案名称
@@ -47,13 +49,55 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
})
}
-
-
-
selectedItem: string = '封面'
clickTitleItem(item) {
item == '封面' ? this.selectedItem = '封面' : this.selectedItem = item.groupName
+ if (this.selectedItem == '重点图示') {
+ this.getAllBuildings()
+ this.getSitePlan()
+ this.getRealPicture()
+ }
+ }
+
+ //获取实景图
+ allRealPicture
+ getRealPicture() {
+ let companyId = this.unitId
+ this.http.get('/api/RealityImageGroups', {
+ params: {
+ companyId: '5e9964caa760a059e84512e9'
+ }
+ }).subscribe((data: any) => {
+ this.allRealPicture = data
+ this.getAllRealPicture().then(()=>{
+ console.log('实景图', this.allRealPicture)
+ })
+ })
}
+ async getAllRealPicture() {
+ for (let index = 0; index < this.allRealPicture.length; index++) {
+ const element = this.allRealPicture[index];
+ let data = {
+ groupId: element.id,
+ pageSize: '999',
+ }
+ await new Promise((resolve, reject) => {
+ this.http.get('/api/RealityImages', { params: data }).subscribe((data: any) => {
+ element.realityImages = data.items
+ element.realityImages.forEach(item => { //每张图片设置选中状态为false
+ item.newImageUrl = `/api/Objects/PlanPlatform/${item.imageUrl}?x-oss-process=image/resize,m_fill,h_100,w_100` //处理图片URL地址
+ item.nameStart = item.name.substring(0, item.name.lastIndexOf(".")); //图片名称前缀
+ item.nameEnd = item.name.substring(item.name.lastIndexOf("."), item.name.length); //图片名称后缀
+ resolve(data)
+ });
+ })
+ })
+ }
+
+ }
+
+
+
planTemplateData: any
//获得模板信息
getTemplateData() {
@@ -74,57 +118,100 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
//重点图示增加分组
- addkeyImgItem() {
- this.planTemplateData.forEach(element => {
- if (element.groupName == '重点图示') {
- element.attribute.push({ name: '', imgArr: [] })
- }
- });
+ addkeyImgItem(item) {
+ item.attribute.push({ name: '', imgArr: [] })
+ }
+ //通过左侧实景图增加分组
+ addkeyImgItemLeft(i){
+ console.log(i)
}
//重点图示删除指定分组
- deleteItem(key) {
+ deleteItem(item, key) {
let isDelete = window.confirm('确定要删除该分组吗?分组下上传的图片将一同被删除!')
if (isDelete) {
- this.planTemplateData.forEach(element => {
- if (element.groupName == '重点图示') {
- element.attribute.splice(key, 1)
- }
- });
+ item.attribute.splice(key, 1)
+ }
+ }
+ //重点图示删除指定分组里面的图片
+ deleteImgItem(imgArr, imgkey) {
+ let isDelete = window.confirm('确定要删除该图片吗?')
+ if (isDelete) {
+ imgArr.splice(imgkey, 1)
}
}
-
//重点图示上传图片
- file: any
- filechange(e) {
- this.file = e.target.files[0] || null //上传的文件
+ filechange(e, i) {
let file = e.target.files[0] || null //获取上传的文件
let fileSize = file.size || null //上传文件的总大小
let maxSize = 5 * 1024 * 1024 //5MB一个分片
let tenSize = 100 * 1024 * 1024 //100MB限制
if (file && fileSize <= maxSize) { //上传文件<=5MB时
- let upload = this.uploadFile(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.companyId, file)
- upload.then(res => {
- console.log('小于5M', res)
- //图片地址 /api/Objects/PlanPlatform/res.objectName
+ let upload = this.uploadFile(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.planId, file)
+ upload.then((res: any) => {
+ i.imgArr.push('/api/Objects/PlanPlatform/' + res.objectName)
})
} else { //上传文件>5MB时
- let upload = this.sectionUpload(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.companyId, file)
+ let upload = this.sectionUpload(this.route.snapshot.queryParams.companyId, this.route.snapshot.queryParams.planId, file)
upload.then(res => {
- // this.renovateBaseMap('/api/Objects/PlanPlatform/' + res, item)
- console.log('大于5M', res)
+ i.imgArr.push('/api/Objects/PlanPlatform/' + res)
})
}
- // else {
- // const config = new MatSnackBarConfig();
- // config.verticalPosition = 'top';
- // config.duration = 3000
- // this.snackBar.open('上传底图需小于100MB', '确定', config);
- // }
}
+ //单位相关数据
+ unitId: any = this.route.snapshot.queryParams.companyId
+ //获得所有的建筑物
+ allBuildings: any
+ getAllBuildings() {
+ this.http.get("/api/Buildings", {
+ params: {
+ companyId: this.unitId
+ }
+ }).subscribe((data: any) => {
+ data.forEach((item, index) => {
+ let params = { buildingId: item.id }
+ item.plandata = []
+ this.http.get('/api/BuildingAreas', { params }).subscribe(data => {
+ item.plandata = data
+ })
+ })
+ this.allBuildings = data
+ })
+ }
+ //获取总平面图
+ sitePlanItems: any
+ getSitePlan() {
+ let params = { companyId: this.unitId }
+ this.http.get('/api/SitePlans', { params: params }).subscribe(data => {
+ this.sitePlanItems = data
+ })
+ }
+ //打开采集工具
+ openPlan(item, index) {
+ sessionStorage.setItem("gisplan", 'look')
+ sessionStorage.setItem("companyId", this.unitId)
+ let data = { select: item, key: index, allBuildings: this.allBuildings }
+ let width = Math.round(document.body.clientWidth * 0.8) + 'px'
+ let height = Math.round(document.body.clientHeight * 0.9) + 'px'
+ // console.log('宽度',width)
+ let dialogRef = this.dialog.open(OpenPlanToolDialog, {//调用open方法打开对话框并且携带参数过去
+ id: 'openPlanToolDialog',
+ data,
+ width: width,
+ height: height
+ });
+ dialogRef.afterClosed().subscribe((data) => { });
+ }
+
+ //input key值,一个字符焦点消失问题
+ trackByFn(index) {
+ return index
+ }
+
+ //正常上传
async uploadFile(companyId: string, planId: string, file) {
let formData = new FormData()
formData.append("file", file)
@@ -134,11 +221,6 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
})
})
}
- //input key值,一个字符焦点消失问题
- trackByFn(index){
- return index
- }
-
//分段上传
sectionUpload(companyId: string, planId: string, file) {
let data = { filename: file.name }
@@ -193,3 +275,44 @@ export interface buildingTypes {
id: string,
name: string,
}
+
+
+//查看预案
+@Component({
+ selector: 'lookPlan-dialog',
+ templateUrl: './openPlanTool.html',
+ styleUrls: ['./openPlanTool.scss']
+})
+export class OpenPlanToolDialog {
+
+ constructor(public http: HttpClient, public snackBar: MatSnackBar, public dialogRef: MatDialogRef
,
+ @Inject(MAT_DIALOG_DATA) public data, private render2: Renderer2, public dialog: MatDialog, private route: ActivatedRoute) { }
+
+ @ViewChild('plan') plan: any //子组件
+
+ ngOnInit() {
+
+ }
+
+ ngAfterViewInit(): void {
+ this.noticePlan()
+ }
+
+ //通知 子组件 传递参数
+ noticePlan() {
+ let parameter = { //查询 节点 对应 建筑/楼层 index,id
+ buildingIndex: this.data.key, //总平面图/建筑 index
+ storeyId: this.data.select.id
+ }
+ this.http.get("/api/Buildings", { params: { companyId: this.route.snapshot.queryParams.companyId } }).subscribe((data: any) => {
+ this.plan.allBuildings = data
+ this.plan.seekPanelPoint(parameter)
+ })
+ }
+
+ //关闭弹窗
+ closeDiv() {
+ this.dialogRef.close()
+ }
+
+}
\ No newline at end of file
diff --git a/src/app/plan-management/create-plan-online-five/openPlanTool.html b/src/app/plan-management/create-plan-online-five/openPlanTool.html
new file mode 100644
index 0000000..2c411a2
--- /dev/null
+++ b/src/app/plan-management/create-plan-online-five/openPlanTool.html
@@ -0,0 +1,3 @@
+
diff --git a/src/app/plan-management/create-plan-online-five/openPlanTool.scss b/src/app/plan-management/create-plan-online-five/openPlanTool.scss
new file mode 100644
index 0000000..2952dfd
--- /dev/null
+++ b/src/app/plan-management/create-plan-online-five/openPlanTool.scss
@@ -0,0 +1,16 @@
+.divbox {
+ width: 100%;
+ height: 100%;
+}
+// @media screen and (max-width:1400px){
+// .divbox{
+// width: 100%;
+// height: 618px;
+// }
+// }
+// @media screen and (min-width:1400px) and (max-width:1600px){
+// .divbox{
+// width: 100%;
+// height: 660px;
+// }
+// }
diff --git a/src/app/plan-management/entry-plan-look/entry-plan-look.component.html b/src/app/plan-management/entry-plan-look/entry-plan-look.component.html
index b0d0fad..1ad7e3f 100644
--- a/src/app/plan-management/entry-plan-look/entry-plan-look.component.html
+++ b/src/app/plan-management/entry-plan-look/entry-plan-look.component.html
@@ -21,8 +21,9 @@
单位地址:{{unitdata.unitaddress == "null" ? "无" : unitdata.unitaddress}}
-
- 查看详情
+
+ 查看详情
@@ -30,16 +31,16 @@
新建
-
+
{{downloadFileName}}
下载中...
-
+