shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[新增]数据采集车辆布局

tangshan
邵佳豪 4 years ago
parent
037c53e993
commit
2b904c17db
7 changed files with 1309 additions and 784 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/app/data-collection/data-collection.module.ts
  2. 251
      src/app/data-collection/fire-force/fire-force.component.html
  3. 525
      src/app/data-collection/fire-force/fire-force.component.scss
  4. 1223
      src/app/data-collection/fire-force/fire-force.component.ts
  5. 4
      src/app/export-excel/export-excel.component.ts
  6. BIN
      src/assets/images/goback.png
  7. 5
      src/styles.scss

5
src/app/data-collection/data-collection.module.ts
Unescape View File

@ -47,7 +47,7 @@ import { AddWater, WaterCollectionComponent } from './water-collection/water-col
import { AddFireForce, FireForceComponent, ViewDetails } from './fire-force/fire-force.component';
import { AddLinkageForce, LinkageForcesComponent, ViewDetails2 } from './linkage-forces/linkage-forces.component';
import { NzTreeModule } from 'ng-zorro-antd/tree';
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
@NgModule({
declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent, AddWater, AddFireForce, ViewDetails, AddLinkageForce, ViewDetails2],
imports: [
@ -97,7 +97,8 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';
FormsModule,
ReactiveFormsModule,
DataCollectionRoutingModule,
NzTreeModule
NzTreeModule,
// NzTreeSelectModule
]
})
export class DataCollectionModule { }

251
src/app/data-collection/fire-force/fire-force.component.html
Unescape View File

@ -3,10 +3,12 @@
<div class="topbox">
<div class="add">
<div>
<mat-slide-toggle color="primary" (change)='slideChange($event)' checked labelPosition='before'>列表过滤</mat-slide-toggle>
<mat-slide-toggle color="primary" (change)='slideChange($event)' checked labelPosition='before'>列表过滤
</mat-slide-toggle>
</div>
<div>
<button (click)="reset()" style="width: 68px;margin-right: 12px;" mat-flat-button color="primary">重置</button>
<button (click)="reset()" style="width: 68px;margin-right: 12px;" mat-flat-button
color="primary">重置</button>
<button (click)="addFireForce()" style="width: 68px;" mat-flat-button color="primary">新增</button>
</div>
</div>
@ -15,7 +17,7 @@
<span>
关键字:
</span>
<input type="text" placeholder="请输入名称/类别" [(ngModel)]="searchForm.name"/>
<input type="text" placeholder="请输入名称/类别" [(ngModel)]="searchForm.name" />
</div>
<div class="inputbox">
<span>
@ -27,7 +29,9 @@
</select>
</div>
<div class="searchbtn">
<button (click)="searchList()" style="width: 100%;" mat-flat-button color="primary"><mat-icon style="width: 20px;height: 20px;font-size: 20px;">search</mat-icon>搜索</button>
<button (click)="searchList()" style="width: 100%;" mat-flat-button color="primary">
<mat-icon style="width: 20px;height: 20px;font-size: 20px;">search</mat-icon>搜索
</button>
</div>
</div>
</div>
@ -38,27 +42,33 @@
<span>完整度</span>
</div>
<div class="fireForceTree" id="fireForceTree" *ngIf="isTreeView">
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
<mat-tree-node (click)="selectTreeNode(node)" [ngClass]="{'selectedTreeNode': node.id == selectedFireForceId}" *matTreeNodeDef="let node;" matTreeNodePadding matTreeNodePaddingIndent='10px'>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node (click)="selectTreeNode(node)"
[ngClass]="{'selectedTreeNode': node.id == selectedFireForceId}" *matTreeNodeDef="let node;"
matTreeNodePadding matTreeNodePaddingIndent='10px'>
<button mat-icon-button disabled ></button>
<button mat-icon-button disabled></button>
<span class="nodename">{{node.name}}</span>
<div class="integrity">
<span class="integrityNum">
{{node.fireForceDetailInfo ? accMul(node.fireForceDetailInfo.integrityScore.toFixed(3),100,1) : 0}}%
{{node.fireForceDetailInfo ?
accMul(node.fireForceDetailInfo.integrityScore.toFixed(3),100,1) : 0}}%
</span>
<div class="integrityColorDiv" [style]="integrity(node.fireForceDetailInfo ? (node.fireForceDetailInfo.integrityScore.toFixed(2) * 100).toFixed(): 0)">
<div class="integrityColorDiv"
[style]="integrity(node.fireForceDetailInfo ? (node.fireForceDetailInfo.integrityScore.toFixed(2) * 100).toFixed(): 0)">
</div>
</div>
<div class="deletebtn" (click)="deleteFireForce(node,$event)"><mat-icon>highlight_off</mat-icon></div>
<div class="deletebtn" (click)="deleteFireForce(node,$event)">
<mat-icon>highlight_off</mat-icon>
</div>
</mat-tree-node>
<mat-tree-node (click)="selectTreeNode(node)" [ngClass]="{'selectedTreeNode': node.id == selectedFireForceId}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent='10px'>
<mat-tree-node (click)="selectTreeNode(node)"
[ngClass]="{'selectedTreeNode': node.id == selectedFireForceId}"
*matTreeNodeDef="let node;when: hasChild" matTreeNodePadding matTreeNodePaddingIndent='10px'>
<button mat-icon-button
matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
@ -66,27 +76,36 @@
<span class="nodename">{{node.name}}</span>
<div class="integrity">
<span class="integrityNum">
{{node.fireForceDetailInfo ? accMul(node.fireForceDetailInfo.integrityScore.toFixed(3),100,1) : 0}}%
{{node.fireForceDetailInfo ?
accMul(node.fireForceDetailInfo.integrityScore.toFixed(3),100,1) : 0}}%
</span>
<div class="integrityColorDiv" [style]="integrity(node.fireForceDetailInfo ? (node.fireForceDetailInfo.integrityScore.toFixed(2) * 100).toFixed(): 0)">
<div class="integrityColorDiv"
[style]="integrity(node.fireForceDetailInfo ? (node.fireForceDetailInfo.integrityScore.toFixed(2) * 100).toFixed(): 0)">
</div>
</div>
<div class="deletebtn" (click)="deleteFireForce(node,$event)"><mat-icon>highlight_off</mat-icon></div>
<div class="deletebtn" (click)="deleteFireForce(node,$event)">
<mat-icon>highlight_off</mat-icon>
</div>
</mat-tree-node>
</mat-tree>
</div>
<div class="fireForceList" *ngIf="!isTreeView">
<ul>
<li [ngClass]="{'selectedLi': item.id == selectedFireForceId}" *ngFor="let item of allFireForceList;let key = index" (click)="selectTreeNode(item)">
<li [ngClass]="{'selectedLi': item.id == selectedFireForceId}"
*ngFor="let item of allFireForceList;let key = index" (click)="selectTreeNode(item)">
<div class="name" [title]="item.name">{{item.name}}</div>
<div class="integrity">
<span class="integrityNum">
{{item.fireForceDetailInfo ? accMul(item.fireForceDetailInfo.integrityScore.toFixed(3),100,1) : 0}}%
{{item.fireForceDetailInfo ?
accMul(item.fireForceDetailInfo.integrityScore.toFixed(3),100,1) : 0}}%
</span>
<div class="integrityColorDiv" [style]="integrity(item.fireForceDetailInfo ? (item.fireForceDetailInfo.integrityScore.toFixed(2) * 100).toFixed(): 0)">
<div class="integrityColorDiv"
[style]="integrity(item.fireForceDetailInfo ? (item.fireForceDetailInfo.integrityScore.toFixed(2) * 100).toFixed(): 0)">
</div>
</div>
<div class="deletebtn" (click)="deleteFireForce(item,$event)"><mat-icon>highlight_off</mat-icon></div>
<div class="deletebtn" (click)="deleteFireForce(item,$event)">
<mat-icon>highlight_off</mat-icon>
</div>
</li>
</ul>
</div>
@ -94,14 +113,16 @@
</div>
<div class="mapbox">
<div class="mapcheckbox">
<mat-checkbox (change)="checkBoxChange()" [(ngModel)]="item.isChecked" color="primary" *ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
<mat-checkbox (change)="checkBoxChange()" [(ngModel)]="item.isChecked" color="primary"
*ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
</div>
<div id="map" class="map" style="overflow: hidden;">
<div id="container"></div>
<div class="gistopbox hidden" [ngClass]="{'show': isGisTopBox}">
<div class="inputBox">
<span>搜索: </span>
<input name="position" [(ngModel)]="searchTitle" id="tipinput" class="positionInput" type="text" autocomplete="off">
<input name="position" [(ngModel)]="searchTitle" id="tipinput" class="positionInput" type="text"
autocomplete="off">
</div>
</div>
</div>
@ -127,14 +148,16 @@
<div (click)="selectedTab(1)" [ngClass]="{'selectedBtn': tabIndex == 1}">
<span>详情</span>
</div>
<!-- <div (click)="selectedTab(2)" [ngClass]="{'selectedBtn': tabIndex == 2}">
<div (click)="selectedTab(2)" [ngClass]="{'selectedBtn': tabIndex == 2}">
<span>车辆装备</span>
</div> -->
<!-- <div (click)="selectedTab(3)" [ngClass]="{'selectedBtn': tabIndex == 3}">
</div>
<div (click)="selectedTab(3)" [ngClass]="{'selectedBtn': tabIndex == 3}">
<span>相关资料</span>
</div> -->
</div>
</div>
<div class="btnbox">
<div class="goback" (click)="goback()" *ngIf="carPageIndex == 1"><img
src="/assets/images/goback.png" alt=""> 返回</div>
<div class="uploadAttachment" *ngIf="tabIndex == 3">
<button mat-flat-button color="primary">
<mat-icon>attach_file</mat-icon>
@ -144,7 +167,6 @@
<input type="file" (change)='uploadAttachment($event)'>
</a>
</div>
<!-- <span class="state" *ngIf="selectedFireForce.contentVerify && selectedFireForce.contentVerify.verifyState == 3">(
<span *ngIf="selectedFireForce.contentVerify.operation == 2" style="color: red;">删除</span>
<span *ngIf="selectedFireForce.contentVerify.operation == 0" >新增</span>
@ -156,7 +178,9 @@
<span class="submitAudit" *ngIf="!selectedFireForce.contentVerify || selectedFireForce.contentVerify.verifyState == 5 || selectedFireForce.contentVerify.verifyState == 4" (click)="submitAudit()"><mat-icon>open_in_browser</mat-icon>提交审核</span>
<span class="state" *ngIf="selectedFireForce.contentVerify && selectedFireForce.contentVerify.verifyState == 3" (click)="cancelAudit()">撤销审核</span>
<span class="save state" *ngIf="!selectedFireForce.contentVerify || selectedFireForce.contentVerify.verifyState == 5 || selectedFireForce.contentVerify.verifyState == 4" (click)="save()"><mat-icon>save</mat-icon>保存</span> -->
<span class="close" (click)="close()"><mat-icon>close</mat-icon>关闭</span>
<span class="close" (click)="close()">
<mat-icon>close</mat-icon>关闭
</span>
</div>
</div>
<!-- 详情 -->
@ -170,7 +194,7 @@
<span style="color: red;">*</span>
队站名称:
</span>
<input [(ngModel)]="FireForceDetailInfo.stationName" type="text" style="width:88%;">
<input [(ngModel)]="FireForceDetailInfo.stationName" type="text" style="width:88%;">
</mat-grid-tile>
<mat-grid-tile colspan='2' rowspan='1'>
<span>
@ -194,7 +218,8 @@
<span>
备注:
</span>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 84%;" name="" id="" cols="30" rows="10"></textarea>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 84%;" name=""
id="" cols="30" rows="10"></textarea>
</mat-grid-tile>
</mat-grid-list>
<p>位置信息</p>
@ -209,11 +234,13 @@
<span>
经度:
</span>
<input [(ngModel)]="positionLngLat.x" disabled type="text" style="width: 26%;margin-right: 6%;">
<input [(ngModel)]="positionLngLat.x" disabled type="text"
style="width: 26%;margin-right: 6%;">
<span>
纬度:
</span>
<input [(ngModel)]="positionLngLat.y" disabled type="text" style="width: 26%;margin-right: 6%;">
<input [(ngModel)]="positionLngLat.y" disabled type="text"
style="width: 26%;margin-right: 6%;">
<!-- <button (click)="setPosition()" style="width:85px;text-align: center;" mat-flat-button color="primary">
<mat-icon style="width: 20px;height: 20px;font-size: 20px;">place</mat-icon>位置
</button> -->
@ -304,7 +331,7 @@
<span style="color: red;">*</span>
队站名称:
</span>
<input type="text" style="width:81%;" [(ngModel)]="FireForceDetailInfo.stationName">
<input type="text" style="width:81%;" [(ngModel)]="FireForceDetailInfo.stationName">
</mat-grid-tile>
<mat-grid-tile colspan='3' rowspan='1'>
<span>
@ -322,7 +349,8 @@
<span>
备注:
</span>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 84%;" name="" id="" cols="30" rows="10"></textarea>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 84%;" name=""
id="" cols="30" rows="10"></textarea>
</mat-grid-tile>
</mat-grid-list>
<p>位置信息</p>
@ -337,11 +365,13 @@
<span>
经度:
</span>
<input [(ngModel)]="positionLngLat.x" disabled type="text" style="width: 26%;margin-right: 6%;">
<input [(ngModel)]="positionLngLat.x" disabled type="text"
style="width: 26%;margin-right: 6%;">
<span>
纬度:
</span>
<input [(ngModel)]="positionLngLat.y" disabled type="text" style="width: 26%;margin-right: 6%;">
<input [(ngModel)]="positionLngLat.y" disabled type="text"
style="width: 26%;margin-right: 6%;">
<!-- <button (click)="setPosition()" style="width:85px;text-align: center;" mat-flat-button color="primary">
<mat-icon style="width: 20px;height: 20px;font-size: 20px;">place</mat-icon>位置
</button> -->
@ -370,7 +400,7 @@
</mat-grid-tile>
</mat-grid-list>
<p>联系方式</p>
<mat-grid-list cols="6" rowHeight="40px" >
<mat-grid-list cols="6" rowHeight="40px">
<mat-grid-tile colspan='3' rowspan='1'>
<span>
站长姓名:
@ -449,7 +479,7 @@
<div *ngIf="selectedFireForceLevel == 4 || selectedFireForceLevel == 5 || selectedFireForceLevel == 6">
<p>基本信息</p>
<mat-grid-list cols="6" rowHeight="40px">
<mat-grid-tile colspan='3' rowspan='1'>
<mat-grid-tile colspan='3' rowspan='1'>
<span>
<span style="color: red;">*</span>
队伍类型:
@ -479,8 +509,10 @@
<span>
站长:
</span>
<input [(ngModel)]="othercontactData[2].PropertyValue" class="smallwidth" type="text" placeholder="姓名">
<input [(ngModel)]="othercontactData[3].PropertyValue" class="smallwidth" type="text" placeholder="联系方式">
<input [(ngModel)]="othercontactData[2].PropertyValue" class="smallwidth" type="text"
placeholder="姓名">
<input [(ngModel)]="othercontactData[3].PropertyValue" class="smallwidth" type="text"
placeholder="联系方式">
</mat-grid-tile>
<mat-grid-tile colspan='3' rowspan='1'>
<span>
@ -492,8 +524,10 @@
<span>
负责人:
</span>
<input [(ngModel)]="othercontactData[4].PropertyValue" class="smallwidth" type="text" placeholder="姓名">
<input [(ngModel)]="othercontactData[5].PropertyValue" class="smallwidth" type="text" placeholder="联系方式">
<input [(ngModel)]="othercontactData[4].PropertyValue" class="smallwidth" type="text"
placeholder="姓名">
<input [(ngModel)]="othercontactData[5].PropertyValue" class="smallwidth" type="text"
placeholder="联系方式">
</mat-grid-tile>
<mat-grid-tile colspan='3' rowspan='1'>
<span>
@ -505,7 +539,8 @@
<span>
备注:
</span>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 82%;" name="" id="" cols="30" rows="10"></textarea>
<textarea [(ngModel)]="FireForceDetailInfo.remark" style="height: 80%;width: 82%;" name=""
id="" cols="30" rows="10"></textarea>
</mat-grid-tile>
</mat-grid-list>
<p>位置信息</p>
@ -520,11 +555,13 @@
<span>
经度:
</span>
<input [(ngModel)]="positionLngLat.x" disabled type="text" style="width: 26%;margin-right: 6%;">
<input [(ngModel)]="positionLngLat.x" disabled type="text"
style="width: 26%;margin-right: 6%;">
<span>
纬度:
</span>
<input [(ngModel)]="positionLngLat.y" disabled type="text" style="width: 26%;margin-right: 6%;">
<input [(ngModel)]="positionLngLat.y" disabled type="text"
style="width: 26%;margin-right: 6%;">
<!-- <button (click)="setPosition()" style="width:85px;text-align: center;" mat-flat-button color="primary">
<mat-icon style="width: 20px;height: 20px;font-size: 20px;">place</mat-icon>位置
</button> -->
@ -568,27 +605,127 @@
</div>
</div>
<!-- 车辆 -->
<!-- <div class="contant" *ngIf="tabIndex == 2">
车辆
</div> -->
<div class="contant" *ngIf="tabIndex == 2">
<div class="carOne carcontent" *ngIf="carPageIndex == 0">
<div class="cartopbox">
<div class="add">
<div>
<mat-slide-toggle color="primary" (change)='carslideChange($event)' checked
labelPosition='before'>列表过滤</mat-slide-toggle>
</div>
<div>
<button (click)="reset()" style="width: 68px;margin-right: 12px;" mat-flat-button
color="primary">重置</button>
<button (click)="addFireForce()" style="width: 68px;" mat-flat-button
color="primary">新增</button>
</div>
</div>
<div class="searchbox" *ngIf="isCarCheckedOfSearchDiv">
<div class="inputbox">
<span>
关键字:
</span>
<input type="text" placeholder="请输入名称/车牌号" [(ngModel)]="carSearchForm.name" />
</div>
<div class="inputbox">
<span>
所属队站:
</span>
<input type="text" placeholder="请选择" [(ngModel)]="carSearchForm.organization" />
</div>
<div class="inputbox">
<span>
车辆类别:
</span>
<!-- <nz-tree-select style="width: 250px" [nzExpandedKeys]="expandKeys" [nzNodes]="nodes"
nzShowSearch nzPlaceHolder="Please select" [(ngModel)]="value"
(ngModelChange)="onChange($event)"></nz-tree-select> -->
</div>
<div class="inputbox">
<span>
完整度:
</span>
<select class="shortselect" [(ngModel)]="carSearchForm.integrityNum"
[ngClass]="{'gray': carSearchForm.integrityNum == ''}">
<option value='' selected disabled style='display:none;'>请选择</option>
<option *ngFor="let item of listIntegrityNum" [value]="item.id">{{item.name}}
</option>
</select>
<div class="searchbtn">
<button (click)="searchList()" style="width: 100%;" mat-flat-button color="primary">
<mat-icon style="width: 20px;height: 20px;font-size: 20px;">search</mat-icon>搜索
</button>
</div>
</div>
</div>
</div>
<div class="carList">
<table>
<tr>
<td>车辆名称</td>
<td>所属队站</td>
<td>完整度</td>
<td></td>
</tr>
<tr *ngFor="let item of carsList" class="caritem" (click)="openCarDetails(item)">
<td class="td1">{{item.name}}</td>
<td class="td2">{{item.organization}}</td>
<td>
<div class="integrity">
<span class="integrityNum">
{{item.integrityScore ? accMul(item.integrityScore.toFixed(3),100,1) : 0}}%
</span>
<div class="integrityColorDiv"
[style]="integrity(item.integrityScore ? (item.integrityScore.toFixed(2) * 100).toFixed(): 0)">
</div>
</div>
</td>
<td>
<mat-icon class="deleteFile">highlight_off</mat-icon>
</td>
</tr>
</table>
</div>
<div class="pagingDevice">
<mat-paginator [length]="dataLength" [pageSize]="16" (page)="chagePage($event)"></mat-paginator>
</div>
</div>
<div class="carTwo" *ngIf="carPageIndex == 1">
<p>基本信息</p>
<div>
<div>
<span><span style="color: red;">*</span>车辆类别</span>
<select class="shortselect" [(ngModel)]="carSearchForm.integrityNum"
[ngClass]="{'gray': carSearchForm.integrityNum == ''}">
<option value='' selected disabled style='display:none;'>请选择</option>
<option *ngFor="let item of listIntegrityNum" [value]="item.id">{{item.name}}</option>
</select>
</div>
</div>
<p>作战用信息</p>
<p>车载灭火剂</p>
<p>消防器材</p>
</div>
</div>
<!-- 相关资料 -->
<div class="contant" *ngIf="tabIndex == 3">
<div class="fileDivBox" *ngFor="let item of AttachmentArr" >
<div class="fileDivBox" *ngFor="let item of AttachmentArr">
<mat-icon class="deleteFile" (click)="deleteFile(item,$event)">highlight_off</mat-icon>
<div class="imgbox">
<img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'png'
|| item.fileName.split('.')[item.fileName.split('.').length-1] == 'jpg'
|| item.fileName.split('.')[item.fileName.split('.').length-1] == 'JPG'"
class="thumbnailImg" src="/api/Objects/PlanPlatform/{{item.objectName}}" alt="">
|| item.fileName.split('.')[item.fileName.split('.').length-1] == 'JPG'" class="thumbnailImg"
src="/api/Objects/PlanPlatform/{{item.objectName}}" alt="">
<img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'docx'
|| item.fileName.split('.')[item.fileName.split('.').length-1] == 'doc'"
class="thumbnailImg" src="/assets/images/word.jpg" alt="">
|| item.fileName.split('.')[item.fileName.split('.').length-1] == 'doc'" class="thumbnailImg"
src="/assets/images/word.jpg" alt="">
<img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'pdf'"
class="thumbnailImg" src="/assets/images/pdf.jpg" alt="">
class="thumbnailImg" src="/assets/images/pdf.jpg" alt="">
<img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'txt'"
class="thumbnailImg" src="/assets/images/txt.jpg" alt="">
class="thumbnailImg" src="/assets/images/txt.jpg" alt="">
<img *ngIf="item.fileName.split('.')[item.fileName.split('.').length-1] == 'mp4'"
class="thumbnailImg" src="/assets/images/vedio.jpg" alt="">
class="thumbnailImg" src="/assets/images/vedio.jpg" alt="">
</div>
<span [title]="item.fileName">{{item.fileName}}</span>
<button (click)="clickFile(item)" class="btn btn1" mat-flat-button color="primary">查看</button>

525
src/app/data-collection/fire-force/fire-force.component.scss
Unescape View File

@ -1,7 +1,7 @@
.box{
.box {
width: 100%;
height: 100%;
background-color: #F2F4F6;
background-color: #f2f4f6;
display: flex;
box-sizing: border-box;
padding: 10px;
@ -9,43 +9,43 @@
font-weight: 400;
color: #000000;
}
.listbox{
.listbox {
width: 400px;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
.topbox{
.topbox {
max-height: 200px;
box-sizing: border-box;
padding: 10px 22px 22px;
.add{
.add {
height: 36px;
line-height: 36px;
display: flex;
justify-content: space-between;
}
.searchbox{
.inputbox{
.searchbox {
.inputbox {
width: 100%;
height: 36px;
font-size: 14px;
line-height: 36px;
margin: 10px 0;
display: flex;
span{
span {
margin-right: 5px;
}
select,input{
select,
input {
flex: 1;
background-color: #F2F4F6;
background-color: #f2f4f6;
border: 0;
border-radius: 5px;
box-sizing: border-box;
padding:0 8px;
padding: 0 8px;
}
.gray{
.gray {
color: gray;
}
// input::-moz-placeholder {
@ -61,12 +61,12 @@
}
}
}
.contantbox{
.contantbox {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
.title{
.title {
display: flex;
justify-content: space-between;
width: 100%;
@ -74,25 +74,25 @@
padding: 0 33px 0 22px;
height: 36px;
line-height: 36px;
span{
span {
font-size: 14px;
font-weight: 500;
}
}
.fireForceTree{
.fireForceTree {
flex: 1;
overflow-y: auto;
.nodename{
.nodename {
flex: 1;
overflow: hidden;
text-overflow:ellipsis
text-overflow: ellipsis;
}
.integrity{
.integrity {
width: 100px;
height: 16px;
position: relative;
background-color: #F2F4F6;
.integrityNum{
background-color: #f2f4f6;
.integrityNum {
position: absolute;
left: 50%;
top: 50%;
@ -101,23 +101,23 @@
font-size: 13px;
cursor: default;
}
.integrityColorDiv{
.integrityColorDiv {
height: 100%;
}
}
.mat-tree-node{
.mat-tree-node {
cursor: pointer;
}
.selectedTreeNode{
.selectedTreeNode {
background-color: #d2eafd;
}
.mat-tree-node:hover{
background-color: #d2eafd;
.mat-tree-node:hover {
background-color: #d2eafd;
}
.deletebtn{
.deletebtn {
width: 26px;
text-align: center;
mat-icon{
mat-icon {
width: 20px;
height: 20px;
cursor: pointer;
@ -125,15 +125,15 @@
vertical-align: middle;
color: rgba(49, 46, 46, 0.144);
}
mat-icon:hover{
mat-icon:hover {
color: #000;
}
}
}
.fireForceList{
.fireForceList {
flex: 1;
overflow-y: auto;
li{
li {
cursor: pointer;
width: 100%;
height: 36px;
@ -141,24 +141,24 @@
display: flex;
align-items: center;
font-size: 14px;
div{
div {
float: left;
box-sizing: border-box;
}
.name{
.name {
text-align: left;
width: 60%;
padding-left: 22px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.integrity{
.integrity {
height: 58%;
width: 32%;
position: relative;
background-color: #F2F4F6;
.integrityNum{
background-color: #f2f4f6;
.integrityNum {
position: absolute;
left: 50%;
top: 50%;
@ -167,14 +167,14 @@
font-size: 13px;
cursor: default;
}
.integrityColorDiv{
.integrityColorDiv {
height: 100%;
}
}
.deletebtn{
.deletebtn {
flex: 1;
text-align: center;
mat-icon{
mat-icon {
width: 20px;
height: 20px;
cursor: pointer;
@ -182,102 +182,100 @@
vertical-align: text-top;
color: rgba(49, 46, 46, 0.144);
}
mat-icon:hover{
mat-icon:hover {
color: #000;
}
}
}
li:hover{
li:hover {
background-color: #b3d3ee;
}
.selectedLi{
.selectedLi {
background-color: #b3d3ee;
}
}
.paginator{
.paginator {
height: 56px;
width: 100%;
}
}
}
.mapbox{
.mapbox {
flex: 1;
margin-left: 10px;
background-color: #fff;
display: flex;
flex-direction: column;
.mapcheckbox{
.mapcheckbox {
width: 100%;
height: 50px;
line-height: 50px;
mat-checkbox{
margin-right:60px;
mat-checkbox {
margin-right: 60px;
font-size: 15px;
}
mat-checkbox:nth-child(1){
mat-checkbox:nth-child(1) {
margin-left: 20px;
}
}
#map{
#map {
flex: 1;
position: relative;
#container{
#container {
width: 100%;
height: 100%;
}
.gistopbox{
.gistopbox {
position: absolute;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
border-radius: 5px;
top: 3px;
width: 30%;
height:40px;
background: #FFFFFF;
height: 40px;
background: #ffffff;
display: flex;
align-items: center;
cursor: default;;
.inputBox{
cursor: default;
.inputBox {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: 14px;
.positionInput{
.positionInput {
border: 0;
border-radius: 6px;
width: 80%;
height: 28px;
background: #F2F2F2;
background: #f2f2f2;
margin-left: 8px;
box-sizing: border-box;
padding-left: 10px;
}
}
}
.hidden{
.hidden {
opacity: 0;
z-index: -1;
}
.show{
.show {
opacity: 1;
z-index: 1;
}
}
.detailsbox{
.detailsbox {
width: 100%;
height:500px;
height: 500px;
position: relative;
transition: height 0.5s;
.putDown{
.putDown {
position: absolute;
right: 0;
top: -40px;
cursor: pointer;
}
.tabsbox{
.tabsbox {
// margin-top: 10px;
width: 100%;
height: 40px;
@ -287,28 +285,28 @@
display: flex;
justify-content: space-between;
font-size: 15px;
.tabs{
div{
.tabs {
div {
float: left;
width: 120px;
text-align: center;
cursor: pointer;
color: #000000;
opacity: 0.4;
border-right: 1px solid #F2F4F6;
border-right: 1px solid #f2f4f6;
}
.selectedBtn{
background-color: #2196F3;
.selectedBtn {
background-color: #2196f3;
color: #fff;
opacity: 1;
}
}
.btnbox{
.btnbox {
display: flex;
align-items: center;
flex: 1;
justify-content: flex-end;
.uploadAttachment{
.uploadAttachment {
display: inline-block;
margin-right: 20px;
width: 120px;
@ -316,103 +314,114 @@
height: 28px;
line-height: 28px;
position: relative;
button{
button {
width: 100%;
height: 28px;
line-height: 28px;
mat-icon{
mat-icon {
transform: rotate(25deg);
font-size: 20px;
width: 20px;
height: 20px;
}
}
.a-upload{
display: inline-block;
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 100%;
opacity: 0;
input{
.a-upload {
display: inline-block;
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 100%;
opacity: 0;
input {
width: 100%;
height: 100%;
cursor: pointer;
}
}
}
span{
}
}
}
span {
display: inline-block;
cursor: pointer;
color: #2196F3;
mat-icon{
color: #2196f3;
mat-icon {
vertical-align: sub;
font-size: 20px;
width: 20px;
height: 20px;
}
}
span:hover{
// text-decoration: underline;
}
.state{
margin-right:30px;
.state {
margin-right: 30px;
}
.submitAudit{
margin-right:30px;
.submitAudit {
margin-right: 30px;
}
.close{
.close {
margin-right: 30px;
}
.goback{
cursor: pointer;
display: flex;
align-items: center;
color: #2196f3;
img{
width: 14px;
height: 14px;
margin-right: 5px;
}
margin-right: 12px;
}
}
}
.contant{
.contant {
width: 100%;
height:460px;
height: 460px;
overflow-y: auto;
p{
color: #2196F3;
background-color: #F2F4F6;
p {
color: #2196f3;
background-color: #f2f4f6;
height: 33px;
line-height: 33px;
box-sizing: border-box;
padding-left: 20px;
font-size: 15px;
}
span{
span {
font-size: 15px;
}
input,select{
input,
select {
height: 30px;
line-height: 30px;
box-sizing: border-box;
padding: 0 12px;
width: 60%;
margin-left: 5px;
border: 1px solid #EBEBEB;
border: 1px solid #ebebeb;
border-radius: 5px;
}
textarea{
textarea {
width: 89%;
margin-left: 5px;
height: 85%;
border: 1px solid #EBEBEB;
border: 1px solid #ebebeb;
border-radius: 5px;
}
.longinput{
.longinput {
width: 74%;
}
.unitDiv{
.unitDiv {
width: 60%;
position: relative;
input,select{
input,
select {
width: 100%;
box-sizing: border-box;
padding-right: 50px;
}
.unit{
.unit {
position: absolute;
right: 13px;
top: 4px;
@ -420,14 +429,14 @@
opacity: 0.4;
}
}
.smallwidth{
.smallwidth {
width: 30%;
}
// 相关资料
.fileDivBox{
.fileDivBox {
position: relative;
float: left;
border: 1px solid #EBEBEB;
border: 1px solid #ebebeb;
width: 160px;
height: 162px;
box-sizing: border-box;
@ -437,29 +446,29 @@
margin: 12px;
align-items: center;
cursor: pointer;
.imgbox{
.imgbox {
width: 134px;
height: 110px;
display: flex;
justify-content: center;
align-items: center;
.thumbnailImg{
.thumbnailImg {
width: 134px;
height: 110px;
}
}
span{
span {
width: 100%;
text-align: center;
margin-top: 5px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: gray;
color: gray;
font-size: 14px;
}
.deleteFile{
.deleteFile {
position: absolute;
right: 0;
top: 0;
@ -468,54 +477,179 @@
font-size: 18px;
display: none;
}
.btn{
.btn {
position: absolute;
height: 30px;
line-height: 30px;
font-size: 14px;
display: none;
}
.btn1{
.btn1 {
top: 37px;
}
.btn2{
.btn2 {
top: 78px;
}
}
.fileDivBox:hover{
.fileDivBox:hover {
border: 1px solid #000;
.deleteFile{
.deleteFile {
display: block;
}
.deleteFile:hover{
.deleteFile:hover {
color: red;
}
.btn{
.btn {
display: block;
}
}
//车辆头部
.cartopbox {
max-height: 200px;
box-sizing: border-box;
padding: 10px 22px;
.add {
height: 36px;
line-height: 36px;
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.searchbox {
display: flex;
flex-wrap: wrap;
.inputbox {
width: 50%;
height: 40px;
font-size: 14px;
line-height: 40px;
margin: 5px 0;
display: flex;
justify-content: flex-end;
align-items: center;
span {
margin-right: 5px;
overflow: hidden; /*超出部分隐藏*/
white-space: nowrap; /*不换行*/
text-overflow: ellipsis; /*超出部分文字以...显示*/
}
select,
input {
height: 100%;
width: 85%;
background-color: #f2f4f6;
border: 0;
border-radius: 5px;
box-sizing: border-box;
padding: 0 8px;
}
.shortselect{
width: 68.5%;
}
.searchbtn{
margin-left: 20px;
}
.gray {
color: gray;
}
}
}
}
}
.masklayer{
.carcontent{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.carList{
flex: 1;
overflow-y: auto;
box-sizing: border-box;
padding: 10px 22px;
border: 1px solid #F2F4F6;
table{
width: 100%;
border-spacing:0px;
tr{
height: 33px;
width: 100%;
td:nth-child(1){
width: 46%;
}
td:nth-child(2){
width: 26%;
}
td:nth-child(3){
width: 26%;
}
td:nth-child(4){
width: 2%;
display: flex;
align-items: center;
height: 33px;
}
td{
border: none;
.integrity {
height: 18px;
width: 95%;
position: relative;
background-color: #f2f4f6;
.integrityNum {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: black;
font-size: 13px;
cursor: default;
}
.integrityColorDiv {
height: 100%;
}
}
.deleteFile{
cursor: pointer;
}
}
.td1,.td2{
color: #2196F3;
}
}
.caritem:hover{
border: 0px;
cursor: default;
background-color: #d2eafd;
}
}
}
.pagingDevice{
width: 100%;
height: 40px;
}
}
.masklayer {
position: absolute;
left: 0;
top: 0;
z-index: 2000;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
background: rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
span{
span {
font-size: 14px;
margin-top: 5px;
}
.progressbar{
.progressbar {
width: 15%;
}
.cancelbtn{
.cancelbtn {
height: 32px;
line-height: 32px;
font-size: 14px;
@ -523,8 +657,8 @@
}
}
}
.noHeight{
.tabsbox{
.noHeight {
.tabsbox {
margin-top: 10px;
}
height: 0px;
@ -532,34 +666,33 @@
}
}
.addWaterBox{
.addWaterBox {
width: 260px;
height: 284px;
display: flex;
flex-direction: column;
.topbox{
.topbox {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #2196F3;
background-color: #2196f3;
text-align: center;
color: #FFFFFF;
color: #ffffff;
font-size: 15px;
}
.contant{
.contant {
flex: 1;
box-sizing: border-box;
padding: 0 30px;
display: flex;
flex-direction: column;
justify-content: space-around;
div{
div {
width: 100%;
height: 36px;
line-height: 36px;
text-align: center;
background-color: #F2F4F6;
background-color: #f2f4f6;
font-size: 14px;
cursor: pointer;
border: 1px solid #fff;
@ -567,25 +700,25 @@
display: flex;
justify-content: center;
align-items: center;
img{
img {
margin-right: 3px;
}
}
.selectedDiv{
background-color: #2196F3;
.selectedDiv {
background-color: #2196f3;
color: #fff;
border: 1px solid #2196F3;
border: 1px solid #2196f3;
}
}
.btnbox{
.btnbox {
width: 100%;
height: 50px;
box-sizing: border-box;
padding: 0px 30px;
display: flex;
align-items: flex-start;;
align-items: flex-start;
justify-content: space-between;
button{
button {
width: 80px;
height: 36px;
line-height: 36px;
@ -593,105 +726,107 @@
}
}
@media screen and (max-width:1400px){
.box{
@media screen and (max-width: 1400px) {
.box {
padding: 5px;
font-size: 14px;
}
.listbox{
.listbox {
width: 310px;
.contantbox{
.waterList{
li{
.address{
.contantbox {
.waterList {
li {
.address {
width: 50%;
}
.integrity{
.integrity {
width: 36%;
}
}
}
}
}
.mapbox{
.mapcheckbox{
.mapbox {
.mapcheckbox {
height: 30px;
line-height: 30px;
}
#map{
.gistopbox{
#map {
.gistopbox {
width: 43%;
}
}
.detailsbox{
height:338px;
.detailsbox {
height: 338px;
transition: height 0.5s;
.tabsbox{
.tabsbox {
// margin-top: 5px;
height: 38px;
line-height: 38px;
.tabs{
div{
.tabs {
div {
width: 90px;
}
}
.btnbox{
.uploadAttachment{
.btnbox {
.uploadAttachment {
margin-right: 12px;
width: 80px;
button{
mat-icon{
button {
mat-icon {
display: none;
}
}
}
.state{
margin-right:12px;
}
.submitAudit{
margin-right:12px;
.state {
margin-right: 12px;
}
.submitAudit {
margin-right: 12px;
}
.close{
.close {
margin-right: 12px;
}
}
}
.contant{
height:300px;
.contant {
height: 300px;
p{
p {
padding-left: 20px;
font-size: 14px;
}
span{
span {
font-size: 14px;
}
input,select{
input,
select {
width: 50%;
}
textarea{
textarea {
width: 87%;
}
.longinput{
.longinput {
width: 66%;
}
.unitDiv{
.unitDiv {
width: 50%;
position: relative;
}
.setPositionBtn{
width:85px;
.setPositionBtn {
width: 85px;
text-align: center;
margin-right: 8px;
mat-icon{
mat-icon {
display: none;
}
}
}
}
.noHeight{
.tabsbox{
.noHeight {
.tabsbox {
margin-top: 10px;
}
height: 0px;

1223
src/app/data-collection/fire-force/fire-force.component.ts
View File

File diff suppressed because it is too large Load Diff

4
src/app/export-excel/export-excel.component.ts
Unescape View File

@ -17,11 +17,11 @@ export class ExportExcelComponent implements OnInit {
responseType: 'blob' as 'json'
};
this.http.get('/api/StatisticsAnalysis/ExportToExcel',httpOptions).subscribe((data:any) => {
// // 文件名中有中文 则对文件名进行转码
// 文件名中有中文 则对文件名进行转码
const link = document.createElement('a');
const blob = new Blob([data], {type: 'application/vnd.ms-excel'});
link.setAttribute('href', window.URL.createObjectURL(blob));
link.setAttribute('download', '统计信息'+'.xlsx');
link.setAttribute('download', '统计信息'+'.xls');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();

BIN
src/assets/images/goback.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 426 B

5
src/styles.scss
Unescape View File

@ -2,6 +2,8 @@
@import './app/theme.scss';
@import "./app/ngZorroTree.css"; /* 引入组件样式 */
// @import "~ng-zorro-antd/select/style/index.min.css"; /* 引入组件样式 */
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/tree-select/style/index.min.css"; /* 引入组件样式 */
@font-face
{
font-family: Regular;
@ -336,3 +338,6 @@ td{
background: #666;
}
}
.mat-paginator-container{
min-height: 40px!important;
}
Write Preview
Loading…
Cancel
Save