Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/pad-Sixfamiliar

src/app/pages/login/login.component.scss

@@ -27,6 +27,7 @@
 .loginbtn {
   margin-top: 0.488281rem;
   height: 0.341797rem;
+  line-height: 0.341797rem;
   background: linear-gradient(303deg, #FC7045 0%, #FF4923 100%);
   border-radius: 0.292969rem;
   color: #fff;
@@ -63,7 +64,7 @@
   color: #666;
   font-size: 0.234375rem;
   position: absolute;
-  top: 0.351563rem;
+  top: 0.371094rem;
   left: 0.146484rem;
 }
 .mat-card .example-container .icon2 {
@@ -71,6 +72,6 @@
   color: #666;
   font-size: 0.234375rem;
   position: absolute;
-  top: 0.976563rem;
+  top: 0.996094rem;
   left: 0.146484rem
 }

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

@@ -1,36 +1,38 @@
-<!--
+<div class="content">
- * @Descripttion: 
- * @version: 
- * @Author: sueRimn
- * @Date: 2020-11-06 14:39:10
- * @LastEditors: sueRimn
- * @LastEditTime: 2020-11-07 19:32:56
--->
 
-<div class="box">
-    <div class="topadd">
-        <button (click)="addPermission()">新增</button>
-        <button (click)="savaClick()">保存</button>
-    </div>
   <div class="center">
-        <div class="one" *ngFor="let item of uploadSucced; let key=index">
+    <div class="fatherDiv">
-            <span>{{item.name}}</span>
+
-            <div style="margin-left: 80px;width: 280px;" class="swiper-container">
+      <div class="matterDiv" *ngFor="let item of imagesData;let key = index">
-                <div class="swiper-wrapper">
+        <div class="leftDiv">
-                    <div class="swiper-slide" *ngFor="let itemx of item.src; let key=index">
+          <div>问题{{item.index}}:</div>
-                        <img   [src]="itemx"  alt="" style="width: 200px; height: 100px;" >
+          <div *ngIf="isLook == 'edit'"><button (click)='delete(key)'>删除</button></div>
-                        <!-- <div class="swiper-lazy-preloader"></div> -->
+        </div>
+        <div class="rightDiv">
+          <div style="height: 45%;">
+            <textarea maxlength="500" [(ngModel)]="item.matter" name="matter" [readonly]="isLook == 'look'"></textarea>
           </div>
+          <div style="height: 55%;" class="imagesBox">
 
+            <div class="everyImg" *ngIf="isLook == 'edit'">
+              <a href="javascript:;" class="a-upload">
+                <input type="file" (change)='selectFile($event,item)'>+
+              </a>
+            </div>
+            <div class="everyImg" *ngFor="let items of item.imgURL;let keys = index" id="viewerjs{{key}}{{keys}}">
+              <img [src]='items' [attr.data-original]="items.split('?')[0]">
             </div>
-                <!-- 如果需要导航按钮 -->
-                <div class="swiper-button-prev"></div>
-                <div class="swiper-button-next"></div>
 
           </div>
-            <input   id="selectedfile" (change)="filechange($event,key)" type="file"  name="imgFile" accept=".jpg,.png,.jpeg,.gif,.webp">
-            <textarea  [(ngModel)]="item.text" name="" id="" cols="60" rows="6"></textarea>
-            <button (click)="deletePermission(key)">删除</button>
         </div>
       </div>
+      <div *ngIf="!imagesData.length" class="noData">暂无数据</div>
+
+    </div>
+  </div>
+
+  <div class="addBox" *ngIf="isLook == 'edit'">
+    <div><button (click)='add()'>新增</button></div>
+    <div><button style="background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%);" (click)='keep()'>保存</button></div>
+  </div>
 </div>

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

@@ -1,76 +1,137 @@
-.box{
+.content {
   width: 100%;
   height: 100%;
-    .topadd{
+  box-sizing: border-box;
+  background: #F4F5F9;
+  padding: 0.009766rem;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  .center { 
+    flex: 1; 
+    overflow: hidden;
+    .fatherDiv {
       width: 100%; 
-        margin: 0.488281rem 0.097656rem;
+      height: 100%; 
+      overflow-x: hidden; 
+      overflow-y: auto;
+      box-sizing: border-box;
+      padding: 0.097656rem;
+    }
+  }
+  .addBox {
+    height: 0.390625rem;
+    >div {
+      display: inline-block;
+      line-height: 0.390625rem;
+      width: 50%;
+    }
     button {
-            background-color: #008CBA; /* Green */
+      width: 60%;
+      height: 0.351563rem;
+      line-height: 0.351563rem;
+      color: #fff;
+      background: #4582FC;
+      border-radius: 0.292969rem;
+      outline: none;
       border: none;
-            border-radius: 8px;
+      display: block;
-            color: white;
+      margin: 0 auto;
-            padding: 0.097656rem 0.488281rem;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 0.146484rem;
-            margin-left: 0.488281rem;
-            cursor: pointer;
     }
   }
-    .center{
+}
+
+.noData {
   width: 100%;
-        height: 100%;
+  text-align: center;
+  font-size: 0.15625rem;
+  margin-top: 0.292969rem;
+}
+//问题div
+.matterDiv {
+  width: 100%;
+  height: 1.757813rem;
+  box-sizing: border-box;
+  padding: 0.048828rem;
+  margin-top: 0.097656rem;
+  background-color: #fff;
+  border-radius: 0.195313rem;
   display: flex;
-        flex-direction:column;
+  .leftDiv {
-        overflow: auto;
+    width: 0.683594rem;
-        span{
+    text-align: center;
-            font-size: 0.146484rem;
+    height: 100%;
-            margin-left: 0.488281rem;
+    margin-right: 0.048828rem;
-            position: relative;
+    >div {
-            top: 0.488281rem;
+      font-size: 0.15625rem;
     }
-        textarea{
+    button {
-            position: relative;
+      height: 0.214844rem;
-            left: 15%;
+      background-color:#fff;
-            bottom: 0.976563rem;
+      border-radius: 0.097656rem;
+      border: 0.009766rem solid red;
+      color: red;
+      font-size: 0.136719rem;
     }
-        .one{
-            width: 100%;
-            height: 140px;
-            input{
-                z-index: 999;
-                width: 1.953125rem;
-                height: 0.976563rem;
-                position: relative;
-                left: 0.976563rem;
-                bottom: 180px;
-                opacity: 0;
-                margin-top: 0.048828rem;
-                cursor: pointer;
   }
-            img{
+  .rightDiv {
-                position: relative;
+    flex: 1;
-                margin-left: 20px;
+    overflow: hidden;
-                
   }
 }
-        button{
+
+textarea {
+  vertical-align: middle;
+  border-radius: 0.097656rem;
+  background-color: #F4F5F9;
+  box-sizing: border-box;
+  padding: 0.048828rem;
+  width: 100%;
+  height: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+}
+.imagesBox::-webkit-scrollbar {display:none}
+.imagesBox {
+  overflow-x: auto;
+  overflow-y: hidden;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0.048828rem;
+  .everyImg {
+    width: 0.976563rem;
+    min-width: 0.976563rem;
+    max-width: 0.976563rem;
+    max-height: 0.878906rem;
+    height: 100%;
+    border: 0.009766rem dashed #c5c7cc;
+    margin-right: 0.097656rem;
+    //上传CAD弹窗 inputfile
+    .a-upload {
+      width: 100%;
+      height: 100%;
       position: relative;
-            bottom: 150px;
+      cursor: pointer;
-            left: 15%;
+      color: #888;
-            background-color: #FFFFFF; /* Green */
-            border: 1px solid #000000;
-            border-radius: 8px;
-            color: #000000;
-            padding: 0.097656rem 0.488281rem;
       text-align: center;
-            text-decoration: none;
+      font-size: 0.683594rem;
+      overflow: hidden;
       display: inline-block;
-            font-size: 0.146484rem;
+    }
-            margin-left: 0.488281rem;
+    .a-upload  input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      right: 0;
+      top: 0;
+      opacity: 0;
       cursor: pointer;
     }
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
-
 }

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

@@ -1,16 +1,7 @@
-/*
- * @Descripttion: 
- * @version: 
- * @Author: sueRimn
- * @Date: 2020-11-06 14:39:10
- * @LastEditors: sueRimn
- * @LastEditTime: 2020-11-07 19:41:29
- */
 import { Component, OnInit } from '@angular/core';
 import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http';
 import { MatSnackBar ,MatSnackBarConfig} from '@angular/material/snack-bar';
-import { FileUploader, FileItem } from 'ng2-file-upload'
+import Viewer from 'viewerjs';
-import Swiper from 'swiper';
 
 @Component({
   selector: 'app-find-problem',
@@ -20,135 +11,93 @@ import Swiper from 'swiper';
 export class FindProblemComponent implements OnInit {
 
   constructor(public snackBar: MatSnackBar,private http: HttpClient) { }
-  testSwiper: Swiper;
 
   ngOnInit(): void {
-    setTimeout(() => {
+    this.imagesData =  JSON.parse ( JSON.parse(JSON.stringify(localStorage.getItem('matterData'))) || '[]' )
-      this.testSwiper = new Swiper('.swiper-container', {
+    this.isLook = localStorage.getItem('pattern')
-        direction: 'horizontal',
+    window.setTimeout(()=>{
-        loop: true,
+      this.updateIMG()
-        observer:true,//修改swiper自己或子元素时，自动初始化swiper
+    },0)
-        observeParents:true,//修改swiper的父元素时，自动初始化swiper
-        //lazy: true,
-        // 如果需要前进后退按钮
-        navigation: {
-            nextEl: '.swiper-button-next',
-            prevEl: '.swiper-button-prev',
   }
-      });
 
-}, 0);
+  isLook:string//查看模式
+  imagesData = []
+  templateData = {index: 1, matter: '', imgURL:[]} //模板数据
 
-  }
+  //刷新图片 大图
-  ngAfterViewInit() { 
+  updateIMG () {
-    console.log("d")
+    this.imagesData.forEach((item,index)=>{
-    setTimeout(() => {
+      item.imgURL.forEach((element,indexs) => {
-      this.testSwiper = new Swiper('.swiper-container', {
+        new Viewer(document.getElementById(`viewerjs${index}${indexs}`),{
-        direction: 'horizontal',
+          url: 'data-original'
-        loop: true,
-        observer:true,//修改swiper自己或子元素时，自动初始化swiper
-        observeParents:true,//修改swiper的父元素时，自动初始化swiper
-        //lazy: true,
-        // 如果需要前进后退按钮
-        navigation: {
-            nextEl: '.swiper-button-next',
-            prevEl: '.swiper-button-prev',
-        }
         });
-
+      });
-}, 0);
+    })
-    
-  }
-  ceshiimg=["../../../assets/images/upload.jpg","../../../assets/images/upload2.jpg"]
-  inputShow=true//控制input显隐
-  chooseid//key值
-  textareazhi="" //备注框初始化
-  imgsrc = "../../../assets/images/upload.jpg" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
-  imgUrl = ""//返回来的图片地址后缀
-  file: any; //上传的文件
-  isspinner:boolean=false //控制进度圈的显示隐藏
-  //问题对象
-  knowRoute=[{name:`问题1`,idnum:""}]
-  num=1
-  //增加一行
-  addPermission(){
-    this.num++;
-    var nums=this.num.toString()
-    //this.knowRoute.push({name:"问题"+nums,idnum:""})
-    this.uploadSucced.push({name:"问题"+nums,src:[],text:""})
-    console.log(this.uploadSucced)
-  }
-  //删除一行
-  deletePermission(key){
-    this.uploadSucced.splice(key,1)
-    console.log(this.uploadSucced)
-  }
-  uploadSucced:any = JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"findproblem")) || [{name:"问题1",src:[],text:""}]//上传成功暂存对象
-  //保存点击事件
-  savaClick(){
-   // this.uploadSucced[this.chooseid].text=this.textareazhi
-     localStorage.setItem(sessionStorage.getItem("companyId")+"findproblem",JSON.stringify(this.uploadSucced))
-     alert("保存成功")
-     console.log(JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) )
-     //this.snackBar.open('上传成功','确定',config);
-   } 
-   //change选择文件
-  filechange(e,key) {
-    this.chooseid=key
-    this.file = e.target.files[0] || null //上传的文件
-    var reader = new FileReader();
-    reader.readAsDataURL(this.file);
-    var image:any = new Image();
-    reader.onload = function(){
-      image.src = reader.result
   }
-    setTimeout(() => {
+
-      if(image.width>=4096 || image.height>=5000 ){ 
+  //获取问题个数
-        const config = new MatSnackBarConfig();
+  matterIndex () {
-        config.verticalPosition = 'top';
+    let index
-        config.duration = 3000
+    if (this.imagesData.length) {
-        this.snackBar.open('请选择分辨率小于4096*5000的图片','确定',config);
+      index = this.imagesData[this.imagesData.length-1].index+1
+      return index
     } else {
-        if(this.file){
+      return 1
-          this.startUploading(key)
     }
   }
 
-    }, 500);
-  } 
   //上传文件
-  startUploading(key) {
+  selectFile (e,item) {
-    this.isspinner = true
+    let file = e.target.files[0] || null //获取上传的文件
-    let file = this.file || null //获取上传的文件
     let fileSize = file.size || null //上传文件的总大小
     let shardSize = 5 * 1024 * 1024 //5MB一个分片
 
     if (file && fileSize<=shardSize) { //上传文件<=5MB时
-      // this.upload()
       let formData = new FormData()
       formData.append("file",file)
       this.http.post(`/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{
-        this.isspinner = false
+        item.imgURL.push(`/api/Objects/PlanPlatform/${data.objectName}?x-oss-process=image/resize,m_fill,h_90,w_100`)
-        this.imgUrl = data.objectName
+        window.setTimeout(()=>{
-        this.imgsrc = `/api/Objects/PlanPlatform/${this.imgUrl}?x-oss-process=image/resize,m_fill,h_170,w_299`
+          this.updateIMG()
-        console.log(this.imgsrc)
+        },0)
-        console.log(this.uploadSucced)
+      })
-        this.uploadSucced[key].src.push(this.imgsrc)
+    } else {
-        //this.inputShow=false
       const config = new MatSnackBarConfig();
       config.verticalPosition = 'top';
       config.duration = 3000
-        this.snackBar.open('上传成功','确定',config);
+      this.snackBar.open('请上传小于5M图片','确定',config);
-      })
+    }
-    } else if (file && fileSize >= shardSize) { //上传文件>5MB时,分块上传
+  }
 
-      /* let data = { filename: file.name }
+  //新增
-      this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.unitinfo.id}`, {}, { params: data }).subscribe((data: any) => { //初始化分段上传
+  add () {
-        this.objectName = data.objectName
+    let data = JSON.parse(JSON.stringify( this.templateData ));
-        this.uploadId = data.uploadId
+    data.index = this.matterIndex()
-        this.subsectionUploading()
+    this.imagesData.push(data)
-      }) */
+  }
+
+  //删除
+  delete (index) {
+    let isTrue = confirm('您确定要删除吗?')
+    if (isTrue) {
+      this.imagesData.splice(index,1)
+      const config = new MatSnackBarConfig();
+      config.verticalPosition = 'top';
+      config.duration = 3000
+      this.snackBar.open('删除成功','确定',config);
+    }
   }
+
+  //保存
+  keep () {
+    let data = JSON.stringify ( JSON.parse(JSON.stringify( this.imagesData )) )
+    localStorage.setItem('matterData',data)
+    const config = new MatSnackBarConfig();
+    config.verticalPosition = 'top';
+    config.duration = 3000
+    this.snackBar.open('保存成功','确定',config);
   }
 
+
+
 }

src/app/ui/home/home.component.html

@@ -14,14 +14,14 @@
 
   <div class="center">
     <div class="centerHeader">
-      <div><input type="text" placeholder="请输入熟悉对象"></div>
+      <div><input placeholder="请输入熟悉对象"></div>
-      <div>
+      <div id="homeTimeButton">
-        <input placeholder="请选择时间" readonly [matDatepicker]="dp2" [formControl]="enddate">
+        <input [matDatepicker]="dp2" placeholder="请选择时间" [formControl]='enddate' readonly>
         <mat-datepicker-toggle matSuffix [for]="dp2"></mat-datepicker-toggle>
         <mat-datepicker #dp2></mat-datepicker>
       </div>
-      <div><button style="background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%);" (click)='query()'>查询</button></div>
+      <div><button style="background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%);" (click)='query()' class="buttons">查询</button></div>
-      <div><button style="background: #4582FC;" (click)='add()'>新增</button></div>
+      <div><button style="background: #4582FC;" (click)='add()' class="buttons">新增</button></div>
     </div>
     <div class="centerTable">
       <div class="table">

src/app/ui/home/home.component.scss

@@ -8,14 +8,15 @@
   overflow: hidden;
   header {
     width: 100%;
-    height: 0.585938rem;
+    height: 0.488281rem;
-    line-height: 0.585938rem;
+    min-height: 0.488281rem;
+    line-height: 0.488281rem;
     text-align: center;
     position: relative;
     label { font-weight: 550; font-size: 0.195313rem; }
     .floatRight {
       position: absolute;
-      top: 0.146484rem;
+      top: 0.097656rem;
       right: 0.244141rem;
       height: 0.292969rem;
       line-height: 0.292969rem;
@@ -55,11 +56,18 @@ button.mat-menu-item { text-align: center; }
 //中间内容区
 .centerHeader {
   width: 100%;
-  height: 0.488281rem;
+  padding: 0.029297rem;
+  box-sizing: border-box;
   display: flex;
-  justify-content: center;
+  flex-direction: row;
+  flex-wrap: wrap;
   align-items:center;
-  div { margin: 0 0.097656rem }
+  justify-content:center;
+  div { 
+    margin: 0 0.097656rem;
+    height: 0.390625rem;
+    line-height: 0.390625rem;
+    box-sizing: border-box;
     input {
       width: 1.757813rem;
       height: 0.292969rem;
@@ -70,7 +78,7 @@ button.mat-menu-item { text-align: center; }
       border: 0.009766rem solid #999;
       font-size: 0.136719rem;
     }
-  button {
+    .buttons {
       width: 0.78125rem;
       height: 0.341797rem;
       line-height: 0.341797rem;
@@ -80,7 +88,7 @@ button.mat-menu-item { text-align: center; }
       color: #fff;
     }
   }
-.mat-datepicker-toggle{ vertical-align: middle; margin: 0 0; padding: 0 0; }
+}
 .centerTable {
   flex: 1;
   box-sizing: border-box;

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

@@ -59,7 +59,11 @@
                         <app-key-site></app-key-site>   
                     </ng-template>    
                 </mat-tab>
-                <mat-tab label="发现问题"> <app-find-problem></app-find-problem> </mat-tab>
+                <mat-tab label="发现问题">
+                  <ng-template matTabContent>
+                    <app-find-problem></app-find-problem>  
+                  </ng-template> 
+                </mat-tab>
                 <mat-tab label="现场照片"> 
                     <ng-template matTabContent>
                         <app-photoofthescene></app-photoofthescene>