shaojiahao
/
pad-Sixfamiliar
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[修改]熟悉路线问题

master
chenjingyu 4 years ago
parent
e0057ccf64
commit
e61115dc78
5 changed files with 159 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      src/app/ui/find-problem/find-problem.component.html
  2. 21
      src/app/ui/find-problem/find-problem.component.scss
  3. 127
      src/app/ui/find-problem/find-problem.component.ts
  4. 4
      src/app/ui/know-route/know-route.component.scss
  5. 7
      src/app/ui/know-route/know-route.component.ts

29
src/app/ui/find-problem/find-problem.component.html
Unescape View File

@ -4,28 +4,33 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-11-06 14:39:10 * @Date: 2020-11-06 14:39:10
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-11-06 19:37:02 * @LastEditTime: 2020-11-07 19:32:56
--> -->
<div class="box"> <div class="box">
<div class="topadd"> <div class="topadd">
<button (click)="addPermission()">新增</button> <button (click)="addPermission()">新增</button>
<button (click)="savaClick()">保存</button>
</div> </div>
<div class="center"> <div class="center">
<div class="one" *ngFor="let item of knowRoute; let key=index"> <div class="one" *ngFor="let item of uploadSucced; let key=index">
<span>{{item.name}}</span> <span>{{item.name}}</span>
<img [src]="imgsrc" alt="" style="width: 200px; height: 100px;" > <div style="margin-left: 80px;width: 280px;" class="swiper-container">
<input id="selectedfile" type="file" name="imgFile" accept=".jpg,.png,.jpeg,.gif,.webp"> <div class="swiper-wrapper">
<!-- <div class="upload"> <div class="swiper-slide" *ngFor="let itemx of item.src; let key=index">
<div class="uploadingimg"> <img [src]="itemx" alt="" style="width: 200px; height: 100px;" >
<img [src]="imgsrc" alt="" style="width: 200px; height: 100px;" > <!-- <div class="swiper-lazy-preloader"></div> -->
</div>
</div> </div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div> </div>
<div class="image" > <input id="selectedfile" (change)="filechange($event,key)" type="file" name="imgFile" accept=".jpg,.png,.jpeg,.gif,.webp">
<input id="selectedfile" type="file" name="imgFile" accept=".jpg,.png,.jpeg,.gif,.webp"> <textarea [(ngModel)]="item.text" name="" id="" cols="60" rows="6"></textarea>
</div> --> <button (click)="deletePermission(key)">删除</button>
<textarea name="" id="" cols="60" rows="6"></textarea>
<button>删除</button>
</div> </div>
</div> </div>
</div> </div>

21
src/app/ui/find-problem/find-problem.component.scss
Unescape View File

@ -23,25 +23,28 @@
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction:column; flex-direction:column;
overflow: auto;
span{ span{
font-size: 0.146484rem; font-size: 0.146484rem;
margin-left: 0.488281rem; margin-left: 0.488281rem;
position: relative; position: relative;
top: -0.488281rem; top: 0.488281rem;
} }
textarea{ textarea{
position: relative; position: relative;
left: 3%; left: 15%;
//bottom: 20px; bottom: 0.976563rem;
} }
.one{ .one{
width: 100%; width: 100%;
height: 140px;
input{ input{
z-index: 999;
width: 1.953125rem; width: 1.953125rem;
height: 0.976563rem; height: 0.976563rem;
position: absolute; position: relative;
left: 1.171875rem; left: 0.976563rem;
//top: 1.171875rem; bottom: 180px;
opacity: 0; opacity: 0;
margin-top: 0.048828rem; margin-top: 0.048828rem;
cursor: pointer; cursor: pointer;
@ -54,8 +57,8 @@
} }
button{ button{
position: relative; position: relative;
bottom: 50px; bottom: 150px;
left: 3%; left: 15%;
background-color: #FFFFFF; /* Green */ background-color: #FFFFFF; /* Green */
border: 1px solid #000000; border: 1px solid #000000;
border-radius: 8px; border-radius: 8px;
@ -107,4 +110,4 @@
// opacity:0; // opacity:0;
} }
} }

127
src/app/ui/find-problem/find-problem.component.ts
Unescape View File

@ -4,9 +4,13 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-11-06 14:39:10 * @Date: 2020-11-06 14:39:10
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-11-06 19:09:32 * @LastEditTime: 2020-11-07 19:41:29
*/ */
import { Component, OnInit } from '@angular/core'; 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';
@Component({ @Component({
selector: 'app-find-problem', selector: 'app-find-problem',
@ -15,11 +19,54 @@ import { Component, OnInit } from '@angular/core';
}) })
export class FindProblemComponent implements OnInit { export class FindProblemComponent implements OnInit {
constructor() { } constructor(public snackBar: MatSnackBar,private http: HttpClient) { }
testSwiper: Swiper;
ngOnInit(): void { 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);
}
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" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数 imgsrc = "../../../assets/images/upload.jpg" //没有上传图片时显示的图片，当上传后就会被替换，即保存时需要传的图片地址参数
imgUrl = ""//返回来的图片地址后缀
file: any; //上传的文件
isspinner:boolean=false //控制进度圈的显示隐藏
//问题对象 //问题对象
knowRoute=[{name:`问题1`,idnum:""}] knowRoute=[{name:`问题1`,idnum:""}]
num=1 num=1
@ -27,7 +74,81 @@ export class FindProblemComponent implements OnInit {
addPermission(){ addPermission(){
this.num++; this.num++;
var nums=this.num.toString() var nums=this.num.toString()
this.knowRoute.push({name:"问题"+nums,idnum:""}) //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();
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 //获取上传的文件
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
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);
})
} 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) => { //初始化分段上传
this.objectName = data.objectName
this.uploadId = data.uploadId
this.subsectionUploading()
}) */
}
}
} }

4
src/app/ui/know-route/know-route.component.scss
Unescape View File

@ -58,12 +58,12 @@
//底部div //底部div
.bottomAll{ .bottomAll{
width: 100%; width: 100%;
height: 100%; height: 30%;
//margin-top: 0.976563rem; //margin-top: 0.976563rem;
display: flex; display: flex;
.upload{ .upload{
width: 50%; width: 50%;
height: 50%; height: 100%;
.uploadingimg{ .uploadingimg{
width: 40%; width: 40%;
height: 30%; height: 30%;

7
src/app/ui/know-route/know-route.component.ts
Unescape View File

@ -4,7 +4,7 @@
* @Author: sueRimn * @Author: sueRimn
* @Date: 2020-11-05 15:27:58 * @Date: 2020-11-05 15:27:58
* @LastEditors: sueRimn * @LastEditors: sueRimn
* @LastEditTime: 2020-11-07 13:08:13 * @LastEditTime: 2020-11-07 20:00:19
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http'; import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http';
@ -87,6 +87,7 @@ export class KnowRouteComponent implements OnInit {
//localStorage.setItem(this.clickName,this.imgsrc) //localStorage.setItem(this.clickName,this.imgsrc)
//this.uploadSucced.push({name:this.clickName,src:this.imgsrc,smark}) //this.uploadSucced.push({name:this.clickName,src:this.imgsrc,smark})
this.uploadSucced[this.chooseid].src=this.imgsrc this.uploadSucced[this.chooseid].src=this.imgsrc
this.inputShow=false
//this.uploadSucced[this.chooseid].smark=this.textareazhi //this.uploadSucced[this.chooseid].smark=this.textareazhi
console.log(this.uploadSucced) console.log(this.uploadSucced)
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
@ -172,8 +173,8 @@ export class KnowRouteComponent implements OnInit {
this.uploadSucced[key].smark = this.textareazhi this.uploadSucced[key].smark = this.textareazhi
this.chooseid=key this.chooseid=key
this.clickName=item.name+key+sessionStorage.getItem("companyId") this.clickName=item.name+key+sessionStorage.getItem("companyId")
console.log(this.uploadSucced) //console.log("sss"+JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].src)
if( JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) && JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].src!=""){ if( JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx")) && JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].src!=""&&JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].src!=undefined){
this.imgsrc=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 this.textareazhi=JSON.parse(localStorage.getItem(sessionStorage.getItem("companyId")+"xxx"))[key].smark
this.inputShow=false this.inputShow=false

Write Preview
Loading…
Cancel
Save