Browse Source

[完善]制作预案交通水源部分

tangshan
邵佳豪 4 years ago
parent
commit
d96406084d
  1. 2
      src/app/key-unit/key-unit.module.ts
  2. 8
      src/app/key-unit/water-road/water-road.component.html
  3. 6
      src/app/key-unit/water-road/water-road.component.scss
  4. 46
      src/app/key-unit/water-road/water-road.component.ts
  5. 43
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html
  6. 8
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
  7. 19
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts
  8. 7
      src/app/plan-management/create-plan-online-five/openPlanTool.html
  9. 2
      src/app/plan-management/entry-plan/entry-plan.component.html
  10. 4
      src/app/plan-management/plan-management.module.ts
  11. 4
      src/app/tabbar/tabbar.component.html
  12. 56
      src/app/ui/collection-tools-plan/collection-tools.component.ts

2
src/app/key-unit/key-unit.module.ts

@ -88,7 +88,7 @@ import { SpecialWarningComponent } from './special-warning/special-warning.compo
@NgModule({
declarations: [KeyUnitManagementComponent, EditUnitInfoComponent, ViewUnitDetailsComponent,CreateUnit,BasicinfoComponent,LookMaster,AddHouseInfo, EditPlanInfoComponent,BasicinfoLookComponent, ViewUnitDetailsPlanComponent,FunctionDivisionComponent,addPartition,addPartitionAttribute,AllaroundComponent,ImgDetails,RealisticPictureComponent,previewImg,addRealPicture,editRealPicture,KeySiteComponent,KeySiteImgs,UploadingCADComponent,readFile,editFile,KeySiteLookComponent,KeySiteImgs2,FunctionDivisionLookComponent,RealisticPictureLookComponent,previewImg3,UploadingCADLookComponent,FireFightingDeviceComponent,ImagesData,previewBigImg,ImgsDataDetail,FireFightingDeviceLookComponent,ImagesData2,ImgsDataDetail2,previewBigImg2,addPartitionAttribute2, SixFamiliarityComponent, ActualCombatDrillComponent,routerMapComponent, SixFamiliarListComponent,TrainingRecordinfoComponent,RouterGISComponent,WaterRoadComponent,PhotoofthesceneComponent,KnowRouteComponent,FindProblemComponent,upname,companyAuditResult,StatisticsOfFireFightingFacilities, SpecialWarningComponent],
exports:[ViewUnitDetailsPlanComponent],
exports:[ViewUnitDetailsPlanComponent,WaterRoadComponent],
imports: [
CommonModule,
KeyUnitRoutingModule,

8
src/app/key-unit/water-road/water-road.component.html

@ -1,7 +1,7 @@
<div class="content">
<div class="center" id="center"></div>
<!-- 上角 -->
<!-- 上角 -->
<div class="rightTopBox">
<div class="contantbox">
@ -39,7 +39,11 @@
</div>
</div>
<!-- 右上角 -->
<!-- 左上角 -->
<button mat-flat-button color="primary" class="createImg" (click)="takeScreenshotGis()">
生成图片
</button>
</div>

6
src/app/key-unit/water-road/water-road.component.scss

@ -136,3 +136,9 @@
}
}
}
.createImg{
position: absolute;
right: 30px;
top: 15px;
}

46
src/app/key-unit/water-road/water-road.component.ts

@ -5,7 +5,7 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { ActivatedRoute } from '@angular/router';
declare var AMap: any;
declare var html2canvas: any;
@Component({
selector: 'app-water-road',
templateUrl: './water-road.component.html',
@ -20,7 +20,9 @@ export class WaterRoadComponent implements OnInit {
async getUnitData() {
await new Promise((resolve, reject) => {
this.http.get(`/api/Companies/${this.route.snapshot.queryParams.id}`).subscribe(data => {
let id
this.route.snapshot.queryParams.id ? id = this.route.snapshot.queryParams.id : id = this.route.snapshot.queryParams.companyId
this.http.get(`/api/Companies/${id}`).subscribe(data => {
this.unitData = data
resolve(data)
})
@ -131,7 +133,7 @@ export class WaterRoadComponent implements OnInit {
this.snackBar.open('请选择要显示的类型', '确定', config);
} else {
console.log('选中的内容',this.selectedWaterList)
// console.log('选中的内容', this.selectedWaterList)
function checkAdult(item) {
return item <= 2;
}
@ -140,8 +142,8 @@ export class WaterRoadComponent implements OnInit {
}
const water = this.selectedWaterList.filter(checkAdult);
const power = this.selectedWaterList.filter(checkAdult2);
console.log('water',water)
console.log('power',power)
// console.log('water', water)
// console.log('power', power)
let waterparamsdata: any = {
PageSize: 99999,
Lon: this.unitData.location.x,
@ -237,7 +239,7 @@ export class WaterRoadComponent implements OnInit {
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
// div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
@ -300,6 +302,9 @@ export class WaterRoadComponent implements OnInit {
creatMap() {
this.map = new AMap.Map('center', {
zoom: 13, //初始地图级别
WebGLParams: {
preserveDrawingBuffer: true
}
});
if (this.unitData.location && this.unitData.location.x) {
this.map.setCenter([this.unitData.location.x, this.unitData.location.y]);
@ -322,5 +327,34 @@ export class WaterRoadComponent implements OnInit {
}
canvasImg
takeScreenshotGis() {
// console.log(666666, this.selectingSitePlan)
// 使用html2canvas插件,将数据源中的数据转换成画布。
html2canvas(document.querySelector("#center"), {
useCORS: true, // 【重要】开启跨域配置,
allowTaint: true,//允许跨域图片
taintTest: false,//是否在渲染前测试图片
onrendered: function (canvas) {
var dataUrl = canvas.toDataURL("image/png");
}
}).then(canvas => {
// 修改生成的宽度
this.canvasImg = canvas.toDataURL("image/png");
// console.log(this.canvasImg)
}).then(() => {
this.downloadFile('水源图', this.canvasImg);
})
}
downloadFile(filename, content) {
var base64Img = content;
var oA = document.createElement('a');
oA.href = base64Img;
oA.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
oA.dispatchEvent(event);
}
}

43
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html

@ -112,6 +112,35 @@
</div>
</div>
</div>
<div *ngIf="selectedItem == '交通水源'" class="leftKeyImg">
<div class="keyImgTitle">
交通水源
</div>
<div class="planlist" id="planlist">
<div style="margin: 10px 0;">
<mat-accordion>
<mat-expansion-panel expanded style="box-shadow: 0 0 black;border: 1px solid #EEF1F5;">
<mat-expansion-panel-header collapsedHeight='33px' expandedHeight='33px'
style="position: relative;padding-left:20px;background: #F2F9FF;">
<mat-panel-title>
水源
</mat-panel-title>
</mat-expansion-panel-header>
<div class="content">
<div class="contentitem">
<div>
<img (click)="openPlan(1,-1,'水源')"
src='/assets/images/2D.jpg'
alt="">
</div>
<p>交通水源</p>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
</div>
<div class="leftBuilding" *ngIf="selectedItem == '单位概况'">
<div class="buildingHead" >
<span>建筑列表</span>
@ -227,7 +256,7 @@
<!-- 模板页面 -->
<div *ngFor="let item of planTemplateData;let key = index">
<div *ngIf="selectedItem == item.groupName">
<!-- <p>{{item.groupName}}</p> -->
<div class="centerBox"
*ngIf="item.groupName!='单位概况'&&item.groupName!='交通水源'&&item.groupName!='重点图示'&&item.groupName!='预案附件'">
<div class="boxHead">
@ -284,7 +313,7 @@
</div>
</div>
</div>
<div class="keyImg" *ngIf="item.groupName == '重点图示'">
<div class="keyImg" *ngIf="item.groupName == '重点图示' || item.groupName == '交通水源'">
<div class="keyImgItem" *ngFor="let i of item.attribute;let key = index">
<div class="keyImgTitle">
<input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
@ -330,6 +359,16 @@
</button>
</div>
</div>
<div class="disposalPoint" *ngIf="item.groupName == '特别警示'">
<div class="disposalPointItem" *ngFor="let i of item.attribute;let key = index">
<div class="disposalPointTitle">
<input type="text" placeholder="请输入分组名称" [(ngModel)]="i.name">
</div>
<div class="disposalPointTextarea">
<textarea [(ngModel)]="i.cantent" style="resize: none;" placeholder="请填写自定义内容" name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
</div>
<div class="unit" *ngIf="item.groupName == '单位概况'">
<div class="unithead">
<span>{{buildingName}}</span>

8
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss

@ -200,7 +200,7 @@
cursor: pointer;
height: 40px;
width: 100%;
border-bottom: 1px solid #F2F4F5;
border-bottom: 1px solid #f2f4f5;
.example-margin {
width: 14px;
height: 14px;
@ -483,14 +483,14 @@
.unitbodyHead {
width: 100%;
height: 40px;
background-color: #2196F3;
background-color: #2196f3;
text-align: center;
span {
font-size: 16px;
text-align: center;
height: 40px;
line-height: 40px;
color: #FFFFFF;
color: #ffffff;
}
img {
cursor: pointer;
@ -575,6 +575,7 @@
}
}
}
}
.disposalPoint {
div {
width: 100%;
@ -626,4 +627,3 @@
}
}
}
}

19
src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts

@ -136,11 +136,21 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
element.attribute = [{ name: '', imgArr: [] }]
}
}
if (element.groupName == '交通水源') {
if (!element.attribute) {
element.attribute = [{ name: '', imgArr: [] }]
}
}
if (element.groupName == '处置要点') {
if (!element.attribute) {
element.attribute = [{ name: '', content: '' }]
}
}
if (element.groupName == '特别警示') {
if (!element.attribute) {
element.attribute = [{ name: '特别警示', content: '' }]
}
}
});
})
}
@ -250,11 +260,11 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
})
}
//打开采集工具
openPlan(item, index) {
openPlan(item, index,type?:string) {
sessionStorage.setItem("gisplan", 'look')
sessionStorage.setItem("companyId", this.unitId)
// console.log(item)
let data = { select: item, key: index, allBuildings: this.allBuildings }
let data = { select: item, key: index, allBuildings: this.allBuildings,type: type}
let width = Math.round(document.body.clientWidth * 0.8) + 'px'
let height = Math.round(document.body.clientHeight * 0.9) + 'px'
// console.log('宽度',width)
@ -389,13 +399,16 @@ export class OpenPlanToolDialog {
@ViewChild('plan') plan: any //子组件
type:any//打开的类型 是平面图还是水源
ngOnInit() {
this.type = this.data.type
}
ngAfterViewInit(): void {
if(this.type != '水源'){
this.noticePlan()
}
}
//通知 子组件 传递参数
noticePlan() {

7
src/app/plan-management/create-plan-online-five/openPlanTool.html

@ -1,3 +1,10 @@
<ng-container *ngIf="type == '水源'; else elseTemplate">
<div class="divbox">
<app-water-road></app-water-road>
</div>
</ng-container>
<ng-template #elseTemplate>
<div class="divbox">
<app-collection-tools-plan #plan></app-collection-tools-plan>
</div>
</ng-template>

2
src/app/plan-management/entry-plan/entry-plan.component.html

@ -142,7 +142,7 @@
<td mat-cell *matCellDef="let element;let i = index">
<div class="integrityDiv">
<span class="integrityNum">
{{(element.company.companyIntegrityScore.totalScore.toFixed(2) * 100).toFixed()}}
{{(element.company.companyIntegrityScore.totalScore.toFixed(2) * 100).toFixed()}}%
</span>
<div class="integrityColorDiv" [style]="integrity((element.company.companyIntegrityScore.totalScore.toFixed(2) * 100).toFixed())">
</div>

4
src/app/plan-management/plan-management.module.ts

@ -68,6 +68,7 @@ import { CreatePlanOnlineFiveComponent, OpenPlanToolDialog } from './create-plan
import { CreatePlanOnlineThreeComponent } from './create-plan-online-three/create-plan-online-three.component'
import { UiModule } from '../ui/ui.module';
import { TreeDiagramModule } from '../ui/ng-tree-diagram/src/ng-tree-diagram';
import { KeyUnitModule } from '../key-unit/key-unit.module';
@NgModule({
declarations: [EntryPlanComponent, PassPlanComponent, OpenPlanComponent, EntryPlanLookComponent, AddPlanone, PlanType, AuditSatus, PlanLevel, DownloadFile, AuditResult, ChangeName,
@ -121,7 +122,8 @@ import { TreeDiagramModule } from '../ui/ng-tree-diagram/src/ng-tree-diagram';
MatTooltipModule,
MatTreeModule,
UiModule,
TreeDiagramModule
TreeDiagramModule,
KeyUnitModule
],
exports: [PlanType, AuditSatus, PlanLevel, state]
})

4
src/app/tabbar/tabbar.component.html

@ -154,7 +154,7 @@
<table>
<tr>
<td>名称</td>
<td>分值</td>
<td>占比</td>
<td>规则说明</td>
</tr>
<tr>
@ -194,7 +194,7 @@
<tr>
<td>实景图</td>
<td class="bulecolor">10%</td>
<td>外观,保证有<span class="bulecolor">2</span>张照片(占<span class="bulecolor">30%</span>); 室内,保证有<span
<td>外观,保证有<span class="bulecolor">2</span>张照片(占<span class="bulecolor">30%</span>); 重点部位,保证有<span
class="bulecolor">2</span>张照片(占<span class="bulecolor">30%</span>);安全出口,保证有<span
class="bulecolor">2</span>张照片(占<span class="bulecolor">40%</span></td>
</tr>

56
src/app/ui/collection-tools-plan/collection-tools.component.ts

@ -233,7 +233,6 @@ export class CollectionToolsPlanComponent implements OnInit {
if (!this.isGis) {
this.canvas.refreshIcon(this.canvasAssetObj.Id)
}
}
//素材高度输入框改变
assetHeightIunput() {
@ -705,7 +704,6 @@ export class CollectionToolsPlanComponent implements OnInit {
let buildingId = this.beforeOneCheckedBuilding.id
let floorId = this.selectingSitePlan.id
this.canvas.paste(companyId, buildingId, floorId)
// this.renovateTreeData(false)
}
//截图
takeScreenshot() {
@ -781,6 +779,7 @@ export class CollectionToolsPlanComponent implements OnInit {
saveNum: any = []
saveSite() {
//更新用于统计的数据
this.canvasData.updateBuildingData()
if (this.selectingSitePlan && this.selectingSitePlan.id) {
@ -793,12 +792,11 @@ export class CollectionToolsPlanComponent implements OnInit {
CompanyData.data = JSON.stringify(CompanyData.data)
let object = this.canvasData.originalcompanyBuildingData.data
console.log('建筑数据',object)
let adjoinArr = [] //毗邻数组
if (this.pattern) {//如果是基本信息编辑模式
for (const key in object) {
if (object[key].Name == "毗邻") {//如果是相同楼层,则筛选出毗邻
object[key].PropertyInfos.forEach(element => {
if (element.PropertyName == "方向") {
adjoinArr.push(element.PropertyValue)
@ -806,6 +804,7 @@ export class CollectionToolsPlanComponent implements OnInit {
});
}
}
console.log('adjoinArr',adjoinArr)
if ((new Set(adjoinArr)).size != adjoinArr.length) {
this.maskLayerService.sendMessage(false)
let config = new MatSnackBarConfig();
@ -816,7 +815,6 @@ export class CollectionToolsPlanComponent implements OnInit {
} else {
//如果是单位 总平面图
if (this.checkedBuildingIndex == -1) {
if (this.isGis) {
let data = JSON.parse(JSON.stringify(this.selectingSitePlan))
data.zoomLevel = this.map.getZoom(),
@ -865,6 +863,9 @@ export class CollectionToolsPlanComponent implements OnInit {
})
//保存建筑数据
// console.log('CompanyData',CompanyData)
// CompanyData.data = "{\"图例\":{\"Id\":\"图例\",\"Name\":\"图例\",\"Angle\":0,\"Color\":\"#066EED80\",\"Point\":{\"x\":200,\"y\":200},\"Scale\":1,\"Width\":32,\"Border\":null,\"Height\":32,\"PivotX\":0,\"PivotY\":0,\"Enabled\":true,\"FloorId\":\"60d42db743d691776496cf7c\",\"DrawMode\":null,\"FillMode\":null,\"GameMode\":0,\"ImageUrl\":null,\"FixedSize\":null,\"Thickness\":null,\"MultiPoint\":null,\"TemplateId\":null,\"FireElementId\":null,\"PropertyInfos\":[{\"Tag\":\"\",\"Order\":0,\"Enabled\":true,\"Visible\":true,\"Required\":false,\"RuleName\":\"\",\"RuleValue\":\"\",\"PhysicalUnit\":\"\",\"PropertyName\":\"列\",\"PropertyType\":2,\"PropertyValue\":\"2\"}],\"IsFromBuilding\":null,\"InteractiveMode\":null}}"
this.http.post("/api/CompanyData", CompanyData, {
params: {
companyId: this.params.companyId
@ -954,7 +955,6 @@ export class CollectionToolsPlanComponent implements OnInit {
}).subscribe(data => {
this.saveNum.push("1")
if (this.saveNum.length == 5) {
this.maskLayerService.sendMessage(false)
this.maskLayerService.sendMessage(false)
this.canvasData.isChange = false
let config = new MatSnackBarConfig();
@ -1239,7 +1239,6 @@ export class CollectionToolsPlanComponent implements OnInit {
storeyData //将建筑素材和当前楼层素材合二为一
//处理 tree 数据结构
handleTreeData(storeyData) {
this.storeyData = storeyData
let data = this.allFireElements //所有消防要素模板
let treeData = [] //tree型 处理完成后的数据
@ -1387,8 +1386,6 @@ export class CollectionToolsPlanComponent implements OnInit {
//封装 刷新 tree 数据
async renovateTreeData(isRefresh: boolean = true) {
// this.allFireElements[this.allFireElements.length-1].children = []
console.log(888, this.selectingSitePlan)
if (!this.selectingSitePlan.isGis) {
isRefresh ? await this.canvas.refresh() : null
this.canvas.setNameVisible(this.basicInfo, 0)
@ -1421,7 +1418,6 @@ export class CollectionToolsPlanComponent implements OnInit {
}
map: any
toLoadGis() {
console.log(666666, this.isGis)
this.map = new AMap.Map('planContainer', {
viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D',
zoom: 11, //初始化地图层级
@ -1490,12 +1486,6 @@ export class CollectionToolsPlanComponent implements OnInit {
}
//陈鹏飞↓↓↓
//陈鹏飞↓↓↓
//陈鹏飞↓↓↓
@ -1837,29 +1827,13 @@ export class CollectionToolsPlanComponent implements OnInit {
const isDelete = confirm('您确定要删除吗');
if (isDelete) {
if (this.checkedBuildingIndex == -1) { //总平面图
let isHave = this.canvasData.allDisposalNode.find(items => { return items.sitePlanId === item.id })
if (isHave == undefined) {
this.http.delete(`/api/SitePlans/${item.id}`).subscribe(data => {
this.deleteShareData(item, -1)
})
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('含有数据节点的楼层不允许删除', '确定', config);
}
} else { //楼层/区域
let isHave = this.canvasData.allDisposalNode.find(items => { return items.buildingAreaId === item.id })
if (isHave == undefined) {
this.http.delete(`/api/BuildingAreas/${item.id}`).subscribe(data => {
this.deleteShareData(item, 1)
})
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('含有数据节点的楼层不允许删除', '确定', config);
}
}
}
}
@ -1878,13 +1852,17 @@ export class CollectionToolsPlanComponent implements OnInit {
delete data.data[key]
}
}
console.log('删除e',e)
console.log('删除建筑数据',data)
let newData = JSON.parse(JSON.stringify(this.canvasData.originalcompanyBuildingData));
newData.data = JSON.stringify(newData.data) // 转换JSON 数据格式
this.selectingSitePlan = this.sitePlanData[0] || {}
this.sitePlanData[0] ? this.isGis = this.sitePlanData[0].isGis : null
this.canvasData.selectStorey = this.sitePlanData[0] || {} //服务中 存一份数据
this.selectSitePlanIndex = 0
this.canvasData.isChange = false
if (isCompany === -1) {
console.log('保存建筑数据',newData)
this.http.post("/api/CompanyData", newData).subscribe(data => { })
this.getSitePlanStorey(this.selectingSitePlan) //获取 平面图 楼层数据
} else {
@ -2217,8 +2195,7 @@ export class CollectionToolsPlanComponent implements OnInit {
// console.log('选中图片',this.selectImage)
this.selectImageIndex = index
if (this.isGis) {
console.log(this.map)
// console.log(this.map)
} else {
this.canvasData.selectTemplateData = items
this.canvas.beginPaint()
@ -2272,6 +2249,7 @@ export class CollectionToolsPlanComponent implements OnInit {
let itemData = JSON.parse(JSON.stringify(this.selectImage))
itemData.id = id
itemData.point = { x: e.lnglat.lng, y: e.lnglat.lat }
itemData.floorId = this.selectingSitePlan.id
itemData = this.canvasData.deserialize(JSON.stringify(itemData))//反序列化为大写
// 添加楼层数据
this.canvasData.originaleveryStoreyData.data[id] = itemData;
@ -2291,7 +2269,7 @@ export class CollectionToolsPlanComponent implements OnInit {
seekPanelPoint(paramsData) {
this.checkedBuildingIndex = paramsData.buildingIndex
if (paramsData.buildingIndex == -1) { //总平面图时
console.log('走了1')
// console.log('走了1')
this.beforeOneCheckedBuilding = { name: "总平面图" }
let fireData = this.getFireElements(sessionStorage.getItem('buildingTypeId')) //获取单位下 消防要素
let planData = this.getSitePlanCompanyData() //获取 单位 数据
@ -2306,15 +2284,15 @@ export class CollectionToolsPlanComponent implements OnInit {
})
}) //get
} else { //建筑时
console.log('走了2')
console.log('allBuildings', this.allBuildings)
console.log('paramsData', paramsData)
// console.log('走了2')
// console.log('allBuildings', this.allBuildings)
// console.log('paramsData', paramsData)
this.beforeOneCheckedBuilding = this.allBuildings[paramsData.buildingIndex]
let params = { buildingId: this.beforeOneCheckedBuilding.id }
let fireData = this.getFireElements(this.beforeOneCheckedBuilding.buildingTypes[0].id || '') //获取建筑下 消防要素
let planData = this.getBuildingData(params) //获取 建筑 数据
this.http.get('/api/BuildingAreas', { params }).subscribe(data => {
console.log('BuildingAreas', data)
// console.log('BuildingAreas', data)
this.sitePlanData = data
let index = this.sitePlanData.findIndex(item => { return item.id === paramsData.storeyId })
this.selectingSitePlan = this.sitePlanData[index] || {}

Loading…
Cancel
Save