chenjingyu 3 years ago
parent
commit
f823d7774f
  1. 3
      src/app/gis-management/gis-labeling/gis-labeling.component.html
  2. 6
      src/app/gis-management/gis-labeling/gis-labeling.component.ts
  3. 17
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.html
  4. 48
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.scss
  5. 31
      src/app/plan-management/create-plan-online-five/create-plan-online-five.component.ts
  6. 9
      src/app/test/test.component.html
  7. 17
      src/app/test/test.component.scss
  8. 47
      src/app/test/test.component.ts
  9. 19
      src/app/ui/collection-tools-plan/collection-tools.component.html
  10. 41
      src/app/ui/collection-tools-plan/collection-tools.component.ts
  11. 22
      src/assets/html2canvas.js
  12. 1
      src/index.html

3
src/app/gis-management/gis-labeling/gis-labeling.component.html

@ -1,5 +1,6 @@
<div class="content">
<!-- <button mat-button style="position: absolute;left: 50%;top: 0;z-index: 999;" (click)="createimg()">生成图片</button> -->
<div id="map"></div>
<div id="container" style="height: 100%;"></div>
<!-- 左上搜索框 -->
@ -280,3 +281,5 @@
</div>
<!-- 右上角 -->
</div>

6
src/app/gis-management/gis-labeling/gis-labeling.component.ts

@ -5,7 +5,6 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
declare var AMap: any;
declare var QRCode: any;
@Component({
selector: 'app-gis-labeling',
templateUrl: './gis-labeling.component.html',
@ -156,6 +155,8 @@ export class GisLabelingComponent implements OnInit {
})
}
//构造重点单位checkbox控制器
buildUnits() {
const arr = this.keyUnitList.map(item => {
@ -994,6 +995,9 @@ export class GisLabelingComponent implements OnInit {
})
that.map = new AMap.Map('map',{
layers:[layer], //当只想显示标准图层时layers属性可缺省,
WebGLParams: {
preserveDrawingBuffer: true
}
});
that.map.setCity('上海市');

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

@ -313,7 +313,22 @@
</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">
<mat-icon class="deleteItem" *ngIf="key != 0" (click)="deleteItem(item,key)">delete
</mat-icon>
</div>
<div class="disposalPointTextarea">
<textarea [(ngModel)]="i.cantent" style="resize: none;" placeholder="请填写自定义内容" name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
<!-- 增加分组 -->
<div class="addDisposalPointItem">
<button mat-flat-button color="primary" (click)="addDisposalPointItem(item)">
增加分组
</button>
</div>
</div>
<div class="unit" *ngIf="item.groupName == '单位概况'">
<div class="unithead">

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

@ -575,7 +575,55 @@
}
}
}
.disposalPoint {
div {
width: 100%;
}
.disposalPointItem {
border: 1px solid #e8e9e9;
.disposalPointTitle {
height: 30px;
border-left: 1px solid #2196f3;
position: relative;
input {
width: 100%;
height: 100%;
background: #e8f4fe;
color: #2196f3;
border: 0;
box-sizing: border-box;
padding: 0 5px;
}
.deleteItem {
position: absolute;
right: 5px;
top: 3px;
cursor: pointer;
color: #292c2c;
}
.deleteItem:hover {
color: red;
}
}
.disposalPointTextarea {
textarea {
width: 100%;
height: 100%;
border: 0;
resize: none;
vertical-align: top;
box-sizing: border-box;
padding: 5px;
}
}
}
.addDisposalPointItem {
display: flex;
justify-content: center;
margin: 10px 0;
}
}
}
}
}
}

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

@ -136,6 +136,11 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
element.attribute = [{ name: '', imgArr: [] }]
}
}
if (element.groupName == '预案附件') {
if (!element.attribute) {
element.attribute = [{ name: '', content: '' }]
}
}
});
})
}
@ -145,17 +150,13 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
addkeyImgItem(item) {
item.attribute.push({ name: '', imgArr: [] })
}
//处置要点增加分组
addDisposalPointItem(item) {
item.attribute.push({ name: '', content: '' })
}
//通过左侧查看实景图
gallery
lookkeyImgItemLeft(key1, key2,i) {
// setTimeout(() => {
// if (document.getElementById('viewerjs')) {
// this.gallery = new Viewer(document.getElementById('viewerjs'), {
// url: 'data-original'
// });
// console.log('这个号甲就',document.getElementById('viewerjs'))
// }
// }, 0);
let dom = document.getElementById(`viewerjs`)
let pObjs = dom.childNodes;
let node = document.createElement("img")
@ -182,9 +183,9 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
}
});
}
//重点图示删除指定分组
//重点图示,处置要点删除指定分组
deleteItem(item, key) {
let isDelete = window.confirm('确定要删除该分组吗?分组下上传的图片将一同被删除!')
let isDelete = window.confirm('确定要删除该分组吗?分组下内容将一同被删除!')
if (isDelete) {
item.attribute.splice(key, 1)
}
@ -373,16 +374,6 @@ export class CreatePlanOnlineFiveComponent implements OnInit {
}
export interface unitData {
name: string,
organizationName: number,
buildingTypes: buildingTypes[]
}
export interface buildingTypes {
id: string,
name: string,
}
//查看预案
@Component({

9
src/app/test/test.component.html

@ -1 +1,8 @@
<p>测试当前视图宽高</p>
<div class="box">
<button mat-button style="position: absolute;left: 50%;top: 0;z-index: 999;" (click)="createimg()">生成图片</button>
<div id="mapxxx"></div>
<div class="img">
<img [src]="canvasImg" alt="">
</div>
</div>

17
src/app/test/test.component.scss

@ -0,0 +1,17 @@
.box{
width: 100%;
height: 100%;
display: flex;
#mapxxx{
width: 500px;
height: 500px;
}
.img{
width: 500px;
height: 500px;
img{
width: 500px;
height: 500px;
}
}
}

47
src/app/test/test.component.ts

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core';
declare var html2canvas: any;
declare var AMap: any;
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
@ -8,10 +9,48 @@ import { Component, OnInit } from '@angular/core';
export class TestComponent implements OnInit {
constructor() { }
map: any
ngOnInit(): void {
alert(document.documentElement.clientWidth)
alert(document.documentElement.clientHeight)
setTimeout(() => {
this.map = new AMap.Map('mapxxx', {
WebGLParams: {
preserveDrawingBuffer: true
}
});
this.map.setCity('上海市');
}, 0);
}
//生成图片
canvasImg
createimg() {
// 使用html2canvas插件,将数据源中的数据转换成画布。
html2canvas(document.querySelector("#mapxxx"), {
useCORS: true,
onrendered: function (canvas) {
var dataUrl = canvas.toDataURL("image/png");
}
}).then(canvas => {
// 修改生成的宽度
// canvas.style.width = "1000px";
console.log(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);
}
}

19
src/app/ui/collection-tools-plan/collection-tools.component.html

@ -35,10 +35,21 @@
<img src="/assets/images/czsf.png" alt="">
重置缩放
</span>
<span title="导出图片" class="zoom" (click)="takeScreenshot()">
<mat-icon>image</mat-icon>
导出图片
</span>
<ng-container *ngIf="!isGis; else elseTemplate">
<span title="导出图片" class="zoom" (click)="takeScreenshot()">
<mat-icon>image</mat-icon>
导出图片
</span>
</ng-container>
<ng-template #elseTemplate>
<span title="导出图片" class="zoom" (click)="takeScreenshotGis()">
<mat-icon>image</mat-icon>
导出图片
</span>
</ng-template>
<span class="rightSave">
<!-- <mat-icon title="查看/编辑模式" (click)="lookpat()" *ngIf="isEditPattern">tv</mat-icon>
<mat-icon title="查看/编辑模式" (click)="editpat()" *ngIf="!isEditPattern && isediticon">create</mat-icon> -->

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

@ -18,7 +18,7 @@ import { MaskLayerService } from 'src/app/mask-layer.service';
import * as ObjectID from 'bson-objectid';
import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
declare var AMap: any
declare var html2canvas: any;
declare global {
interface Window {
deleteMarker: any;
@ -721,6 +721,34 @@ export class CollectionToolsPlanComponent implements OnInit {
takeScreenshot() {
this.canvas.takeScreenshot();
}
canvasImg
takeScreenshotGis() {
// console.log(666666, this.selectingSitePlan)
// 使用html2canvas插件,将数据源中的数据转换成画布。
html2canvas(document.querySelector("#planContainer"), {
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.selectingSitePlan.name, 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);
}
isMultiSelect: boolean = false; // 多选/单选 切换
changeMultiSelect(e) { this.canvas.setMulitSelect(this.isMultiSelect) }
@ -1413,11 +1441,14 @@ export class CollectionToolsPlanComponent implements OnInit {
}
map: any
toLoadGis() {
console.log(666666, this.selectingSitePlan)
// console.log(666666, this.selectingSitePlan)
this.map = new AMap.Map('planContainer', {
viewMode: '2D', // 默认使用 2D 模式,如果希望使用带有俯仰角的 3D 模式,请设置 viewMode: '3D',
zoom: 11, //初始化地图层级
WebGLParams: {
preserveDrawingBuffer: true
}
});
if (this.selectingSitePlan.defaultCenter) {
this.map.setZoom(this.selectingSitePlan.zoomLevel); //设置地图层级
@ -2552,14 +2583,14 @@ export class CollectionToolsPlanComponent implements OnInit {
}) //get
} else { //建筑时
console.log('走了2')
console.log('allBuildings',this.allBuildings)
console.log('paramsData',paramsData)
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] || {}

22
src/assets/html2canvas.js

File diff suppressed because one or more lines are too long

1
src/index.html

@ -26,5 +26,6 @@
<script src="http://10.81.73.39:8000/webapi/ui/1.1/main.js"></script> -->
<script src="https://webapi.amap.com/maps?v=2.0&key=e4b359dc7b03f9418b7497f807131346&plugin=AMap.Driving,AMap.MouseTool,AMap.RangingTool"></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>
<script src="/assets/html2canvas.js"></script>
</html>

Loading…
Cancel
Save