徐振升 4 years ago
parent
commit
0b10177027
  1. 101
      src/app/ui/collection-tools/collection-tools.component.html
  2. 109
      src/app/ui/collection-tools/collection-tools.component.scss
  3. 25
      src/app/ui/collection-tools/collection-tools.component.ts
  4. 27
      src/app/ui/dangerous/dangerous.component.html
  5. 71
      src/app/ui/dangerous/dangerous.component.scss
  6. 10
      src/app/ui/dangerous/dangerous.component.ts
  7. 9
      src/app/ui/plan-assistance/plan-assistance.component.html
  8. 21
      src/app/ui/plan-assistance/plan-assistance.component.scss
  9. 32
      src/app/ui/plan-assistance/plan-assistance.component.ts
  10. 2
      src/app/ui/plan/collection-tools.component.html
  11. 22
      src/app/ui/similar-plans/similar-plans.component.html
  12. 72
      src/app/ui/similar-plans/similar-plans.component.scss
  13. 6
      src/app/ui/similar-plans/similar-plans.component.ts

101
src/app/ui/collection-tools/collection-tools.component.html

@ -112,36 +112,36 @@
</div>
</div>
</div>
<!-- 头部操作栏 -->
<div class="headerOperate">
<div class="bigeditdeletebtn" (click)="checkedBuilding({name:'总平面图'},-1)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">
<span>总平面图</span>
</div>
<div class="bigeditdeletebtn" *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
<span>{{item.name}}</span>
</div>
<!-- <div class="bigTalkBox" style="position: absolute;right: 26px;">
<mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon>
<div class="talkBox" *ngIf="isOpenTalk">
<div class="btndiv">
<div>泵房</div>
<div>控制室</div>
<!-- 头部操作栏 -->
<div class="headerOperate">
<div class="bigeditdeletebtn" (click)="checkedBuilding({name:'总平面图'},-1)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==-1}">
<span>总平面图</span>
</div>
<div class="bigeditdeletebtn" *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
<span>{{item.name}}</span>
</div>
<!-- <div class="bigTalkBox" style="position: absolute;right: 26px;">
<mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon>
<div class="talkBox" *ngIf="isOpenTalk">
<div class="btndiv">
<div>泵房</div>
<div>控制室</div>
</div>
<div class="bottomDiv">
<div>
<mat-icon>settings_voice</mat-icon>
</div>
<div>
按住说话
</div>
<div>
<mat-icon>search</mat-icon>
<div class="bottomDiv">
<div>
<mat-icon>settings_voice</mat-icon>
</div>
<div>
按住说话
</div>
<div>
<mat-icon>search</mat-icon>
</div>
</div>
</div>
</div>
</div> -->
</div>
</div> -->
</div>
<!--功能区 -->
<div class="functionalDomain">
<div class='functionalDomainContent' id="functionalDomainContent">
@ -287,8 +287,39 @@
</div>
<!-- H5Canvas -->
<div class="canvas">
<div class="canvas" style="position: relative;" >
<!-- 右侧楼层区域 -->
<!-- <div class="showRightStorey" *ngIf="!rightIsShow" title="打开楼层/区域"><mat-icon (click)='openRight()'>keyboard_arrow_left</mat-icon></div> -->
<div class="rightStorey" [ngClass]="{closeRight: !rightIsShow,openRight: rightIsShow}" cdkDragBoundary=".canvas" cdkDrag >
<div style="flex: 10%;" cdkDragHandle>
<!-- <label><mat-icon (click)='closeRight()' title="关闭楼层/区域">keyboard_arrow_right</mat-icon> 楼层/区域</label> -->
<label>楼层/区域</label>
</div>
<div style="flex: 90%;border-top: 1px solid #30bbec;padding: 1px 0;">
<div *ngFor="let item of sitePlanData;let key = index" style="font-size: 14px;width: 100%;height: 35px;line-height: 35px;background-color: rgba(7,89,155,0.7);"><label>{{item.name}}</label></div>
</div>
</div>
<!-- 右侧楼层区域 -->
<app-working-area #canvas [init]='this'></app-working-area>
<!-- 下方 -->
<div class="openbottombtn" *ngIf="!bottomIsShow" (click)="openedbottom()"><mat-icon> keyboard_arrow_up </mat-icon></div>
<div class="canvasbottomCss" [ngClass]="{'closeBottom': !bottomIsShow,'openBottom': bottomIsShow}">
<div class="title">
<div (click)="details()" [ngClass]="{'detailsAndattentBtn': detailsAndattentBtn}">
节点详情
</div>
<div (click)="attent()" [ngClass]="{'detailsAndattentBtn': !detailsAndattentBtn}">
注意事项
</div>
<div class="closebottombtn" (click)="closedbottom()"><mat-icon> expand_more </mat-icon></div>
</div>
<div class="body">
<div *ngIf="detailsAndattentBtn">{{canvasData.selectPanelPointBaseData.description}}</div>
<div *ngIf="!detailsAndattentBtn">{{canvasData.selectPanelPointBaseData.notes}}</div>
</div>
</div>
</div>
@ -492,21 +523,7 @@
</div>
</div>
<!-- <div id="bottomDiv" class="bottomCss" *ngIf="!pattern">
<div class="dragDiv" (mousedown)="bottomDivMouseDown($event)"></div>
<div class="title">
<div (click)="details()" [ngClass]="{'detailsAndattentBtn': detailsAndattentBtn}">
节点详情
</div>
<div (click)="attent()" [ngClass]="{'detailsAndattentBtn': !detailsAndattentBtn}">
注意事项
</div>
</div>
<div class="body">
<textarea *ngIf="detailsAndattentBtn" name="" id="" rows="10" [(ngModel)]="canvasData.selectPanelPointBaseData.description"></textarea>
<textarea *ngIf="!detailsAndattentBtn" name="" id="" rows="10" [(ngModel)]="canvasData.selectPanelPointBaseData.nodes"></textarea>
</div>
</div> -->
</div>
</div>

109
src/app/ui/collection-tools/collection-tools.component.scss

@ -230,6 +230,115 @@
}
.canvas{
flex: 5;
.closebottombtn{
width: 30px;
vertical-align: sub;
}
.openbottombtn{
width: 30px;
color: white;
text-align: center;
height: 30px;
line-height: 30px;
vertical-align: sub;
position: absolute;
left: 5px;
bottom: 5px;
background-color:rgba(2, 44, 73, 0.9);
}
//打开时
.openBottom{
margin-bottom: 0;
transition: margin-bottom 1s;
}
//关闭
.closeBottom{
margin-bottom: -300px!important;
transition: margin-bottom 1s;
}
//右侧 楼层UI
.rightStorey {
width: 100px;
height: 250px;
position: absolute;
left: 0;
top: 50%;
margin-top: -200px;
z-index: 9999;
display: flex;
flex-direction: column;
background-color:rgba(2, 44, 73, 0.9);
color: #fff;
font-weight: 300;
>div {text-align: center; line-height: 25px;}
}
.showRightStorey {
position: absolute;
right: 0;
top: 50%;
margin-top: -13px;
z-index: 9999;
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
background-color:rgba(2, 44, 73, 0.9);
color: #fff;
}
//打开关闭右侧 楼层
.openRight {
margin-right: 0px;
transition: margin-right 0.5s;
}
.closeRight {
margin-right: -300px;
transition: margin-right 0.5s;
}
.canvasbottomCss{
margin-bottom: 0;
transition: margin-bottom 0.5s;
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
display: flex;
flex-direction: column;
.title{
border-bottom: 1px solid #30bbec;
flex: 1;
div{
cursor: pointer;
background-color: rgba(2, 44, 73, 0.9);
width: 120px;
height: 30px;
line-height: 35px;
text-align: center;
margin-right: 10px;
color: white;
font-style: italic;
font-size:18px;
}
.closebottombtn{
width: 30px;
vertical-align: sub;
}
.detailsAndattentBtn{
background-color: #ed863b;
}
}
.body{
flex: 10;
background-color:rgba(2, 44, 73, 0.9);
div{
color: #d0e0f4;
font-size: 16px;
letter-spacing:5px;
margin: 5px 0 0 8px;
}
}
}
}
.functionalDomainRight {
color: white;

25
src/app/ui/collection-tools/collection-tools.component.ts

@ -69,6 +69,18 @@ export class CollectionToolsComponent implements OnInit {
mySwiper:any //轮播图实例
gallery//viewerJs实例
rightIsShow = true; // 右侧楼层是否展示
// 打开 右侧楼层
openRight() {
this.rightIsShow = true;
}
// 关闭 右侧楼层
closeRight() {
console.log(123)
this.rightIsShow = false;
}
//设置属性框
setAssetsProperty(obj){
//初始化viewerJs实例
@ -174,12 +186,23 @@ export class CollectionToolsComponent implements OnInit {
//节点详情
details(){
this.detailsAndattentBtn = true
console.log(this.canvasData.selectPanelPointBaseData)
}
//注意事项
attent(){
this.detailsAndattentBtn = false
console.log(this.canvasData.selectPanelPointBaseData)
}
bottomIsShow = true//底部隐藏按钮
//关闭底部
closedbottom(){
this.bottomIsShow = false
}
//打开底部
openedbottom(){
this.bottomIsShow = true
}
//消防要素div边框高度调节
firecategoriesDivMouseDown(e){
document.onmousemove = (ev) => {

27
src/app/ui/dangerous/dangerous.component.html

@ -1,7 +1,28 @@
<div class="box">
<div class="title">
<div (click)="typeSelect(1)" [ngClass]="{'selectedBtn': istype}">危化品类型</div>
<div (click)="typeSelect(2)" [ngClass]="{'selectedBtn': !istype}">危化品分布</div>
<div class="title" style="position: relative;">
<div class="divtype" (click)="typeSelect(1)" [ngClass]="{'selectedBtn': istype}">危化品类型</div>
<div class="divtype" (click)="typeSelect(2)" [ngClass]="{'selectedBtn': !istype}">危化品分布</div>
<div class="bigTalkBox" style="position: absolute;right: 26px;top: 8px;">
<mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon>
<div class="talkBox" *ngIf="isOpenTalk">
<div class="btndiv">
<div>泵房</div>
<div>控制室</div>
</div>
<div class="bottomDiv">
<div>
<mat-icon>settings_voice</mat-icon>
</div>
<div>
按住说话
</div>
<div>
<mat-icon>search</mat-icon>
</div>
</div>
</div>
</div>
</div>
<div class="body">
<!-- 危化品类型 -->

71
src/app/ui/dangerous/dangerous.component.scss

@ -9,7 +9,7 @@
width: 100%;
padding-top: 10px;
font-size: 20px;
div{
.divtype{
display: inline-block;
width: 126px;
height: 35px;
@ -22,6 +22,73 @@
.selectedBtn{
background-color: #e88108;
}
.bigTalkBox{
user-select: none;
.titleIcon{
font-size: 33px;
vertical-align: sub;
color: white;
cursor: pointer;
}
.talkBox{
width: 309px;
height: 326px;
border: 1px solid #30bbec;
background-color: #013a64;
opacity: .9 ;
position: absolute;
top: 32px;
right:4px;
z-index: 2000;
.btndiv{
div{
border-radius: 18px;
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
display: inline-block;
font-size: 13px;
color: white;
cursor: pointer;
}
div:nth-child(1){
background-color: #fe9400;
margin: 10px;
}
div:nth-child(2){
background-color: #f95e5a;
}
}
.bottomDiv{
position: absolute;
bottom:6px;
width: 100%;
height: 32px;
line-height: 32px;
display: flex;
color: white;
text-align: center;
mat-icon{
vertical-align: sub;
}
div:nth-child(1){
flex: 1;
}
div:nth-child(2){
flex: 6;
color: #409eff;
background: url('../../../assets/images/输入框.png');
background-size: 100% 100%;
}
div:nth-child(3){
flex: 1;
}
}
}
}
}
.body{
width: 99.9%;
@ -190,3 +257,5 @@
top: 0;
}

10
src/app/ui/dangerous/dangerous.component.ts

@ -11,6 +11,11 @@ export class DangerousComponent implements OnInit {
map:any //地图
ngOnInit(): void {
}
//打开说话框
isOpenTalk = false
openTalkDiv(){
this.isOpenTalk = !this.isOpenTalk
}
selectedIndex = 0
typedata = [
@ -157,7 +162,10 @@ export class DangerousComponent implements OnInit {
detailNode = null
openDetails(item){
this.detailNode = item
this.isOpen = true
if(item.content){
this.isOpen = true
}
this.num = 0
}

9
src/app/ui/plan-assistance/plan-assistance.component.html

@ -1,6 +1,7 @@
<div class="content">
<!-- [ngClass]="{closeLeft: !rightIsShow,openLeft: rightIsShow}" -->
<div class="left">
<div class="header leftHeader">到场力量</div>
<div class="header leftHeader" style="overflow: hidden;">到场力量</div>
<div class="list">
<div class="tableDiv">
<div class="tableRows" *ngFor="let item of allCarsData;let key = index" (click)='selectCar(item)' [ngClass]="{selectIcon: selectCarID == item.Id}">
@ -11,7 +12,7 @@
<div class="countdown" style="color: #37f76D;" *ngIf="item.ReachTime < 1">已到场</div>
<div class="countdown" *ngIf="item.ReachTime > 0">
<label [ngClass]="{smallFive: item.ReachTime<=300,bigTen: item.ReachTime>300}">
<countdown #key [config]="{leftTime: item.ReachTime,notify: [299],format: 'm分钟'}" (event)="handleEvent($event,item)"></countdown>
<countdown #key [config]="{leftTime: item.ReachTime,notify: [299],format: 'm:ss内到场'}" (event)="handleEvent($event,item)"></countdown>
</label>
</div>
</div>
@ -68,8 +69,8 @@
<p>
<input type="text" class="taskInput" [(ngModel)]="canvasData.selectCar.Assignment">
</p>
<p>{{canvasData.selectCar.LinkCar}}</p>
<p>{{canvasData.selectCar.WaterOccupy}}</p>
<p title="{{canvasData.selectCar.LinkCar}}">{{canvasData.selectCar.LinkCar}}</p>
<p title="{{canvasData.selectCar.WaterOccupy}}">{{canvasData.selectCar.WaterOccupy}}</p>
</div>
</div>
<div style="flex: 10%;text-align: center;line-height: 70px;">

21
src/app/ui/plan-assistance/plan-assistance.component.scss

@ -77,6 +77,16 @@
}
}
}
//打开关闭左侧 车辆
.openLeft {
width: 300px;
transition: width 0.5s;
}
.closeLeft {
width: 0px;
min-width: 0px;
transition: width 0.5s;
}
//选中状态
.selectIcon {
@ -124,7 +134,16 @@
display: flex;
align-items: center;
justify-content: center;
p { flex: 1; text-align: center; line-height: 35px; }
p {
color: #fff;
flex: 1;
text-align: center;
line-height: 35px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
cursor: pointer;
}
}
.taskInput {
width: 100px;

32
src/app/ui/plan-assistance/plan-assistance.component.ts

@ -6955,7 +6955,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
},
Name: '水罐消防车',
FireTeamName: '八塘消防救援站', // 所属消防队
ReachTime: 240, // 到场剩余时间
ReachTime: 237, // 到场剩余时间
WaterYield: '12t', // 载水量
Foam: '0t', // 载泡沫
PeopleNum: 6, // 载人数
@ -7009,7 +7009,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
},
Name: '水罐泡沫消防车',
FireTeamName: '八塘消防救援站', // 所属消防队
ReachTime: 240, // 到场剩余时间
ReachTime: 249, // 到场剩余时间
WaterYield: '6t', // 载水量
Foam: '2t', // 载泡沫
PeopleNum: 6, // 载人数
@ -7063,7 +7063,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
},
Name: '水罐泡沫消防车',
FireTeamName: '八塘消防救援站', // 所属消防队
ReachTime: 240, // 到场剩余时间
ReachTime: 277, // 到场剩余时间
WaterYield: '3t', // 载水量
Foam: '1t', // 载泡沫
PeopleNum: 8, // 载人数
@ -7117,7 +7117,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
},
Name: '举高喷射消防车',
FireTeamName: '八塘消防救援站', // 所属消防队
ReachTime: 300, // 到场剩余时间
ReachTime: 310, // 到场剩余时间
WaterYield: '16t', // 载水量
Foam: '2t', // 载泡沫
PeopleNum: 4, // 载人数
@ -7171,7 +7171,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
},
Name: '水罐泡沫消防车',
FireTeamName: '龚州消防救援站', // 所属消防队
ReachTime: 660, // 到场剩余时间
ReachTime: 666, // 到场剩余时间
WaterYield: '6t', // 载水量
Foam: '2t', // 载泡沫
PeopleNum: 6, // 载人数
@ -7225,7 +7225,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
},
Name: '水罐泡沫消防车',
FireTeamName: '龚州消防救援站', // 所属消防队
ReachTime: 720, // 到场剩余时间
ReachTime: 721, // 到场剩余时间
WaterYield: '5t', // 载水量
Foam: '1t', // 载泡沫
PeopleNum: 6, // 载人数
@ -7279,7 +7279,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
},
Name: '水罐泡沫消防车',
FireTeamName: '龚州消防救援站', // 所属消防队
ReachTime: 960, // 到场剩余时间
ReachTime: 978, // 到场剩余时间
WaterYield: '3t', // 载水量
Foam: '1t', // 载泡沫
PeopleNum: 6, // 载人数
@ -7333,7 +7333,7 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
},
Name: '举高喷射消防车',
FireTeamName: '龚州消防救援站', // 所属消防队
ReachTime: 960, // 到场剩余时间
ReachTime: 999, // 到场剩余时间
WaterYield: '18t', // 载水量
Foam: '2t', // 载泡沫
PeopleNum: 4, // 载人数
@ -7364,11 +7364,6 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
}
];
bottomIsShow = false; // 底部车辆信息是否展示
rightIsShow = true; // 右侧楼层是否展示
rightSayIsShow = false; // 右侧语音是否展示
selectCarID = ''; // 选中车辆 样式
ngOnInit(): void {
const that = this;
window.setTimeout(() => {
@ -7387,8 +7382,12 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
this.workingArea.on('select', obj => {
// 选中素材属性注入函数
if (obj && obj.assetData && obj.assetData.ReachTime != undefined) {
this.selectCarID = JSON.parse(JSON.stringify( obj.assetData.Id || '' )); //选中样式 赋值ID
let linkCar = this.canvasData.getLinkCarName(obj) //连接车辆
let waterOccupy = this.canvasData.getWaterOccupyName(obj) //水源占用
obj.assetData.LinkCar = linkCar //连接车辆
obj.assetData.WaterOccupy = waterOccupy //水源占用
this.canvasData.selectCar = obj.assetData;
this.selectCarID = JSON.parse(JSON.stringify( obj.assetData.Id || '' ));
this.bottomIsShow = true;
}
});
@ -7399,6 +7398,11 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit {
});
}
bottomIsShow:boolean = false; // 底部车辆信息是否展示
rightIsShow:boolean = true; // 右侧楼层是否展示
rightSayIsShow:boolean = false; // 右侧语音是否展示
selectCarID:string = ''; // 选中车辆ID 选中效果css
// 开始绘制
plot(e) {
e == 0 ? this.workingArea.beginPaintingArrows() : this.workingArea.beginPaintPipeline();

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

@ -8,6 +8,7 @@
<div class="bigeditdeletebtn" *ngFor="let item of allBuildings;let key = index" (click)="checkedBuilding(item,key)" [ngClass]="{'buildingbtnchecked': checkedBuildingIndex==key}">
<span>{{item.name}}</span>
</div>
<div class="bigTalkBox" style="position: absolute;right: 26px;">
<mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon>
<div class="talkBox" *ngIf="isOpenTalk">
@ -29,6 +30,7 @@
</div>
</div>
</div>
</div>
<!--功能区 -->

22
src/app/ui/similar-plans/similar-plans.component.html

@ -2,6 +2,28 @@
<div class="backBtn" *ngIf="isResponsePlans" (click)="back()">
返回
</div>
<div class="bigTalkBox" style="position: absolute;right: 26px;top: 8px;" [ngClass]="{cssClass: !isResponsePlans}">
<mat-icon class="titleIcon" (click)="openTalkDiv()">volume_up</mat-icon>
<div class="talkBox" *ngIf="isOpenTalk">
<div class="btndiv">
<div>泵房</div>
<div>控制室</div>
</div>
<div class="bottomDiv">
<div>
<mat-icon>settings_voice</mat-icon>
</div>
<div>
按住说话
</div>
<div>
<mat-icon>search</mat-icon>
</div>
</div>
</div>
</div>
<div class="leisiTable" *ngIf="!isResponsePlans">
<table>
<thead >

72
src/app/ui/similar-plans/similar-plans.component.scss

@ -35,7 +35,7 @@
}
.backBtn{
position: absolute;
right: 30px;
right: 60px;
top: 8px;
width: 80px;
height: 30px;
@ -50,3 +50,73 @@
.backBtn:hover{
background-color: #0c4c69;
}
.bigTalkBox{
user-select: none;
.titleIcon{
font-size: 33px;
vertical-align: sub;
color: white;
cursor: pointer;
}
.talkBox{
width: 309px;
height: 326px;
border: 1px solid #30bbec;
background-color: #013a64;
opacity: .9 ;
position: absolute;
top: 32px;
right:4px;
z-index: 2000;
.btndiv{
div{
border-radius: 18px;
width: 70px;
height: 30px;
text-align: center;
line-height: 30px;
display: inline-block;
font-size: 13px;
color: white;
cursor: pointer;
}
div:nth-child(1){
background-color: #fe9400;
margin: 10px;
}
div:nth-child(2){
background-color: #f95e5a;
}
}
.bottomDiv{
position: absolute;
bottom:6px;
width: 100%;
height: 32px;
line-height: 32px;
display: flex;
color: white;
text-align: center;
mat-icon{
vertical-align: sub;
}
div:nth-child(1){
flex: 1;
}
div:nth-child(2){
flex: 6;
color: #409eff;
background: url('../../../assets/images/输入框.png');
background-size: 100% 100%;
}
div:nth-child(3){
flex: 1;
}
}
}
}
.cssClass{
top: -42px!important;
}

6
src/app/ui/similar-plans/similar-plans.component.ts

@ -13,7 +13,11 @@ export class SimilarPlansComponent implements OnInit {
ngOnInit(): void {
}
//打开说话框
isOpenTalk = false
openTalkDiv(){
this.isOpenTalk = !this.isOpenTalk
}
leisiYuan=[
{danweiName:"广西钦州志诚化工有限公司",year:"XXXX年",zhoahuo:"XXX",weizhi:"2#储罐",xiangjin:parseFloat("80%")},

Loading…
Cancel
Save