From ce737c170d098a6218d63c24d82cec3bc8cc0415 Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Sun, 8 Nov 2020 14:44:04 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20=E9=97=AE=E9=A2=98?= =?UTF-8?q?=E5=8F=91=E7=8E=B0=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/pages/login/login.component.scss | 5 +- .../find-problem/find-problem.component.html | 66 +++--- .../find-problem/find-problem.component.scss | 203 ++++++++++++------ .../ui/find-problem/find-problem.component.ts | 195 +++++++---------- src/app/ui/home/home.component.html | 10 +- src/app/ui/home/home.component.scss | 60 +++--- .../training-recordinfo.component.html | 6 +- 7 files changed, 285 insertions(+), 260 deletions(-) diff --git a/src/app/pages/login/login.component.scss b/src/app/pages/login/login.component.scss index 9c3ceb1..0610151 100644 --- a/src/app/pages/login/login.component.scss +++ b/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 } \ No newline at end of file diff --git a/src/app/ui/find-problem/find-problem.component.html b/src/app/ui/find-problem/find-problem.component.html index df18e1d..1ff2e9e 100644 --- a/src/app/ui/find-problem/find-problem.component.html +++ b/src/app/ui/find-problem/find-problem.component.html @@ -1,36 +1,38 @@ - +
-
-
- - -
-
-
- {{item.name}} -
-
-
- - -
- -
- -
-
- +
+
+ +
+
+
问题{{item.index}}:
+
+
+
+
+ +
+
+ +
+ + + +
- - - +
+ +
+ +
+
+
暂无数据
+
-
+
+ +
+
+
+
+
\ No newline at end of file diff --git a/src/app/ui/find-problem/find-problem.component.scss b/src/app/ui/find-problem/find-problem.component.scss index 6ea90b1..4f46887 100644 --- a/src/app/ui/find-problem/find-problem.component.scss +++ b/src/app/ui/find-problem/find-problem.component.scss @@ -1,76 +1,137 @@ -.box{ - width: 100%; +.content { + width: 100%; + height: 100%; + box-sizing: border-box; + background: #F4F5F9; + padding: 0.009766rem; + overflow: hidden; + display: flex; + flex-direction: column; + .center { + flex: 1; + overflow: hidden; + .fatherDiv { + width: 100%; + 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 { + width: 60%; + height: 0.351563rem; + line-height: 0.351563rem; + color: #fff; + background: #4582FC; + border-radius: 0.292969rem; + outline: none; + border: none; + display: block; + margin: 0 auto; + } + } +} + +.noData { + width: 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; + .leftDiv { + width: 0.683594rem; + text-align: center; height: 100%; - .topadd{ - width: 100%; - margin: 0.488281rem 0.097656rem; - button{ - background-color: #008CBA; /* Green */ - border: none; - border-radius: 8px; - color: white; - padding: 0.097656rem 0.488281rem; - text-align: center; - text-decoration: none; - display: inline-block; - font-size: 0.146484rem; - margin-left: 0.488281rem; - cursor: pointer; - } + margin-right: 0.048828rem; + >div { + font-size: 0.15625rem; } - .center{ - width: 100%; - height: 100%; - display: flex; - flex-direction:column; - overflow: auto; - span{ - font-size: 0.146484rem; - margin-left: 0.488281rem; - position: relative; - top: 0.488281rem; - } - textarea{ - position: relative; - left: 15%; - bottom: 0.976563rem; - } - .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{ - position: relative; - margin-left: 20px; - - } - } - button{ - position: relative; - bottom: 150px; - left: 15%; - 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; - } + button { + height: 0.214844rem; + background-color:#fff; + border-radius: 0.097656rem; + border: 0.009766rem solid red; + color: red; + font-size: 0.136719rem; } + } + .rightDiv { + flex: 1; + overflow: hidden; + } +} +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; + cursor: pointer; + color: #888; + text-align: center; + font-size: 0.683594rem; + overflow: hidden; + display: inline-block; + } + .a-upload input { + position: absolute; + width: 100%; + height: 100%; + right: 0; + top: 0; + opacity: 0; + cursor: pointer; + } + img { + width: 100%; + height: 100%; + } + } +} \ No newline at end of file diff --git a/src/app/ui/find-problem/find-problem.component.ts b/src/app/ui/find-problem/find-problem.component.ts index 4a38309..ddf4613 100644 --- a/src/app/ui/find-problem/find-problem.component.ts +++ b/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 Swiper from 'swiper'; +import Viewer from 'viewerjs'; @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.testSwiper = new Swiper('.swiper-container', { - direction: 'horizontal', - loop: true, - observer:true,//修改swiper自己或子元素时，自动初始化swiper - observeParents:true,//修改swiper的父元素时，自动初始化swiper - //lazy: true, - // 如果需要前进后退按钮 - navigation: { - nextEl: '.swiper-button-next', - prevEl: '.swiper-button-prev', - } - }); - -}, 0); - + this.imagesData = JSON.parse ( JSON.parse(JSON.stringify(localStorage.getItem('matterData'))) || '[]' ) + this.isLook = localStorage.getItem('pattern') + window.setTimeout(()=>{ + this.updateIMG() + },0) } - ngAfterViewInit() { - console.log("d") - setTimeout(() => { - this.testSwiper = new Swiper('.swiper-container', { - direction: 'horizontal', - 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) + isLook:string//查看模式 + imagesData = [] + templateData = {index: 1, matter: '', imgURL:[]} //模板数据 + + //刷新图片 大图 + updateIMG () { + this.imagesData.forEach((item,index)=>{ + item.imgURL.forEach((element,indexs) => { + new Viewer(document.getElementById(`viewerjs${index}${indexs}`),{ + url: 'data-original' + }); + }); + }) } - 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 + + //获取问题个数 + matterIndex () { + let index + if (this.imagesData.length) { + index = this.imagesData[this.imagesData.length-1].index+1 + return index + } else { + return 1 } - setTimeout(() => { - if(image.width>=4096 || image.height>=5000 ){ - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请选择分辨率小于4096*5000的图片','确定',config); - }else{ - if(this.file){ - this.startUploading(key) - } - } - - }, 500); - } + } + //上传文件 - startUploading(key) { - this.isspinner = true - let file = this.file || null //获取上传的文件 + selectFile (e,item) { + let file = e.target.files[0] || null //获取上传的文件 let fileSize = file.size || null //上传文件的总大小 let shardSize = 5 * 1024 * 1024 //5MB一个分片 - if (file && fileSize <= shardSize) { //上传文件<=5MB时 - // this.upload() + if (file && fileSize<=shardSize) { //上传文件<=5MB时 let formData = new FormData() formData.append("file",file) this.http.post(`/api/Objects/PlanPlatform/${sessionStorage.getItem('companyId')}`,formData).subscribe((data:any)=>{ - 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) - console.log(this.uploadSucced) - this.uploadSucced[key].src.push(this.imgsrc) - //this.inputShow=false - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('上传成功','确定',config); + item.imgURL.push(`/api/Objects/PlanPlatform/${data.objectName}?x-oss-process=image/resize,m_fill,h_90,w_100`) + window.setTimeout(()=>{ + this.updateIMG() + },0) }) - } else if (file && fileSize >= shardSize) { //上传文件>5MB时,分块上传 + } else { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请上传小于5M图片','确定',config); + } + } + + //新增 + add () { + let data = JSON.parse(JSON.stringify( this.templateData )); + data.index = this.matterIndex() + this.imagesData.push(data) + } - /* let data = { filename: file.name } - this.http.post(`/api/NewMultipartUpload/PlanPlatform/${this.unitinfo.id}`, {}, { params: data }).subscribe((data: any) => { //初始化分段上传 - this.objectName = data.objectName - this.uploadId = data.uploadId - this.subsectionUploading() - }) */ + //删除 + 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); + } + + + } diff --git a/src/app/ui/home/home.component.html b/src/app/ui/home/home.component.html index 46e1642..c4a9db8 100644 --- a/src/app/ui/home/home.component.html +++ b/src/app/ui/home/home.component.html @@ -14,14 +14,14 @@
-
-
- +
+
+
-
-
+
+
diff --git a/src/app/ui/home/home.component.scss b/src/app/ui/home/home.component.scss index f5a0c67..b90fc64 100644 --- a/src/app/ui/home/home.component.scss +++ b/src/app/ui/home/home.component.scss @@ -8,14 +8,15 @@ overflow: hidden; header { width: 100%; - height: 0.585938rem; - line-height: 0.585938rem; + height: 0.488281rem; + 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,32 +56,39 @@ 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; - align-items: center; - div { margin: 0 0.097656rem } - input { - width: 1.757813rem; - height: 0.292969rem; - line-height: 0.292969rem; - padding-left: 0.048828rem; - border-radius: 0.195313rem; - outline: none; - border: 0.009766rem solid #999; - font-size: 0.136719rem; - } - button { - width: 0.78125rem; - height: 0.341797rem; - line-height: 0.341797rem; - border-radius: 0.195313rem; - outline: none; - border: none; - color: #fff; + flex-direction: row; + flex-wrap: wrap; + align-items:center; + 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; + line-height: 0.292969rem; + padding-left: 0.048828rem; + border-radius: 0.195313rem; + outline: none; + border: 0.009766rem solid #999; + font-size: 0.136719rem; + } + .buttons { + width: 0.78125rem; + height: 0.341797rem; + line-height: 0.341797rem; + border-radius: 0.195313rem; + outline: none; + border: none; + color: #fff; + } } } -.mat-datepicker-toggle{ vertical-align: middle; margin: 0 0; padding: 0 0; } .centerTable { flex: 1; box-sizing: border-box; diff --git a/src/app/ui/training-recordinfo/training-recordinfo.component.html b/src/app/ui/training-recordinfo/training-recordinfo.component.html index 2260876..f032abf 100644 --- a/src/app/ui/training-recordinfo/training-recordinfo.component.html +++ b/src/app/ui/training-recordinfo/training-recordinfo.component.html @@ -59,7 +59,11 @@ - + + + + +