[修改]熟悉路线上传功能

src/app/ui/find-problem/find-problem.component.html

@@ -4,24 +4,27 @@
  * @Author: sueRimn
  * @Date: 2020-11-06 14:39:10
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-11-06 15:39:13
+ * @LastEditTime: 2020-11-06 19:37:02
 -->
+
 <div class="box">
     <div class="topadd">
-        <button>新增</button>
+        <button (click)="addPermission()">新增</button>
     </div>
     <div class="center">
-        <div class="one">
-            <span>问题1：</span>
-            <div class="upload">
+        <div class="one" *ngFor="let item of knowRoute; let key=index">
+            <span>{{item.name}}</span>
+            <img [src]="imgsrc" alt="" style="width: 200px; height: 100px;" >
+            <input id="selectedfile"  type="file"  name="imgFile" accept=".jpg,.png,.jpeg,.gif,.webp">
+            <!-- <div class="upload">
                 <div class="uploadingimg">
-                    <img [src]="imgsrc" alt="" style="width: 199px; height: 70px;" >
+                    <img [src]="imgsrc" alt="" style="width: 200px; height: 100px;" >
                 </div>
             </div>
             <div class="image"  >
                 <input id="selectedfile"  type="file"  name="imgFile" accept=".jpg,.png,.jpeg,.gif,.webp">
-            </div>
-            <textarea name="" id="" cols="30" rows="3"></textarea>
+            </div> -->
+            <textarea name="" id="" cols="60" rows="6"></textarea>
             <button>删除</button>
         </div>
     </div>

src/app/ui/find-problem/find-problem.component.scss

@@ -26,13 +26,47 @@
         span{
             font-size: 0.146484rem;
             margin-left: 0.488281rem;
+            position: relative;
+            top: -0.488281rem;
         }
         textarea{
             position: relative;
-            left: 60%;
+            left: 3%;
+            //bottom: 20px;
         }
         .one{
             width: 100%;
+            input{
+                width: 1.953125rem;
+                height: 0.976563rem;
+                position: absolute;
+                left: 1.171875rem;
+                //top: 1.171875rem;
+                opacity: 0;
+                margin-top: 0.048828rem;
+                cursor: pointer;
+            }
+            img{
+                position: relative;
+                margin-left: 20px;
+                
+            }
+        }
+        button{
+            position: relative;
+            bottom: 50px;
+            left: 3%;
+            background-color: #FFFFFF; /* Green */
+            border: 1px solid #000000;
+            border-radius: 8px;
+            color: #000000;
+            padding: 0.097656rem 0.488281rem;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 0.146484rem;
+            margin-left: 0.488281rem;
+            cursor: pointer;
         }
     }
     .upload{
@@ -44,7 +78,7 @@
             // background: url('../../../assets/images/upload2.png') no-repeat center center;
 
             position: absolute;
-            left: 0.78125rem;
+            left: 0.976563rem;
             top: 1.171875rem;
             //border: 1px dashed gray;
             border-radius:3px;
@@ -61,11 +95,11 @@
         // width: 299px;
         // height: 170px;
         input{
-            width: 0.976563rem;
-            height: 0.683594rem;
+            width: 1.953125rem;
+            height: 0.976563rem;
             position: absolute;
-            left: 60px;
-            bottom: 0.244141rem;
+            left: 1.171875rem;
+            top: 1.171875rem;
             opacity: 0;
             margin-top: 0.048828rem;
             cursor: pointer;

src/app/ui/find-problem/find-problem.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-11-06 14:39:10
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-11-06 15:15:22
+ * @LastEditTime: 2020-11-06 19:09:32
  */
 import { Component, OnInit } from '@angular/core';
 
@@ -20,5 +20,14 @@ export class FindProblemComponent implements OnInit {
   ngOnInit(): void {
   }
   imgsrc = "../../../assets/images/upload.jpg" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
+  //问题对象
+  knowRoute=[{name:`问题1`,idnum:""}]
+  num=1
+  //增加一行
+  addPermission(){
+    this.num++;
+    var nums=this.num.toString()
+    this.knowRoute.push({name:"问题"+nums,idnum:""})
+  } 
 
 }

src/app/ui/know-route/know-route.component.html

@@ -4,20 +4,20 @@
  * @Author: sueRimn
  * @Date: 2020-11-05 15:27:58
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-11-06 16:27:42
+ * @LastEditTime: 2020-11-07 12:25:26
 -->
 <div class="box">
     <div class="addbw">
         <span>添加熟悉部位:</span>
-        <button *ngFor="let item of knowBw; let key=index" (click)="addRoute($event)">{{item.name}}</button>
-        <button class="button">保存</button>
+        <button *ngFor="let item of knowBw; let key=index" (click)="addRoute($event,item)">{{item.name}}</button>
+        <button class="button" (click)="savaClick()">保存</button>
     </div>
     <div class="addRoute">
         <span>添加路线:</span>
         <input type="text" > <!-- [(ngModel)]="knowRoute" -->
-        <span class="floot" [ngClass]="{'beijicolor': chooseid ==key}" (click)="knowroutwClick($event,key)" *ngFor="let item of knowRoute; let key=index">{{item.name+item.idnum}}</span>
+        <span class="floot" [ngClass]="{'beijicolor': chooseid ==key}" (click)="knowroutwClick($event,key,item)" *ngFor="let item of uploadSucced; let key=index">{{item.name}}-></span>
     </div>
-    <div class="bottomAll" *ngIf="showorfalse=='show'">
+    <div class="bottomAll" >
         <div class="upload">
             <div class="uploadingimg">
                 <img [src]="imgsrc" alt="" style="width: 299px; height: 170px;" >
@@ -28,7 +28,7 @@
         </div>
         <div class="remarks">
             <span>备注：</span><br>
-            <textarea name="" id="" cols="50" rows="10"></textarea>
+            <textarea name="" id="" cols="50" rows="10" [(ngModel)]="textareazhi"></textarea>
         </div>
     </div>
 </div>

src/app/ui/know-route/know-route.component.ts

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-11-05 15:27:58
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-11-06 16:36:48
+ * @LastEditTime: 2020-11-07 12:38:14
  */
 import { Component, OnInit } from '@angular/core';
 import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http';
@@ -21,6 +21,7 @@ export class KnowRouteComponent implements OnInit {
   constructor(public snackBar: MatSnackBar,private http: HttpClient) { }
 
   ngOnInit(): void {
+    // this.uploadSucced = JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) || []
   }
   unitinfo:any={
     id: '',
@@ -51,13 +52,14 @@ export class KnowRouteComponent implements OnInit {
   //控制底部div显隐
   showorfalse="www"
   //判断选中路线的值
-  chooseid=-1
+  chooseid:any
   //熟悉路线对象
   knowRoute=[{name:``,idnum:""}]
   //熟悉部位对象
   knowBw=[{name:"消控室"},{name:"水泵房"},{name:"疏散楼梯"},{name:"各楼层"},{name:"楼层消火栓"},{name:"水泵结合器"},{name:"室外消防水源"}]
-
-  imgsrc = "../../../assets/images/upload.jpg" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
+  textareazhi:""
+  //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
+  imgsrc = "../../../assets/images/upload.jpg"
   imgUrl = ""//返回来的图片地址后缀
   file: any; //上传的文件
   objectName: any; //上传对象名
@@ -102,6 +104,12 @@ export class KnowRouteComponent implements OnInit {
         this.isspinner = false
         this.imgUrl = data.objectName
         this.imgsrc = `/api/Objects/PlanPlatform/${this.imgUrl}?x-oss-process=image/resize,m_fill,h_170,w_299`
+        console.log(this.imgsrc)
+        //localStorage.setItem(this.clickName,this.imgsrc)
+        //this.uploadSucced.push({name:this.clickName,src:this.imgsrc,smark})
+        this.uploadSucced[this.chooseid].src=this.imgsrc
+        //this.uploadSucced[this.chooseid].smark=this.textareazhi
+        console.log(this.uploadSucced)
         const config = new MatSnackBarConfig();
         config.verticalPosition = 'top';
         config.duration = 3000
@@ -159,17 +167,57 @@ export class KnowRouteComponent implements OnInit {
     })
   }
   //熟悉部位点击事件
-  addRoute(event){
+  addRoute(event,item){
     //console.log(event.target.innerHTML)
     //this.knowRoute+=event.target.innerHTML+"🠖"
     this.showorfalse="show"
     this.knowRoute.push({name:event.target.innerHTML,idnum:"🠖"})
+    this.uploadSucced.push({name:item.name,src:"",smark:""})
+    // console.log(this.chooseid)
+    console.log(this.uploadSucced)
   }
+  clickName
+  savekey
+  uploadSucced:any = JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) || []//上传成功暂存对象
   //熟悉路线点击事件
-  knowroutwClick(event,key){
-    console.log(event)
+  knowroutwClick(event,key,item){
+    console.log(123,key)
+    //console.log(this.chooseid)
+    this.showorfalse="show"
+    this.uploadSucced[key].smark = this.textareazhi
     this.chooseid=key
     //event.target.style.border="1px solid #000000"
+    this.clickName=item.name+key+sessionStorage.getItem("companyId")
+    console.log(this.uploadSucced)
+    if( JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) && JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].src!=""){
+      this.imgsrc=JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].src
+      this.textareazhi=JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].smark
+      //console.log(JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key])
+    }else if(this.uploadSucced[key].src!=""){
+      //this.imgsrc=this.uploadSucced[0].src
+      /* for(var i=0;i<this.uploadSucced.length;i++){
+        if(this.uploadSucced[i].name==this.clickName){
+          console.log(this.uploadSucced[i].name)
+          this.imgsrc=this.uploadSucced[i].src
+        }else{this.imgsrc="../../../assets/images/upload.jpg"}
+      }  */
+      this.imgsrc=this.uploadSucced[key].src
+    }
+    else{
+      this.imgsrc="../../../assets/images/upload.jpg"
+      this.textareazhi=""
+    }
+  }
+  //保存点击事件
+  savaClick(){
+   /*  for(var i=0;i<this.uploadSucced.length;i++){
+      localStorage.setItem(this.uploadSucced[i].name,this.uploadSucced[i].src)
+    } */
+    this.uploadSucced[this.chooseid].smark=this.textareazhi
+    localStorage.setItem(sessionStorage.getItem("companyId")+"xxx",JSON.stringify(this.uploadSucced))
+    alert("保存成功")
+    console.log(JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) )
+    //this.snackBar.open('上传成功','确定',config);
   }
 
 }

src/app/ui/training-recordinfo/training-recordinfo.component.html

@@ -4,7 +4,7 @@
  * @Author: sueRimn
  * @Date: 2020-11-06 10:44:49
  * @LastEditors: sueRimn
- * @LastEditTime: 2020-11-06 14:42:36
+ * @LastEditTime: 2020-11-06 17:07:16
 -->
 <div class="bigbox">
     <div class="title">
@@ -21,7 +21,7 @@
                     </ng-template>
                     
                 </mat-tab>
-                <mat-tab label="熟悉路线"> 熟悉路线 </mat-tab>
+                <mat-tab label="熟悉路线"> <app-know-route></app-know-route> </mat-tab>
                 <mat-tab label="单位基本情况">  
                     <ng-template matTabContent>
                         <app-basicinfo></app-basicinfo>    
@@ -54,7 +54,7 @@
                         <app-key-site></app-key-site>   
                     </ng-template>    
                 </mat-tab>
-                <mat-tab label="发现问题"> 发现问题 </mat-tab>
+                <mat-tab label="发现问题"> <app-find-problem></app-find-problem> </mat-tab>
                 <mat-tab label="现场照片"> 
                     <ng-template matTabContent>
                         <app-photoofthescene></app-photoofthescene>