shaojiahao
/
ShangHaiAcquisitionPlatform
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[完善]素材图片增加分块上传

master
邵佳豪 2 years ago
parent
9eda3dfed3
commit
2d461663c9
3 changed files with 1795 additions and 1626 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. 200
      src/app/ui/collection-tools-building/collection-tools.component.html
  2. 104
      src/app/ui/collection-tools-building/collection-tools.component.ts
  3. 101
      src/app/ui/collection-tools/collection-tools.component.ts

200
src/app/ui/collection-tools-building/collection-tools.component.html
Unescape View File

@ -17,10 +17,12 @@
<mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选 <mat-checkbox color="primary" [(ngModel)]="isMultiSelect" (change)='changeMultiSelect($event)'></mat-checkbox> 多选
</span> </span>
<span class="marginLeftRight"> <span class="marginLeftRight">
<mat-checkbox color="primary" [(ngModel)]="isShowLegend" (change)='changeLegend($event)' [disabled]='this.canvasData.selectPanelPoint.BackgroundImageUrl'></mat-checkbox> 显示图例 <mat-checkbox color="primary" [(ngModel)]="isShowLegend" (change)='changeLegend($event)'
[disabled]='this.canvasData.selectPanelPoint.BackgroundImageUrl'></mat-checkbox> 显示图例
</span> </span>
<button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" style="margin:0 5px;" *ngIf="isEditPattern"> <button (click)="copyAsset()" class="copytobutn marginLeftRight" mat-button title="复制" style="margin:0 5px;"
*ngIf="isEditPattern">
复制<mat-icon>library_books</mat-icon> 复制<mat-icon>library_books</mat-icon>
</button> </button>
<button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern"> <button (click)="pasteAsset()" class="copytobutn marginLeftRight" mat-button title="粘贴" *ngIf="isEditPattern">
@ -44,8 +46,8 @@
<!-- 头部操作栏 --> <!-- 头部操作栏 -->
<div class="headerOperate"> <div class="headerOperate">
<button mat-button *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" class="bigeditdeletebtn" <button mat-button *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)"
[ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}"> class="bigeditdeletebtn" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
<span class="name" [title]="item.name">{{item.name}}</span> <span class="name" [title]="item.name">{{item.name}}</span>
<span class="editdeletebtn" *ngIf="isEditPattern"> <span class="editdeletebtn" *ngIf="isEditPattern">
<mat-icon (click)="editBuilding($event,item)" <mat-icon (click)="editBuilding($event,item)"
@ -66,7 +68,9 @@
<!-- H5Canvas --> <!-- H5Canvas -->
<app-working-area #canvas></app-working-area> <app-working-area #canvas></app-working-area>
<!-- H5Canvas --> <!-- H5Canvas -->
<div id="leftDiv" (mousewheel)="$event.stopPropagation()" class='functionalDomainLeft publicCss' [ngClass]="{'togglePanel': toggleExpandPanel==true}" style="user-select: none">
<div id="leftDiv" (mousewheel)="$event.stopPropagation()" class='functionalDomainLeft publicCss'
[ngClass]="{'togglePanel': toggleExpandPanel==true}" style="user-select: none">
<div class="leftDragDiv" (mousedown)="leftDivMouseDown($event)"></div> <div class="leftDragDiv" (mousedown)="leftDivMouseDown($event)"></div>
<!-- 平面图 --> <!-- 平面图 -->
<div class="planarGraph"> <div class="planarGraph">
@ -78,22 +82,29 @@
<mat-icon (click)='foundPanel($event)'>add</mat-icon> <mat-icon (click)='foundPanel($event)'>add</mat-icon>
</label> </label>
</div> </div>
<div [hidden]="!togglePlane" style="flex: 1;max-height: 700px;overflow-y: auto;overflow-x: hidden;" class="sitePlanContentBox"> <div [hidden]="!togglePlane" style="flex: 1;max-height: 700px;overflow-y: auto;overflow-x: hidden;"
class="sitePlanContentBox">
<div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index" <div class="sitePlanContent" *ngFor="let item of sitePlanData;let key = index"
[ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}" (click)='selectSitePlan(item,key)' (mouseenter)="hoverSitePlan(item,key)"> [ngClass]="{'isRefugeStorey':item.isRefugeStorey==true,'selectSitePlan': selectSitePlanIndex==key}"
<label class="overflowText planEveryRow"><mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}</label> (click)='selectSitePlan(item,key)' (mouseenter)="hoverSitePlan(item,key)">
<label class="overflowText planEveryRow">
<mat-icon *ngIf="!item.imageUrl" class="matIcons">broken_image</mat-icon>{{item.name}}
</label>
<a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern" title="替换底图"> <a href="javascript:;" class="a-upload" *ngIf="selectSitePlanIndex==key && isEditPattern" title="替换底图">
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*"> <input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
<mat-icon class="matIcons">photo_size_select_actual</mat-icon> <mat-icon class="matIcons">photo_size_select_actual</mat-icon>
</a> </a>
<a href="javascript:;" id="a-uploadImg" *ngIf="selectSitePlanIndex==key && !item.imageUrl && isEditPattern" title="上传底图" > <a href="javascript:;" id="a-uploadImg"
*ngIf="selectSitePlanIndex==key && !item.imageUrl && isEditPattern" title="上传底图">
<input type="file" (change)='replaceBaseMap($event,item)' accept="image/*"> <input type="file" (change)='replaceBaseMap($event,item)' accept="image/*">
<img src="../../../assets/images/upload.jpg"> <img src="../../../assets/images/upload.jpg">
</a> </a>
<!-- 右边定位操作栏 --> <!-- 右边定位操作栏 -->
<div id="rightOperate" class="rightOperate" *ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern" (click)="$event.stopPropagation();"> <div id="rightOperate" class="rightOperate"
*ngIf="selectSitePlanIndex==key && item.imageUrl && isEditPattern" (click)="$event.stopPropagation();">
<p class="functionButton"> <p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up</mat-icon> <mat-icon class="functionIcon bigFunctionIcon" title="上移" (click)='moveUp(item,key)'>keyboard_arrow_up
</mat-icon>
</p> </p>
<p class="functionButton"> <p class="functionButton">
<mat-icon class="functionIcon" title="编辑属性" (click)='editPlaneData(item)'>edit</mat-icon> <mat-icon class="functionIcon" title="编辑属性" (click)='editPlaneData(item)'>edit</mat-icon>
@ -104,7 +115,8 @@
<mat-icon class="functionIcon" title="复制" (click)="duplicateLayer(item)">library_books</mat-icon> <mat-icon class="functionIcon" title="复制" (click)="duplicateLayer(item)">library_books</mat-icon>
</p> </p>
<p class="functionButton"> <p class="functionButton">
<mat-icon class="functionIcon bigFunctionIcon" title="下移" (click)='moveDown(item,key)'>keyboard_arrow_down</mat-icon> <mat-icon class="functionIcon bigFunctionIcon" title="下移" (click)='moveDown(item,key)'>
keyboard_arrow_down</mat-icon>
</p> </p>
</div> </div>
<!-- 右边定位操作栏 --> <!-- 右边定位操作栏 -->
@ -124,7 +136,8 @@
<input type="text" class="searchLibrary" [(ngModel)]="searchInput" (ngModelChange)="libraryChange()"> <input type="text" class="searchLibrary" [(ngModel)]="searchInput" (ngModelChange)="libraryChange()">
<div class="panelLibraryFlex" *ngIf="searchLibrary.length"> <div class="panelLibraryFlex" *ngIf="searchLibrary.length">
<div class="imgBox" *ngFor="let items of searchLibrary;let key = index" [title]="items.name" <div class="imgBox" *ngFor="let items of searchLibrary;let key = index" [title]="items.name"
[ngClass]="{'selectImg': selectLibrary=='搜索' && selectImageIndex==key}" (click)='selectImg({name:"搜索"},items,key)'> [ngClass]="{'selectImg': selectLibrary=='搜索' && selectImageIndex==key}"
(click)='selectImg({name:"搜索"},items,key)'>
<img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'"> <img [src]="items.imageUrl" onerror="javascript:this.src='../../../assets/images/noImg.png'">
<p class="overflowText">{{items.name}}</p> <p class="overflowText">{{items.name}}</p>
</div> </div>
@ -154,9 +167,11 @@
</div> </div>
<div id="rightDiv" (mousewheel)="$event.stopPropagation()" class="functionalDomainRight publicCss " [ngClass]="{'togglePanel2': toggleExpandPanelRight==true}" style="user-select: none"> <div id="rightDiv" (mousewheel)="$event.stopPropagation()" class="functionalDomainRight publicCss "
[ngClass]="{'togglePanel2': toggleExpandPanelRight==true}" style="user-select: none">
<!-- 右侧div鼠标拖动div --> <!-- 右侧div鼠标拖动div -->
<div style="width: 3px;height: 100%;position: absolute;left: 0;cursor: e-resize;z-index: 1000;" (mousedown)="rightDivMouseDown($event)"></div> <div style="width: 3px;height: 100%;position: absolute;left: 0;cursor: e-resize;z-index: 1000;"
(mousedown)="rightDivMouseDown($event)"></div>
<!-- 属性 --> <!-- 属性 -->
<div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" style="height: 50%;"> <div [ngClass]="{'forbidden': !isEditPattern}" id="property" class="property" style="height: 50%;">
<div class="title"> <div class="title">
@ -165,7 +180,8 @@
</div> </div>
</div> </div>
<!-- 平面图属性 --> <!-- 平面图属性 -->
<div class="siteproperty" style="user-select: none" *ngIf="isShowProperty && isShowAttribute && !isMultipleAsset"> <div class="siteproperty" style="user-select: none"
*ngIf="isShowProperty && isShowAttribute && !isMultipleAsset">
<p>面积(平方米)</p> <p>面积(平方米)</p>
<div class="siteproperty_size">{{canvasData.selectStorey.area}}</div> <div class="siteproperty_size">{{canvasData.selectStorey.area}}</div>
<p>详情</p> <p>详情</p>
@ -174,18 +190,22 @@
</div> </div>
</div> </div>
<!-- 素材属性 --> <!-- 素材属性 -->
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && !isShowAttribute && !isMultipleAsset"> <div class="assetsproperty" style="user-select: none"
*ngIf="isShowProperty && !isShowAttribute && !isMultipleAsset">
<h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3> <h3 style="text-align: center;font-weight: 900;">{{assetName}}</h3>
<div *ngIf="canvasAssetObj.InteractiveMode == 0"> <div *ngIf="canvasAssetObj.InteractiveMode == 0">
<p>宽度(像素)</p> <p>宽度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()" [disabled]="!isEditPattern"> <input type="text" class="biginput" [(ngModel)]="assetWidth" (input)="assetWidthIunput()"
[disabled]="!isEditPattern">
<p>高度(像素)</p> <p>高度(像素)</p>
<input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()" [disabled]="!isEditPattern"> <input type="text" class="biginput" [(ngModel)]="assetHeight" (input)="assetHeightIunput()"
[disabled]="!isEditPattern">
<p>角度</p> <p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;"> <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="sliderValue" <input type="number" class="smallinput" [(ngModel)]="sliderValue"
oninput="if(value>360)value=360;if(value<0)value=0;" (input)="assetAngleIunput()" [disabled]="!isEditPattern"> oninput="if(value>360)value=360;if(value<0)value=0;" (input)="assetAngleIunput()"
[disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;" <mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="sliderValue" (change)="assetAngleIunput()" [disabled]="!isEditPattern"></mat-slider> [(ngModel)]="sliderValue" (change)="assetAngleIunput()" [disabled]="!isEditPattern"></mat-slider>
</div> </div>
@ -195,9 +215,11 @@
<p>厚度</p> <p>厚度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;"> <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="sliderValueThickness" <input type="number" class="smallinput" [(ngModel)]="sliderValueThickness"
oninput="if(value>999)value=999;if(value<0)value=0;" (input)="assetThicknessIunput()" [disabled]="!isEditPattern"> oninput="if(value>999)value=999;if(value<0)value=0;" (input)="assetThicknessIunput()"
[disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;" <mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="sliderValueThickness" (change)="assetThicknessIunput()" [disabled]="!isEditPattern"></mat-slider> [(ngModel)]="sliderValueThickness" (change)="assetThicknessIunput()" [disabled]="!isEditPattern">
</mat-slider>
</div> </div>
</div> </div>
@ -215,47 +237,65 @@
</div> </div>
<div class="colorDiv" *ngIf="isEditPattern"> <div class="colorDiv" *ngIf="isEditPattern">
<ul> <ul>
<li (click)="selectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li> <li (click)="selectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index"
[style]="{'background-color':item}"></li>
</ul> </ul>
</div> </div>
<span style="color: #9c9fa5;font-size: 14px;">透明度</span> <span style="color: #9c9fa5;font-size: 14px;">透明度</span>
<mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;" <mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
[(ngModel)]="colorDivSliderValue" (change)="colorDivSliderChange()" [disabled]="!isEditPattern"></mat-slider> [(ngModel)]="colorDivSliderValue" (change)="colorDivSliderChange()" [disabled]="!isEditPattern">
</mat-slider>
<span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span> <span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
</div> </div>
<div *ngFor="let item of PropertyInfos;index as key "> <div *ngFor="let item of PropertyInfos;index as key ">
<!-- 单行文本 --> <!-- 单行文本 -->
<div *ngIf="item.PropertyType == 0"> <div *ngIf="item.PropertyType == 0">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p> <p>{{item.PropertyName}}<span style="font-size: 14px;"
<input type="text" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern"> *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="text" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)"
[disabled]="!isEditPattern">
</div> </div>
<!-- 多行文本 --> <!-- 多行文本 -->
<div *ngIf="item.PropertyType == 1"> <div *ngIf="item.PropertyType == 1">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p> <p>{{item.PropertyName}}<span style="font-size: 14px;"
<textarea class="textarea" name="" id="" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern"></textarea> *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<textarea class="textarea" name="" id="" [value]="item.PropertyValue"
(input)="assetInputChange(item,$event)" [disabled]="!isEditPattern"></textarea>
</div> </div>
<!-- 数值 --> <!-- 数值 -->
<div *ngIf="item.PropertyType == 2"> <div *ngIf="item.PropertyType == 2">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p> <p>{{item.PropertyName}}<span style="font-size: 14px;"
<input type="number" class="biginput" [value]="item.PropertyValue" (input)="assetInputChange(item,$event)" [disabled]="!isEditPattern"> *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="number" class="biginput" [value]="item.PropertyValue"
(input)="assetInputChange(item,$event)" [disabled]="!isEditPattern">
</div> </div>
<!-- 图片数量 --> <!-- 图片数量 -->
<div *ngIf="item.PropertyType == 4" style="height: 140px;"> <div *ngIf="item.PropertyType == 4" style="height: 140px;">
<div style="position: relative;width: 100%;height: 21px;margin: 1px 0;"> <div style="position: relative;width: 100%;height: 21px;margin: 1px 0;">
<p style="width: 40%;display: inline-block;">{{item.PropertyName}}</p> <p style="width: 40%;display: inline-block;">{{item.PropertyName}}</p>
<span style="width: 26%;text-align:right;font-size: 13px;">{{imagesArr.length ? imagesArr.length : 0}} / {{item.PropertyValue}}</span> <span style="width: 26%;text-align:right;font-size: 13px;">{{imagesArr.length ? imagesArr.length : 0}}
<input id="inputimg" [disabled]="!isEditPattern" *ngIf="isImgNumCss" accept="image/*" (change)="selectFile($event)" type="file" style="width: 33%;position: absolute;right: 10px;top: 1px;opacity: 0;z-index: 100;cursor: pointer;height: 21px;"> / {{item.PropertyValue}}</span>
<div style="width: 33%;height: 21px;line-height: 21px;text-align: center;position: absolute;right: 10px;top: 1px;z-index: 99;border: 1px solid rgb(208, 211, 214);border-radius: 2px;font-size: 13px;cursor: pointer;" (click)="imgNumBeyond()">添加</div> <input id="inputimg" [disabled]="!isEditPattern" *ngIf="isImgNumCss" accept="image/*"
(change)="selectFile($event)" type="file"
style="width: 33%;position: absolute;right: 10px;top: 1px;opacity: 0;z-index: 100;cursor: pointer;height: 21px;">
<div
style="width: 33%;height: 21px;line-height: 21px;text-align: center;position: absolute;right: 10px;top: 1px;z-index: 99;border: 1px solid rgb(208, 211, 214);border-radius: 2px;font-size: 13px;cursor: pointer;"
(click)="imgNumBeyond()">添加</div>
<div style="position: relative;;width: 89%;border:1px solid rgb(208, 211, 214);height: 100px;margin: 6px auto;" class="swiper-container"> <div
style="position: relative;;width: 89%;border:1px solid rgb(208, 211, 214);height: 100px;margin: 6px auto;"
class="swiper-container">
<div id="viewerjs" class="swiper-wrapper" [ngClass]="{'noImgCss': imagesArr.length == 0}"> <div id="viewerjs" class="swiper-wrapper" [ngClass]="{'noImgCss': imagesArr.length == 0}">
<div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"><img [src]="img.PropertyValue + '?x-oss-process=image/resize,m_fixed,h_100,w_100'" alt="" [attr.data-original]="img.PropertyValue"></div> <div class="swiper-slide" style="text-align: center;" *ngFor="let img of imagesArr"><img
[src]="img.PropertyValue + '?x-oss-process=image/resize,m_fixed,h_100,w_100'" alt=""
[attr.data-original]="img.PropertyValue"></div>
</div> </div>
<!-- 如果需要导航按钮 --> <!-- 如果需要导航按钮 -->
<div class="swiper-button-next"></div> <div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div> <div class="swiper-button-prev"></div>
<span style="position: absolute;right: 2px;top: 2px;cursor: pointer;z-index: 200;" *ngIf="isEditPattern"> <span style="position: absolute;right: 2px;top: 2px;cursor: pointer;z-index: 200;"
*ngIf="isEditPattern">
<mat-icon class="hoverred" (click)="deleteImg()">delete</mat-icon> <mat-icon class="hoverred" (click)="deleteImg()">delete</mat-icon>
</span> </span>
</div> </div>
@ -278,8 +318,10 @@
<!-- 布尔值 是1或否0 --> <!-- 布尔值 是1或否0 -->
<div *ngIf="item.PropertyType == 6"> <div *ngIf="item.PropertyType == 6">
<p>{{item.PropertyName}}</p> <p>{{item.PropertyName}}</p>
<input [disabled]="!isEditPattern" [checked]="item.PropertyValue == '1'" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'1')"><span>是</span> <input [disabled]="!isEditPattern" [checked]="item.PropertyValue == '1'" class="input" type="radio"
<input [disabled]="!isEditPattern" [checked]="item.PropertyValue == '0'" class="input" type="radio" name="radio" (click)="assetRadioChange(item,'0')"><span>否</span> name="radio" (click)="assetRadioChange(item,'1')"><span>是</span>
<input [disabled]="!isEditPattern" [checked]="item.PropertyValue == '0'" class="input" type="radio"
name="radio" (click)="assetRadioChange(item,'0')"><span>否</span>
</div> </div>
<!-- 供给区域 --> <!-- 供给区域 -->
<div *ngIf="item.PropertyType == 7" class="selectDiv"> <div *ngIf="item.PropertyType == 7" class="selectDiv">
@ -312,15 +354,19 @@
<div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && isMultipleAsset"> <div class="assetsproperty" style="user-select: none" *ngIf="isShowProperty && isMultipleAsset">
<div *ngIf="multipleAsset.InteractiveMode == 0"> <div *ngIf="multipleAsset.InteractiveMode == 0">
<p>宽度(像素)</p> <p>宽度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Width" (input)="multipleAssetWidthInput()" [disabled]="!isEditPattern"> <input type="number" class="biginput" [(ngModel)]="multipleAsset.Width"
(input)="multipleAssetWidthInput()" [disabled]="!isEditPattern">
<p>高度(像素)</p> <p>高度(像素)</p>
<input type="number" class="biginput" [(ngModel)]="multipleAsset.Height" (input)="multipleAssetHeightInput()" [disabled]="!isEditPattern"> <input type="number" class="biginput" [(ngModel)]="multipleAsset.Height"
(input)="multipleAssetHeightInput()" [disabled]="!isEditPattern">
<p>角度</p> <p>角度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;"> <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Angle" <input type="number" class="smallinput" [(ngModel)]="multipleAsset.Angle"
oninput="if(value>360)value=360;if(value<0)value=0;" (input)="multipleAssetAngleInput()" [disabled]="!isEditPattern"> oninput="if(value>360)value=360;if(value<0)value=0;" (input)="multipleAssetAngleInput()"
[disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;" <mat-slider color="primary" min="0" max="360" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Angle" (change)="multipleAssetAngleInput()" [disabled]="!isEditPattern"></mat-slider> [(ngModel)]="multipleAsset.Angle" (change)="multipleAssetAngleInput()" [disabled]="!isEditPattern">
</mat-slider>
</div> </div>
</div> </div>
<!-- 如果是多点连线 --> <!-- 如果是多点连线 -->
@ -328,9 +374,11 @@
<p>厚度</p> <p>厚度</p>
<div style="width: 100%;display: flex;vertical-align: top;height: 22px;"> <div style="width: 100%;display: flex;vertical-align: top;height: 22px;">
<input type="number" class="smallinput" [(ngModel)]="multipleAsset.Thickness" <input type="number" class="smallinput" [(ngModel)]="multipleAsset.Thickness"
oninput="if(value>999)value=999;if(value<0)value=0;" (input)="multipleAssetThicknessInput()" [disabled]="!isEditPattern"> oninput="if(value>999)value=999;if(value<0)value=0;" (input)="multipleAssetThicknessInput()"
[disabled]="!isEditPattern">
<mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;" <mat-slider color="primary" min="0" max="999" step="1" style="bottom: 12px;left: 2px;width: 70%;"
[(ngModel)]="multipleAsset.Thickness" (change)="multipleAssetThicknessInput()" [disabled]="!isEditPattern"></mat-slider> [(ngModel)]="multipleAsset.Thickness" (change)="multipleAssetThicknessInput()"
[disabled]="!isEditPattern"></mat-slider>
</div> </div>
</div> </div>
<div class="colorBigDiv" *ngIf="multipleAsset.FillMode == 0"> <div class="colorBigDiv" *ngIf="multipleAsset.FillMode == 0">
@ -342,29 +390,37 @@
</div> </div>
<div class="colorDiv" *ngIf="isEditPattern"> <div class="colorDiv" *ngIf="isEditPattern">
<ul> <ul>
<li (click)="multipleAssetSelectcolor(item,key)" class="colorLi" *ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li> <li (click)="multipleAssetSelectcolor(item,key)" class="colorLi"
*ngFor="let item of colors,let key=index" [style]="{'background-color':item}"></li>
</ul> </ul>
</div> </div>
<span style="color: #9c9fa5;font-size: 14px;">透明度</span> <span style="color: #9c9fa5;font-size: 14px;">透明度</span>
<mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;" <mat-slider color="primary" min="0" max="100%" step="1" style="left: 1px; width: 55%;min-width: 90px;"
[(ngModel)]="colorDivSliderValue" (change)="multipleColorDivSliderChange()" [disabled]="!isEditPattern"></mat-slider> [(ngModel)]="colorDivSliderValue" (change)="multipleColorDivSliderChange()" [disabled]="!isEditPattern">
</mat-slider>
<span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span> <span style="color: #9c9fa5;font-size: 12px;">{{colorDivSliderValue}}%</span>
</div> </div>
<div *ngFor="let item of multipleAsset.PropertyInfos;index as key "> <div *ngFor="let item of multipleAsset.PropertyInfos;index as key ">
<!-- 单行文本 --> <!-- 单行文本 -->
<div *ngIf="item.PropertyType == 0"> <div *ngIf="item.PropertyType == 0">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p> <p>{{item.PropertyName}}<span style="font-size: 14px;"
<input type="text" class="biginput" [name]="item.PropertyName" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern"> *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="text" class="biginput" [name]="item.PropertyName" [(ngModel)]="item.PropertyValue"
(input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern">
</div> </div>
<!-- 多行文本 --> <!-- 多行文本 -->
<div *ngIf="item.PropertyType == 1"> <div *ngIf="item.PropertyType == 1">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p> <p>{{item.PropertyName}}<span style="font-size: 14px;"
<textarea class="textarea" name="" id="" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern"></textarea> *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<textarea class="textarea" name="" id="" [(ngModel)]="item.PropertyValue"
(input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern"></textarea>
</div> </div>
<!-- 数值 --> <!-- 数值 -->
<div *ngIf="item.PropertyType == 2"> <div *ngIf="item.PropertyType == 2">
<p>{{item.PropertyName}}<span style="font-size: 14px;" *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p> <p>{{item.PropertyName}}<span style="font-size: 14px;"
<input type="number" class="biginput" [(ngModel)]="item.PropertyValue" (input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern"> *ngIf="item.PhysicalUnit">({{item.PhysicalUnit}})</span></p>
<input type="number" class="biginput" [(ngModel)]="item.PropertyValue"
(input)="multipleAssetInputChange(item,$event)" [disabled]="!isEditPattern">
</div> </div>
<!-- 方向 --> <!-- 方向 -->
<!-- <div *ngIf="item.PropertyType == 5 " class="selectDiv"> <!-- <div *ngIf="item.PropertyType == 5 " class="selectDiv">
@ -383,13 +439,16 @@
<!-- 布尔值 是1或否0 --> <!-- 布尔值 是1或否0 -->
<div *ngIf="item.PropertyType == 6"> <div *ngIf="item.PropertyType == 6">
<p>{{item.PropertyName}}</p> <p>{{item.PropertyName}}</p>
<input value='1' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'1')"><span>是</span> <input value='1' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern" class="input" type="radio"
<input value='0' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern" class="input" type="radio" name="radio" (click)="multipleAssetRadioChange(item,'0')"><span>否</span> name="radio" (click)="multipleAssetRadioChange(item,'1')"><span>是</span>
<input value='0' [(ngModel)]="item.PropertyValue" [disabled]="!isEditPattern" class="input" type="radio"
name="radio" (click)="multipleAssetRadioChange(item,'0')"><span>否</span>
</div> </div>
<!-- 供给区域 --> <!-- 供给区域 -->
<div *ngIf="item.PropertyType == 7" class="selectDiv"> <div *ngIf="item.PropertyType == 7" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p> <p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern"> <select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)"
[disabled]="!isEditPattern">
<option value="0">全部</option> <option value="0">全部</option>
<option value="1">高区</option> <option value="1">高区</option>
<option value="2">中区</option> <option value="2">中区</option>
@ -402,7 +461,8 @@
<!-- 供给类型 --> <!-- 供给类型 -->
<div *ngIf="item.PropertyType == 8" class="selectDiv"> <div *ngIf="item.PropertyType == 8" class="selectDiv">
<p style="display: inline-block;">{{item.PropertyName}}</p> <p style="display: inline-block;">{{item.PropertyName}}</p>
<select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)" [disabled]="!isEditPattern"> <select [(ngModel)]="item.PropertyValue" (change)="multipleSupplyArea(item,$event)"
[disabled]="!isEditPattern">
<option value="0">消火栓</option> <option value="0">消火栓</option>
<option value="1">喷淋</option> <option value="1">喷淋</option>
<option value="2">水幕</option> <option value="2">水幕</option>
@ -416,7 +476,8 @@
<!-- 消防要素 --> <!-- 消防要素 -->
<div id="firecategories" class="firecategories" style="height: 50%;"> <div id="firecategories" class="firecategories" style="height: 50%;">
<!-- 素材属性div鼠标拖动div --> <!-- 素材属性div鼠标拖动div -->
<div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;" (mousedown)="firecategoriesDivMouseDown($event)"></div> <div style="height:3px;width: 100%;position: absolute;top: 0;cursor: n-resize;z-index: 1000;"
(mousedown)="firecategoriesDivMouseDown($event)"></div>
<div class="title"> <div class="title">
<div> <div>
@ -425,24 +486,30 @@
</div> </div>
<div class="firecategoriesTree"> <div class="firecategoriesTree">
<div class="hideAllTreeNode" (click)='toggoleAllTreenode()' *ngIf="allFireElements.length"><label>全部显示/隐藏</label><mat-icon [ngClass]="{'icongray': hideAllTreenode == false}">visibility</mat-icon></div> <div class="hideAllTreeNode" (click)='toggoleAllTreenode()' *ngIf="allFireElements.length">
<label>全部显示/隐藏</label>
<mat-icon [ngClass]="{'icongray': hideAllTreenode == false}">visibility</mat-icon>
</div>
<!-- 消防列表树写在这里 --> <!-- 消防列表树写在这里 -->
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' (click)="clickTreeNode(node)" > <mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}"
*matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26'
(click)="clickTreeNode(node)">
<button mat-icon-button disabled></button> <button mat-icon-button disabled></button>
<span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}"> <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
{{node.name}} {{node.name}}
</span> </span>
<span *ngIf="node.isTemplate">({{node.children.length}})</span> <span *ngIf="node.isTemplate">({{node.children.length}})</span>
<span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span> <span class="isLookCss" (click)="clickLookItem(node)">
<mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon>
</span>
</mat-tree-node> </mat-tree-node>
<mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)"> <mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern && !isEditPattern}"
<button mat-icon-button *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="clickTreeNode(node)">
matTreeNodeToggle <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror"> <mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon> </mat-icon>
@ -451,7 +518,9 @@
{{node.name}} {{node.name}}
</span> </span>
<span *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span> <span *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
<span class="isLookCss" (click)="clickLookItem(node)"><mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon></span> <span class="isLookCss" (click)="clickLookItem(node)">
<mat-icon [ngClass]="{'icongray': node.isLook == false}">visibility</mat-icon>
</span>
</mat-tree-node> </mat-tree-node>
</mat-tree> </mat-tree>
@ -463,4 +532,3 @@
</div> </div>
</div> </div>

104
src/app/ui/collection-tools-building/collection-tools.component.ts
Unescape View File

@ -11,6 +11,7 @@ import {CanvasShareDataService} from '../../canvas-share-data.service' //引入
import Viewer from 'viewerjs'; import Viewer from 'viewerjs';
import * as ObjectID from 'bson-objectid'; import * as ObjectID from 'bson-objectid';
import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem'; import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
import { async } from 'rxjs/internal/scheduler/async';
@Component({ @Component({
selector: 'app-collection-tools', selector: 'app-collection-tools',
templateUrl: './collection-tools.component.html', templateUrl: './collection-tools.component.html',
@ -303,24 +304,25 @@ export class CollectionToolsComponent2 implements OnInit {
let fileSize = file.size || null //上传文件的总大小 let fileSize = file.size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB一个分片 let shardSize = 5 * 1024 * 1024 //5MB一个分片
let companyId = sessionStorage.getItem("companyId") let companyId = sessionStorage.getItem("companyId")
if (file && fileSize <= shardSize) { //上传文件<=5MB时
let formData = new FormData()
formData.append("file",file)
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
this.http.delete(`/api/Objects/WebPlan2D/${companyId}/${file.name}?x-oss-process=image/resize,m_fixed,h_100,w_100`).subscribe(data => { this.http.delete(`/api/Objects/WebPlan2D/${companyId}/${file.name}?x-oss-process=image/resize,m_fixed,h_100,w_100`).subscribe(data => {
// console.log('删除缩略图成功')
resolve('删除缩略图成功') resolve('删除缩略图成功')
}) })
}) })
this.http.post(`api/Objects/WebPlan2D/${companyId}`,formData).subscribe((data:any)=>{
this.objectName = data.objectName //给objectName赋值
if (file && fileSize <= shardSize) { //上传文件<=5MB时
let formData = new FormData()
formData.append("file", file)
await this.directUpload(companyId, formData)
} else if (file && fileSize > shardSize) { //上传文件>10MB时,分块上传
await this.sectionUpload(companyId, file)
}
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
config.duration = 3000 config.duration = 3000
this.snackBar.open('上传成功', '确定', config) this.snackBar.open('上传成功', '确定', config)
// this.http.delete(`/api/Objects/WebPlan2D/${this.objectName}?x-oss-process=image/resize,m_fixed,h_100,w_100`).subscribe(data=>{
// console.log('删除缩略图成功')
// })
//在原始素材对象和需要循环图片的对象中分别push最新上传的图片 //在原始素材对象和需要循环图片的对象中分别push最新上传的图片
let imgObj = { let imgObj = {
"Tag": null, "Tag": null,
@ -367,16 +369,66 @@ export class CollectionToolsComponent2 implements OnInit {
} }
this.canvasData.isChange = true this.canvasData.isChange = true
}
//直接上传
directUpload(companyId: string, file) {
return new Promise<void>((resolve, reject) => {
this.http.post(`api/Objects/WebPlan2D/${companyId}`, file).subscribe((data: any) => {
this.objectName = data.objectName
resolve(data.objectName)
})
}) })
} else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('上传图片文件不允许大于5mb','确定',config);
} }
//分块上传
sectionUpload(companyId: string, file) {
let data = { filename: file.name }
return new Promise((resolve, reject) => {
this.http.post(`/api/NewMultipartUpload/WebPlan2D/${companyId}`, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传
let objectName = data.objectName
let uploadId = data.uploadId
let PartNumberETag = []; //每次返回需要保存的信息
//分块 处理
let fileSize = file.size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB一个分片
let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
for (let i = 0; i < allSlice; i++) { //循环分段上传
let start = i * shardSize //切割文件开始位置
let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
let formData = new FormData()
formData.append("file", file.slice(start, end))
//同步写法实现异步调用
let result = await new Promise((resolve, reject) => {
// await 需要后面返回一个 promise 对象
this.http.post(`/api/MultipartUpload/WebPlan2D/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => {
let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null }
resolve(msg) // 调用 promise 内置方法处理成功
})
});
PartNumberETag.push(result)
if (PartNumberETag.length === allSlice) { //分块上传完成
let data = PartNumberETag
let paramsData = { uploadId: uploadId }
this.http.post(`/api/CompleteMultipartUpload/WebPlan2D/${objectName}`, data, { params: paramsData }).subscribe(data => {
this.objectName = objectName
resolve(objectName)
})
}
}//for循环
//分块 处理
})
})
} }
//不能上传图片提示 //不能上传图片提示
imgNumBeyond() { imgNumBeyond() {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
@ -1156,16 +1208,16 @@ export class CollectionToolsComponent2 implements OnInit {
} }
//子节点跟随父节点的islook变化 //子节点跟随父节点的islook变化
  if(node.children && node.children.length != 0){ if (node.children && node.children.length != 0) {
      node.children.forEach(item=>{ node.children.forEach(item => {
        item.isLook = !node.isLook  item.isLook = !node.isLook
        if(item.children && item.children.length != 0){ if (item.children && item.children.length != 0) {
          item.children.forEach(i=>{ item.children.forEach(i => {
            i.isLook =  !node.isLook  i.isLook = !node.isLook
          }) })
        } }
      }) })
     } }
const nodes = this.treeControl.dataNodes; const nodes = this.treeControl.dataNodes;
const expandNodes = []; const expandNodes = [];
@ -1789,7 +1841,7 @@ export class CollectionToolsComponent2 implements OnInit {
let file = e.target.files[0] || null //获取上传的文件 let file = e.target.files[0] || null //获取上传的文件
let fileSize = file.size || null //上传文件的总大小 let fileSize = file.size || null //上传文件的总大小
let maxSize = 5 * 1024 * 1024 //5MB一个分片 let maxSize = 5 * 1024 * 1024 //5MB一个分片
let tenSize = 10 * 1024 * 1024 //10MB限制 let tenSize = 100 * 1024 * 1024 //10MB限制
if (file && file.name.toLowerCase().indexOf('png') == -1 && file.name.toLowerCase().indexOf('jpg') == -1 && file.name.toLowerCase().indexOf('jpeg') == -1) { if (file && file.name.toLowerCase().indexOf('png') == -1 && file.name.toLowerCase().indexOf('jpg') == -1 && file.name.toLowerCase().indexOf('jpeg') == -1) {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -1811,7 +1863,7 @@ export class CollectionToolsComponent2 implements OnInit {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
config.duration = 3000 config.duration = 3000
this.snackBar.open('上传底图需小于10MB','确定',config); this.snackBar.open('上传底图需小于100MB', '确定', config);
} }
} }

101
src/app/ui/collection-tools/collection-tools.component.ts
Unescape View File

@ -301,24 +301,25 @@ export class CollectionToolsComponent implements OnInit {
let fileSize = file.size || null //上传文件的总大小 let fileSize = file.size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB一个分片 let shardSize = 5 * 1024 * 1024 //5MB一个分片
let companyId = sessionStorage.getItem("companyId") let companyId = sessionStorage.getItem("companyId")
if (file && fileSize <= shardSize) { //上传文件<=5MB时
let formData = new FormData()
formData.append("file",file)
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
this.http.delete(`/api/Objects/WebPlan2D/${companyId}/${file.name}?x-oss-process=image/resize,m_fixed,h_100,w_100`).subscribe(data => { this.http.delete(`/api/Objects/WebPlan2D/${companyId}/${file.name}?x-oss-process=image/resize,m_fixed,h_100,w_100`).subscribe(data => {
// console.log('删除缩略图成功')
resolve('删除缩略图成功') resolve('删除缩略图成功')
}) })
}) })
this.http.post(`api/Objects/WebPlan2D/${companyId}`,formData).subscribe((data:any)=>{
this.objectName = data.objectName //给objectName赋值
if (file && fileSize <= shardSize) { //上传文件<=5MB时
let formData = new FormData()
formData.append("file", file)
await this.directUpload(companyId, formData)
} else if (file && fileSize > shardSize) { //上传文件>10MB时,分块上传
await this.sectionUpload(companyId, file)
}
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
config.duration = 3000 config.duration = 3000
this.snackBar.open('上传成功', '确定', config) this.snackBar.open('上传成功', '确定', config)
// this.http.delete(`/api/Objects/WebPlan2D/${this.objectName}?x-oss-process=image/resize,m_fixed,h_100,w_100`).subscribe(data=>{
// console.log('删除缩略图成功')
// })
//在原始素材对象和需要循环图片的对象中分别push最新上传的图片 //在原始素材对象和需要循环图片的对象中分别push最新上传的图片
let imgObj = { let imgObj = {
"Tag": null, "Tag": null,
@ -365,15 +366,63 @@ export class CollectionToolsComponent implements OnInit {
} }
this.canvasData.isChange = true this.canvasData.isChange = true
}
//直接上传
directUpload(companyId: string, file) {
return new Promise<void>((resolve, reject) => {
this.http.post(`api/Objects/WebPlan2D/${companyId}`, file).subscribe((data: any) => {
this.objectName = data.objectName
resolve(data.objectName)
})
}) })
} else if (file && fileSize>shardSize) { //上传文件>5MB时,分块上传
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('上传图片文件不允许大于5mb','确定',config);
} }
//分块上传
sectionUpload(companyId: string, file) {
let data = { filename: file.name }
return new Promise((resolve, reject) => {
this.http.post(`/api/NewMultipartUpload/WebPlan2D/${companyId}`, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传
let objectName = data.objectName
let uploadId = data.uploadId
let PartNumberETag = []; //每次返回需要保存的信息
//分块 处理
let fileSize = file.size || null //上传文件的总大小
let shardSize = 5 * 1024 * 1024 //5MB一个分片
let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
for (let i = 0; i < allSlice; i++) { //循环分段上传
let start = i * shardSize //切割文件开始位置
let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
let formData = new FormData()
formData.append("file", file.slice(start, end))
//同步写法实现异步调用
let result = await new Promise((resolve, reject) => {
// await 需要后面返回一个 promise 对象
this.http.post(`/api/MultipartUpload/WebPlan2D/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => {
let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null }
resolve(msg) // 调用 promise 内置方法处理成功
})
});
PartNumberETag.push(result)
if (PartNumberETag.length === allSlice) { //分块上传完成
let data = PartNumberETag
let paramsData = { uploadId: uploadId }
this.http.post(`/api/CompleteMultipartUpload/WebPlan2D/${objectName}`, data, { params: paramsData }).subscribe(data => {
this.objectName = objectName
resolve(objectName)
})
} }
}//for循环
//分块 处理
})
})
}
//不能上传图片提示 //不能上传图片提示
imgNumBeyond() { imgNumBeyond() {
@ -1150,16 +1199,16 @@ export class CollectionToolsComponent implements OnInit {
} }
//子节点跟随父节点的islook变化 //子节点跟随父节点的islook变化
  if(node.children && node.children.length != 0){ if (node.children && node.children.length != 0) {
      node.children.forEach(item=>{ node.children.forEach(item => {
        item.isLook = !node.isLook  item.isLook = !node.isLook
        if(item.children && item.children.length != 0){ if (item.children && item.children.length != 0) {
          item.children.forEach(i=>{ item.children.forEach(i => {
            i.isLook =  !node.isLook  i.isLook = !node.isLook
          }) })
        } }
      }) })
     } }
const nodes = this.treeControl.dataNodes; const nodes = this.treeControl.dataNodes;
const expandNodes = []; const expandNodes = [];
@ -1783,7 +1832,7 @@ export class CollectionToolsComponent implements OnInit {
let file = e.target.files[0] || null //获取上传的文件 let file = e.target.files[0] || null //获取上传的文件
let fileSize = file.size || null //上传文件的总大小 let fileSize = file.size || null //上传文件的总大小
let maxSize = 5 * 1024 * 1024 //5MB一个分片 let maxSize = 5 * 1024 * 1024 //5MB一个分片
let tenSize = 10 * 1024 * 1024 //10MB限制 let tenSize = 100 * 1024 * 1024 //10MB限制
if (file && file.name.toLowerCase().indexOf('png') == -1 && file.name.toLowerCase().indexOf('jpg') == -1 && file.name.toLowerCase().indexOf('jpeg') == -1) { if (file && file.name.toLowerCase().indexOf('png') == -1 && file.name.toLowerCase().indexOf('jpg') == -1 && file.name.toLowerCase().indexOf('jpeg') == -1) {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
@ -1805,7 +1854,7 @@ export class CollectionToolsComponent implements OnInit {
const config = new MatSnackBarConfig(); const config = new MatSnackBarConfig();
config.verticalPosition = 'top'; config.verticalPosition = 'top';
config.duration = 3000 config.duration = 3000
this.snackBar.open('上传底图需小于10MB','确定',config); this.snackBar.open('上传底图需小于100MB', '确定', config);
} }
} }

Write Preview
Loading…
Cancel
Save