[完善]采集平台同步预案平台功能

src/app/pages/register/register.component.html

@@ -81,7 +81,7 @@
             {{errmsg}}
           </div>
           <div class="register">
-            <a href="javascript:void(0);" (click)='toLogin()'>已有账号,去登陆</a>
+            <a href="javascript:void(0);" (click)='toLogin()'>登录账号</a>
             <a href="javascript:void(0);" style="margin-left: 135px;" class="forget">
               注册失败?
               <div class="contactUs">

src/app/ui/collection-tools-building/collection-tools.component.ts

@@ -647,7 +647,7 @@ export class CollectionToolsComponent2 implements OnInit {
     this.renovateTreeData(false)
   }
 
-  basicInfo:boolean = true //基本信息名称显隐
+  basicInfo:boolean = false //基本信息名称显隐
   wantToWork:boolean = true //想定作业名称显隐
   //点击基本信息名称
   basicInfoClick(){

src/app/ui/collection-tools/collection-tools.component.ts

@@ -646,7 +646,7 @@ export class CollectionToolsComponent implements OnInit {
     this.renovateTreeData(false)
   }
 
-  basicInfo:boolean = true //基本信息名称显隐
+  basicInfo:boolean = false //基本信息名称显隐
   wantToWork:boolean = true //想定作业名称显隐
   //点击基本信息名称
   basicInfoClick(){

src/app/ui/collection-tools/panel.scss

@@ -35,6 +35,7 @@
 
 //平面图
 .sitePlanContent {
+  overflow: hidden;
   position: relative;
   width: 100%;
   height: 35px;

src/app/ui/key-site/key-site.component.html

@@ -40,7 +40,20 @@
             <ng-container matColumnDef="img">
               <th mat-header-cell *matHeaderCellDef>图片</th>
               <td mat-cell *matCellDef="let element">
-                <a href="javascript:void(0);" (click)='seeImg(element.imageUrls)' style="color: blue;">查看图片</a>
+                <a href="javascript:void(0);" (click)='seeImg(element)' style="color: blue;">查看图片</a>
+                <ng-container *ngIf="element.imageUrls && (element.imageUrls.length >= element.imageLimit); else elseTemplate">
+                  <div class="file" href="" (click)="Limit(element)">
+                    上传图片
+                  </div>
+                </ng-container>
+                <ng-template #elseTemplate>
+                  <a href="javascript:;" class="file">
+                    <input type="file" name="" id="" (change)="selectFile(element,$event)">上传图片
+                  </a>
+                </ng-template>
+                
+                
+               
               </td>
             </ng-container>
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

src/app/ui/key-site/key-site.component.scss

@@ -19,7 +19,35 @@ table {
     text-align: center;
   }
 }
-
+.file {
+  position: relative;
+  display: inline-block;
+  background: #D0EEFF;
+  border: 1px solid #99D3F5;
+  border-radius: 4px;
+  padding: 4px 12px;
+  overflow: hidden;
+  color: #1E88C7;
+  text-decoration: none;
+  text-indent: 0;
+  line-height: 20px;
+  vertical-align: middle;
+  margin-left: 3px;
+  cursor: pointer;
+}
+.file input {
+  position: absolute;
+  font-size: 100px;
+  right: 0;
+  top: 0;
+  opacity: 0;
+}
+.file:hover {
+  background: #AADFFD;
+  border-color: #78C3F3;
+  color: #004974;
+  text-decoration: none;
+}
 //重点提示
 .tips{
   width: 75%;
@@ -45,6 +73,7 @@ table {
   width: 1500px;
   height: 700px;
   text-align: center;
+  position: relative;
   img{
     width: auto;
     height: auto;

src/app/ui/key-site/key-site.component.ts

@@ -135,7 +135,7 @@ export class KeySiteComponent implements OnInit {
 
   //查看图片
   seeImg (e) {
-    if (e.length) {
+    if (e.imageUrls.length != 0) {
       let data = e
       const dialogRef = this.dialog.open(KeySiteImgs, {//调用open方法打开对话框并且携带参数过去
         width: '1600px',
@@ -167,6 +167,61 @@ export class KeySiteComponent implements OnInit {
     })
   }
 
+  objectName:any //上传对象名
+  keySiteItem:any 
+  keySiteItemImgList:any //重点部位图片集合
+  Limit(element){
+    console.log(element)
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('图片已达上限','确定',config)
+  }
+  //上传素材图片
+  selectFile(element,e){
+    let imgFile = e.target.files[0] || null //上传的文件
+    this.keySiteItemImgList = element.imageUrls ? element.imageUrls : []
+    this.keySiteItem = element
+    console.log(this.keySiteItem)
+    this.startUploading(imgFile)
+  }
+  
+  startUploading (imgFile) {
+    let _this = this
+    let file = imgFile || null //获取上传的文件
+    let fileSize = file.size || null //上传文件的总大小
+    let shardSize = 5 * 1024 * 1024 //5MB一个分片
+    let companyId = sessionStorage.getItem("companyId")
+    if (file && fileSize <= shardSize) { //上传文件<=5MB时
+      let formData = new FormData()
+      formData.append("file",file)
+      this.http.post(`api/Objects/WebPlan2D/${companyId}`,formData).subscribe((data:any)=>{
+        this.objectName = data.objectName
+        const config = new MatSnackBarConfig();
+        config.verticalPosition = 'top';
+        config.duration = 3000
+        this.snackBar.open('上传成功','确定',config)
+        this.keySiteItemImgList.push("/api/Objects/WebPlan2D/" + this.objectName)
+        this.keySiteItem.imageUrls = this.keySiteItemImgList
+        this.http.put(`/api/CompanyAccount/BuildingImportantLocations/${this.keySiteItem.id}`,this.keySiteItem,{
+          // params:{
+          //   companyId : companyId
+          // }
+        }).subscribe((data)=>{
+          // console.log(666,'修改成功')
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('修改成功','确定',config)
+        })
+      })
+    } else if (file && fileSize > shardSize) { //上传文件>5MB时,分块上传
+      let config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('上传图片文件不允许大于5mb','确定',config);
+    }
 
+  }
 
 }

src/app/ui/key-site/keysiteimgs.component.html

@@ -1,10 +1,13 @@
 <div mat-dialog-title>图片详情</div>
+<span *ngIf="allImages.length != 0" style="position: absolute;right: 2px;top: 2px;cursor: pointer;z-index: 200;">
+  <mat-icon class="hoverred" (click)="deleteImg()">delete</mat-icon>
+</span>
 <div class="swiper-container">
     <div class="swiper-wrapper">
         <div *ngFor="let item of allImages" class="swiper-slide previewImgBox">
           <img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" 
-          [attr.data-src]="item">
+          [src]="item">>
-          <div class="swiper-lazy-preloader"></div>
+          <!-- <div class="swiper-lazy-preloader"></div> -->
         </div>
     </div>
 
@@ -13,6 +16,6 @@
     <div class="swiper-button-next"></div>
 </div>
 
-<div class="previewImgBottom">
+<div class="previewImgBottom" *ngIf="allImages.length != 0">
   <button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button>
 </div>

src/app/ui/key-site/keysiteimgs.component.ts

@@ -1,31 +1,43 @@
-import { Component, OnInit, Inject ,ViewChild} from '@angular/core';
+import { Component, OnInit, Inject, ViewChild } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import Swiper from 'swiper';
-
+import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 
 
 @Component({
-    selector: 'keysiteimgs',
+  selector: 'keysiteimgs',
-    templateUrl: './keysiteimgs.component.html',
+  templateUrl: './keysiteimgs.component.html',
-    styleUrls: ['./key-site.component.scss']
+  styleUrls: ['./key-site.component.scss']
-  })
+})
 
 export class KeySiteImgs {
-  
+
-  constructor(private http:HttpClient,public dialog: MatDialog,public dialogRef: MatDialogRef<KeySiteImgs>,
+  constructor(private http: HttpClient, public dialog: MatDialog, public dialogRef: MatDialogRef<KeySiteImgs>,
-    @Inject(MAT_DIALOG_DATA) public data) { }
+    @Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) { }
-    testSwiper: Swiper;
+  testSwiper: Swiper;
 
   ngOnInit(): void {
     this.allImages = []
-    this.data.forEach(element => {
+    this.data.imageUrls.forEach(element => {
-      element = `${element}?x-oss-process=image/auto-orient,1`
+      element = `${element}`
       this.allImages.push(element)
     });
+    setTimeout(() => {
+      this.testSwiper = new Swiper('.swiper-container', {
+        direction: 'horizontal',
+        loop: false,
+        lazy: true,
+        // 如果需要前进后退按钮
+        navigation: {
+            nextEl: '.swiper-button-next',
+            prevEl: '.swiper-button-prev',
+        }
+      });
+    }, 0);
   }
-  
+
-  ngAfterViewInit() { 
+  ngAfterViewInit() {
 
     this.testSwiper = new Swiper('.swiper-container', {
       direction: 'horizontal',
@@ -33,23 +45,51 @@ export class KeySiteImgs {
       lazy: true,
       // 如果需要前进后退按钮
       navigation: {
-          nextEl: '.swiper-button-next',
+        nextEl: '.swiper-button-next',
-          prevEl: '.swiper-button-prev',
+        prevEl: '.swiper-button-prev',
       }
     });
 
   }
 
-  allImages:any; //展示所有的图片
+  allImages: any; //展示所有的图片
-  rotationAngle:number=0; //旋转角度
+  rotationAngle: number = 0; //旋转角度
 
   //旋转图片
-  rotate () {
+  rotate() {
-    this.rotationAngle = this.rotationAngle+90
+    this.rotationAngle = this.rotationAngle + 90
-    if (this.rotationAngle === 360) {this.rotationAngle = 0}
+    if (this.rotationAngle === 360) { this.rotationAngle = 0 }
   }
 
 
+  deleteImg(){
+
+    if(this.allImages.legth != 0){
+      let isTrue = window.confirm('您确定要删除该图片吗？')
+      if(isTrue){
+        // this.allImages = [...this.allImages.filter((item)=>{
+        //   return  item != this.allImages[this.testSwiper.activeIndex]
+        // })]
+        //在图片循环数组中将图片去掉
+        this.allImages.splice(this.testSwiper.activeIndex, 1);
+        //更新swiper视图
+        setTimeout(() => {
+          this.testSwiper.update()
+        }, 0);
+        this.data.imageUrls = this.allImages
+        this.http.put(`/api/BuildingImportantLocations/${this.data.id}`,this.data,{
+          params:{
+            companyId : sessionStorage.getItem("companyId")
+          }
+        }).subscribe((data)=>{
+          // console.log(666,'修改成功')
+          const config = new MatSnackBarConfig();
+          config.verticalPosition = 'top';
+          config.duration = 3000
+          this.snackBar.open('删除成功','确定',config)
+        })
+      }
+    }
+  }
 
 }
-  

src/app/ui/realistic-picture/realistic-picture.component.ts

@@ -71,6 +71,17 @@ export class RealisticPictureComponent implements OnInit {
   getAllGrouping() {
     this.http.get('/api/CompanyAccount/RealityImageGroups').subscribe((data: any) => {
       this.allRealPicture = data
+      this.allRealPicture.unshift({
+        companyId: sessionStorage.getItem('companyId'),
+        id: '重点部位',
+        name: "重点部位",
+        realityImages: null
+      }, {
+        companyId: sessionStorage.getItem('companyId'),
+        id: '安全出口',
+        name: "安全出口",
+        realityImages: null
+      })
       this.selectReal = data[this.selectRealIndex]
     })
   }
@@ -572,7 +583,7 @@ export class editRealPicture {
       name: e.name,
       companyId: this.data.companyId
     }
-    if(e.name == '安全出口' || e.name == '重点部位'){
+    if(e.name == '安全出口' || e.name == '重点部位' || e.name == '外观'){
       let config = new MatSnackBarConfig();
       config.verticalPosition = 'top';
       config.duration = 3000