shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]分辨率适配

dev
邵佳豪 3 years ago
parent
e610d254f0
commit
cfadf76f5b
24 changed files with 2419 additions and 354 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. 53
      src/app/app.component.ts
  2. 8
      src/app/pages/criminal-records-admin/criminal-records-admin.component.html
  3. 327
      src/app/pages/criminal-records-admin/criminal-records-admin.component.scss
  4. 15
      src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
  5. 8
      src/app/pages/criminal-records/criminal-records.component.html
  6. 309
      src/app/pages/criminal-records/criminal-records.component.scss
  7. 17
      src/app/pages/criminal-records/criminal-records.component.ts
  8. 26
      src/app/pages/disposition/disposition.component.scss
  9. 701
      src/app/pages/home-page/home-page.component.scss
  10. 33
      src/app/pages/home-page/home-page.component.ts
  11. 118
      src/app/pages/home/home.component.scss
  12. 3
      src/app/pages/home/home.component.ts
  13. 325
      src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss
  14. 2
      src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts
  15. 101
      src/app/pages/plan-admin/plan-admin.component.scss
  16. 156
      src/app/pages/today-warning-admin/today-warning-admin.component.scss
  17. 4
      src/app/pages/today-warning-admin/today-warning-admin.component.ts
  18. 222
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
  19. 162
      src/app/pages/today-warning/today-warning.component.scss
  20. 4
      src/app/pages/today-warning/today-warning.component.ts
  21. 5
      src/app/system-management/navigation/navigation.component.scss
  22. 51
      src/app/ui/title/title.component.scss
  23. 13
      src/theme.less

53
src/app/app.component.ts
Unescape View File

@ -28,14 +28,8 @@ export class AppComponent {
// })
// }
// let t = this;
// if(t._getSystem()) { //判断设备，目前只在windows系统下校正浏览器缩放比例
// //初始化页面校正浏览器缩放比例
// t._correct();
// //开启监听页面缩放
// t._watch();
// }
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
}
ngAfterViewInit(): void {
@ -43,48 +37,5 @@ export class AppComponent {
}
_getSystem() {
let flag = false;
var agent = navigator.userAgent.toLowerCase();
// var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
// if(isMac) {
// return false;
// }
//现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
if (agent.indexOf("windows") >= 0) {
return true;
}
}
//获取页面缩放比例
// _getDevicePixelRatio() {
// let t = this;
// }
//监听方法兼容写法
_addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
//校正浏览器缩放比例
_correct() {
let t = this;
console.log('devicePixelRatio',window.devicePixelRatio)
//页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
document.getElementsByTagName('body')[0].style['zoom'] = String(1 / window.devicePixelRatio);
sessionStorage.setItem('zoom',String(1 / window.devicePixelRatio))
}
//监听页面缩放
_watch() {
let t = this;
t._addHandler(window, 'resize', function () { //注意这个方法是解决全局有两个window.resize
//重新校正
t._correct()
})
}
}

8
src/app/pages/criminal-records-admin/criminal-records-admin.component.html
Unescape View File

@ -146,13 +146,13 @@
<div class="tbody" id="tbody">
<div nz-row class="tr" *ngFor="let item of list">
<div nz-col nzSpan="1" style="text-align: right;">
<img *ngIf="item.violation.level == 1" style="width: 36px;" src="../../../assets/images/level1.png"
<img *ngIf="item.violation.level == 1" src="../../../assets/images/level1.png"
alt="">
<img *ngIf="item.violation.level == 2" style="width: 36px;" src="../../../assets/images/level2.png"
<img *ngIf="item.violation.level == 2" src="../../../assets/images/level2.png"
alt="">
<img *ngIf="item.violation.level == 3" style="width: 36px;" src="../../../assets/images/level3.png"
<img *ngIf="item.violation.level == 3" src="../../../assets/images/level3.png"
alt="">
<img *ngIf="item.violation.level == 4" style="width: 36px;" src="../../../assets/images/level4.png"
<img *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png"
alt="">
</div>
<div nz-col nzSpan="2">

327
src/app/pages/criminal-records-admin/criminal-records-admin.component.scss
Unescape View File

@ -18,12 +18,17 @@
display: flex;
justify-content: space-around;
.searchParams,
.btn {
margin: 0 3px;
}
.searchParams {
width: 22%;
flex: 5;
}
.btn {
width: 5%;
flex: 1;
}
nz-select {
@ -32,7 +37,7 @@
nz-range-picker {
background-color: rgba(0, 0, 0, 0);
width: 97%;
width: 100%;
}
}
@ -53,6 +58,7 @@
padding: 0 28px;
margin: 13px 0;
position: relative;
.titlebox {
width: 100%;
height: 100%;
@ -88,16 +94,19 @@
font-family: titlefont;
cursor: pointer;
}
span:nth-child(1){
span:nth-child(1) {
margin-left: 12px;
}
.grey{
.grey {
color: #68829F;
}
}
}
}
.packup {
position: absolute;
right: 33px;
@ -110,13 +119,15 @@
width: 100%;
display: flex;
justify-content: center;
.chartname{
.chartname {
position: absolute;
left: 20px;
top: 12px;
}
.chart {
width: 97%;
width: 98%;
height: 350px;
box-sizing: border-box;
padding: 0 10px;
@ -125,6 +136,7 @@
div {
display: flex;
flex-direction: column;
span {
font-family: titlefont;
display: flex;
@ -139,16 +151,19 @@
}
}
.leftbox {
width: 360px;
position: relative;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
margin-right: 16px;
.centerContent {
position: absolute;
top: 42%;
left: 26%;
left: 50%;
transform: translateX(-50%);
width: 170px;
div {
@ -176,6 +191,7 @@
position: relative;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
.btnbox {
position: absolute;
right: 28px;
@ -246,6 +262,9 @@
cursor: pointer;
}
}
img{
width: 36px;
}
}
}
@ -264,3 +283,295 @@
}
}
// 适配125%
@media screen and (max-height: 750px) {
.search {
box-sizing: border-box;
padding: 0 30px;
height: 32px;
margin-bottom: 12px;
form {
width: 100%;
height: 32px;
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.title {
height: 42px;
padding: 0 20px;
margin: 8px 0;
.titlebox {
width: 100%;
height: 100%;
display: flex;
align-items: center;
img {
width: 46px;
height: 46px;
}
.content {
height: 36px;
.contentitem {
width: 100%;
height: 25px;
span {
margin-left: 6px;
font-size: 16px;
}
span:nth-child(1) {
margin-left: 8px;
}
}
}
}
.packup {
position: absolute;
right: 33px;
top: 4px;
cursor: pointer;
}
}
.chartsbox {
width: 100%;
height: 43%;
.chartname {
position: absolute;
left: 20px;
top: 12px;
}
.chart {
height: 100%;
div {
span {
font-size: 14px;
}
div {
flex: 1;
}
}
.leftbox {
width: 300px;
box-shadow: 0 0 20px 0px #1a7fd7 inset;
margin-right: 12px;
.centerContent {
.num {
color: #FFFFFF;
font-size: 42px;
text-shadow: 0px 0px 16px #3A9AFF;
font-weight: bold;
height: 49px;
line-height: 50px;
}
}
}
.rightbox {
flex: 1;
position: relative;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
.btnbox {
position: absolute;
right: 28px;
top: 12px;
display: flex;
flex-direction: row;
z-index: 999;
.rankingBtn {
margin-right: 12px;
}
}
}
}
}
.tablebox {
.table {
.th {
height: 32px;
line-height: 32px;
font-size: 12px!important;
}
.tbody {
.tr {
height: 32px;
line-height: 32px;
div{
font-size: 12px!important;
}
img{
width: 32px;
}
}
}
}
}
}
}
// 适配150%
@media screen and (max-height: 600px) {
.search {
box-sizing: border-box;
padding: 0 22px;
height: 32px;
margin-bottom: 6px;
form {
width: 100%;
height: 32px;
}
}
.content {
.title {
height: 36px;
padding: 0 20px;
margin: 3px 0;
.titlebox {
width: 100%;
height: 100%;
display: flex;
align-items: center;
img {
width: 36px;
height: 36px;
}
.content {
height: 30px;
.contentitem {
width: 100%;
height: 22px;
span {
margin-left: 6px;
font-size: 13px;
}
span:nth-child(1) {
margin-left: 12px;
}
}
}
}
.packup {
position: absolute;
right: 33px;
top: 2px;
cursor: pointer;
}
}
.chartsbox {
width: 100%;
height: 40%;
.chartname {
position: absolute;
left: 20px;
top: 12px;
}
.chart {
height: 100%;
div {
span {
font-size: 14px;
}
div {
flex: 1;
}
}
.leftbox {
width: 260px;
box-shadow: 0 0 20px 0px #1a7fd7 inset;
margin-right: 8px;
.centerContent {
.num {
color: #FFFFFF;
font-size: 32px;
text-shadow: 0px 0px 12px #3A9AFF;
font-weight: bold;
height: 42px;
line-height: 42px;
}
}
}
.rightbox {
box-shadow: 0 0 22px 0px #1a7fd7 inset;
.btnbox {
position: absolute;
right: 28px;
top: 12px;
display: flex;
flex-direction: row;
z-index: 999;
.rankingBtn {
margin-right: 8px;
}
}
}
}
}
.tablebox {
.table {
.th {
height: 28px;
line-height: 28px;
font-size: 10px!important;
}
.tbody {
.tr {
height: 28px;
line-height: 28px;
div{
font-size: 10px!important;
}
img{
width: 30px;
}
}
}
}
}
}
}

15
src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
Unescape View File

@ -33,9 +33,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
{
// name: 'Access From',
type: 'pie',
radius: [88, 116],//内半径外，外半径
radius: ['58%', '75%'],//内半径外，外半径
left: '0',
top: '8%',
top: '9%',
avoidLabelOverlap: false,//防止标签重叠策略
label: {//每一个标签外网延伸的引导说明
show: false,
@ -438,7 +438,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
ngAfterViewInit(): void {
fromEvent(this.element.nativeElement.querySelector(`#tbody`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe((event: any) => { //监听 DOM 滚动事件
if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
if(this.totalCount > this.list.length){
if (this.totalCount > this.list.length) {
console.log('需要加载数据了', event)
this.SkipCount = String(Number(this.SkipCount) + 50)
this.getViolateRecordList()
@ -529,10 +529,14 @@ export class CriminalRecordsAdminComponent implements OnInit {
look(item) {
// GetOutOfLineDetailsComponent
// OilUnloadingProcessComponent
if (!item.violateImage && !item.violateVideo) {
this.message.create('warning', '没有预警照片或视频！');
} else {
const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: 1200,
nzWidth: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200,
nzBodyStyle: {
'border': '1px solid #6d9cc7',
'border-radius': '0px',
@ -549,6 +553,8 @@ export class CriminalRecordsAdminComponent implements OnInit {
}
});
const instance = modal.getContentComponent();
}
}
@ -593,6 +599,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
console.log(item)
const modal = this.modal.create({
nzContent: DispositionComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: 380,
nzBodyStyle: {

8
src/app/pages/criminal-records/criminal-records.component.html
Unescape View File

@ -136,13 +136,13 @@
<div class="tbody" id="tbody">
<div nz-row class="tr" *ngFor="let item of list">
<div nz-col nzSpan="1" style="text-align: right;">
<img *ngIf="item.violation.level == 1" style="width: 36px;" src="../../../assets/images/level1.png"
<img *ngIf="item.violation.level == 1" src="../../../assets/images/level1.png"
alt="">
<img *ngIf="item.violation.level == 2" style="width: 36px;" src="../../../assets/images/level2.png"
<img *ngIf="item.violation.level == 2" src="../../../assets/images/level2.png"
alt="">
<img *ngIf="item.violation.level == 3" style="width: 36px;" src="../../../assets/images/level3.png"
<img *ngIf="item.violation.level == 3" src="../../../assets/images/level3.png"
alt="">
<img *ngIf="item.violation.level == 4" style="width: 36px;" src="../../../assets/images/level4.png"
<img *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png"
alt="">
</div>
<div nz-col nzSpan="3">

309
src/app/pages/criminal-records/criminal-records.component.scss
Unescape View File

@ -18,12 +18,14 @@
display: flex;
justify-content: space-around;
.searchParams,.btn{
margin: 0 3px;
}
.searchParams {
width: 22%;
flex: 3.8;
}
.btn {
width: 5%;
flex: 1;
}
nz-select {
@ -154,7 +156,8 @@
.centerContent {
position: absolute;
top: 42%;
left: 26%;
left: 50%;
transform: translateX(-50%);
width: 170px;
div {
@ -253,6 +256,9 @@
cursor: pointer;
}
}
img{
width: 36px;
}
}
}
}
@ -270,3 +276,298 @@
}
}
// 适配125%
@media screen and (max-height: 750px) {
.search {
box-sizing: border-box;
padding: 0 30px;
height: 32px;
margin-bottom: 12px;
form {
width: 100%;
height: 32px;
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.title {
height: 42px;
padding: 0 20px;
margin: 8px 0;
.titlebox {
width: 100%;
height: 100%;
display: flex;
align-items: center;
img {
width: 46px;
height: 46px;
}
.content {
height: 36px;
.contentitem {
width: 100%;
height: 25px;
span {
margin-left: 6px;
font-size: 16px;
}
span:nth-child(1) {
margin-left: 8px;
}
}
}
}
.packup {
position: absolute;
right: 33px;
top: 4px;
cursor: pointer;
}
}
.chartsbox {
width: 100%;
height: 43%;
.chartname {
position: absolute;
left: 20px;
top: 12px;
}
.chart {
width: 97%;
height: 100%;
div {
span {
font-size: 14px;
}
div {
flex: 1;
}
}
.leftbox {
width: 300px;
box-shadow: 0 0 20px 0px #1a7fd7 inset;
margin-right: 12px;
.centerContent {
.num {
color: #FFFFFF;
font-size: 42px;
text-shadow: 0px 0px 16px #3A9AFF;
font-weight: bold;
height: 49px;
line-height: 50px;
}
}
}
.rightbox {
flex: 1;
position: relative;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
.btnbox {
position: absolute;
right: 28px;
top: 12px;
display: flex;
flex-direction: row;
z-index: 999;
.rankingBtn {
margin-right: 12px;
}
}
}
}
}
.tablebox {
.table {
.th {
height: 32px;
line-height: 32px;
font-size: 12px!important;
}
.tbody {
.tr {
height: 32px;
line-height: 32px;
div{
font-size: 12px!important;
}
img{
width: 32px;
}
}
}
}
}
}
}
// 适配150%
@media screen and (max-height: 600px) {
.search {
box-sizing: border-box;
padding: 0 22px;
height: 32px;
margin-bottom: 6px;
form {
width: 100%;
height: 32px;
}
}
.content {
.title {
height: 36px;
padding: 0 20px;
margin: 3px 0;
.titlebox {
width: 100%;
height: 100%;
display: flex;
align-items: center;
img {
width: 36px;
height: 36px;
}
.content {
height: 30px;
.contentitem {
width: 100%;
height: 22px;
span {
margin-left: 6px;
font-size: 13px;
}
span:nth-child(1) {
margin-left: 12px;
}
}
}
}
.packup {
position: absolute;
right: 33px;
top: 2px;
cursor: pointer;
}
}
.chartsbox {
width: 100%;
height: 40%;
.chartname {
position: absolute;
left: 20px;
top: 12px;
}
.chart {
width: 98%;
height: 100%;
div {
span {
font-size: 14px;
}
div {
flex: 1;
}
}
.leftbox {
width: 260px;
box-shadow: 0 0 20px 0px #1a7fd7 inset;
margin-right: 8px;
.centerContent {
.num {
color: #FFFFFF;
font-size: 32px;
text-shadow: 0px 0px 12px #3A9AFF;
font-weight: bold;
height: 42px;
line-height: 42px;
}
}
}
.rightbox {
box-shadow: 0 0 22px 0px #1a7fd7 inset;
.btnbox {
position: absolute;
right: 28px;
top: 12px;
display: flex;
flex-direction: row;
z-index: 999;
.rankingBtn {
margin-right: 8px;
}
}
}
}
}
.tablebox {
.table {
.th {
height: 28px;
line-height: 28px;
font-size: 10px!important;
}
.tbody {
.tr {
height: 28px;
line-height: 28px;
div{
font-size: 10px!important;
}
img{
width: 30px;
}
}
}
}
}
}
}

17
src/app/pages/criminal-records/criminal-records.component.ts
Unescape View File

@ -29,9 +29,9 @@ export class CriminalRecordsComponent implements OnInit {
{
// name: 'Access From',
type: 'pie',
radius: [88, 116],//内半径外，外半径
radius: ['58%', '75%'],//内半径外，外半径
left: '0',
top: '8%',
top: '9%',
avoidLabelOverlap: false,//防止标签重叠策略
label: {//每一个标签外网延伸的引导说明
show: false,
@ -442,7 +442,7 @@ export class CriminalRecordsComponent implements OnInit {
ngAfterViewInit(): void {
fromEvent(this.element.nativeElement.querySelector(`#tbody`) as HTMLCanvasElement, 'scroll').pipe(debounceTime(100)).subscribe((event: any) => { //监听 DOM 滚动事件
if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
if(this.totalCount > this.list.length){
if (this.totalCount > this.list.length) {
console.log('需要加载数据了', event)
this.SkipCount = String(Number(this.SkipCount) + 50)
this.getViolateRecordList()
@ -509,10 +509,15 @@ export class CriminalRecordsComponent implements OnInit {
}
look(item) {
if (!item.violateImage && !item.violateVideo) {
this.message.create('warning', '没有预警照片或视频！');
} else {
const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: 1200,
nzWidth: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200,
nzBodyStyle: {
'border': '1px solid #6d9cc7',
'border-radius': '0px',
@ -529,6 +534,9 @@ export class CriminalRecordsComponent implements OnInit {
}
});
const instance = modal.getContentComponent();
}
}
@ -539,6 +547,7 @@ export class CriminalRecordsComponent implements OnInit {
console.log(item)
const modal = this.modal.create({
nzContent: DispositionComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: 380,
nzBodyStyle: {

26
src/app/pages/disposition/disposition.component.scss
Unescape View File

@ -83,3 +83,29 @@
}
}
// 适配150%
@media screen and (max-height: 600px) {
.box {
.form {
nz-form-item {
margin-bottom: 0;
textarea {
color: rgba(145, 204, 255, 0.95) !important;
width: 100%;
height: 200px;
background: #173d60;
}
}
}
}
}

701
src/app/pages/home-page/home-page.component.scss
Unescape View File

@ -329,8 +329,9 @@
.warningnum {
width: 70px;
position: absolute;
left: 43%;
top: 20%;
left: 50%;
transform: translateX(-50%);
top: 22%;
color: white;
text-align: center;
@ -348,13 +349,15 @@
}
.bucket {
left: 13%;
left: 50.5%;
transform: translateX(-50%);
top: 14%;
}
.circle {
left: 16%;
left: 50%;
transform: translateX(-50%);
top: 3%;
}
}
@ -547,6 +550,7 @@
color: #FFFFFF;
font-size: 14px;
}
.eventechartpie {
height: 100%;
width: 100%;
@ -611,3 +615,692 @@
border-right: 2px solid #FFFFFF;
border-bottom: 2px solid #FFFFFF;
}
// 适配125%
@media screen and (max-height: 750px) {
.informbox {
width: 100%;
height: 38px;
margin: 12px 0;
padding: 0 24px;
.warningnumber {
width: 180px;
img {
width: 45px;
}
.num {
font-size: 30px;
text-shadow: 0px 0px 6px #8df;
color: white;
font-weight: 600;
margin: 0 7px;
}
.today {
font-size: 16px;
margin-bottom: 13px;
margin-left: 4px;
}
}
.inform {
flex: 1;
border: 1px solid rgba(54, 162, 255, 0.4);
height: 38px;
.infologo {
img {
width: 25px;
}
height: 26px;
line-height: 26px;
font-size: 12px;
margin-left: 16px;
margin-right: 40px;
}
#container {
height: 32px;
}
.info {
height: 32px;
line-height: 32px;
font-size: 12px;
.infoitem {
img {
width: 28px;
}
}
.btn {
color: #36A2FF;
span {
cursor: pointer;
}
span:nth-child(1) {
margin-right: 24px;
}
span:nth-child(2) {
margin-right: 40px;
}
}
}
}
}
.centerbox {
height: 320px;
.leftbox {
.title {
padding: 0 20PX;
height: 40px;
}
.leftboxcontent {
padding: 12px;
padding-right: 6px;
.leftitem {
margin: 0 6px;
padding: 8px 12px;
.progress {
height: 3px;
.colorbar {
height: 3px;
}
}
.itemname {
margin-bottom: 3px;
font-size: 12px;
}
.areabox {
.areaboxitemtop {
display: flex;
justify-content: space-between;
align-items: center;
color: #FFFFFF;
font-size: 13px;
margin-bottom: 8px;
}
}
.eventbox {
.eventboxitem {
display: flex;
align-items: center;
color: #fff;
font-size: 10px;
.eventname {
width: 30%;
.block {
width: 14px;
height: 14px;
border-radius: 2px;
line-height: 14px;
font-size: 8px;
}
}
}
}
.stationbox {
.stationboxitem {
font-size: 10px;
.stationname {
.block {
width: 14px;
height: 14px;
line-height: 14px;
border-radius: 2px;
font-size: 8px;
}
}
}
}
}
.leftitem:nth-child(1) {
flex: .8;
.warningnum {
width: 70px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 19%;
h1 {
font-size: 32px;
}
}
img {
position: absolute;
}
.bucket {
left: 50.5%;
transform: translateX(-50%);
top: 28%;
width: 66%;
height: 66%;
}
.circle {
left: 50%;
transform: translateX(-50%);
top: 3%;
width: 66%;
height: 66%;
}
}
}
}
.rightbox {
.title {
padding: 0 8PX;
height: 40px;
}
.rightboxcontent {
padding: 12px;
padding-left: 0;
.rightitem {
padding: 12px 0;
.numlistbox {
height: 64px;
width: 70%;
display: flex;
align-items: center;
img {
width: 49px;
height: 49px;
margin-right: 16px;
}
.content {
.lightspan {
font-size: 23px;
line-height: 23px;
margin-bottom: 4px;
}
.lightspan1 {
text-shadow: 0px 0px 12px #3A9AFF;
}
.lightspan2 {
text-shadow: 0px 0px 12px #23D9FF;
}
.lightspan3 {
text-shadow: 0px 0px 12px #FFB791;
}
}
}
}
}
}
}
.bottombox {
.title {
height: 40px;
}
.bottomitem {
.bottomitemcontent {
padding: 10px 0;
.bottomitemchartbox {
.bartitle {
top: 16px;
right: 28px;
font-size: 12px;
}
.numlistbox {
left: 5%;
bottom: 6%;
.numlistboxitem {
margin: 2px 0;
span {
font-size: 10px;
}
.top {
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
text-align: center;
font-size: 8px;
border-radius: 2px;
}
.name {
margin: 0 12px;
}
}
}
.eventechartpie,
.oilechartpie {
height: 100%;
width: 23%;
position: relative;
}
.eventechartline,
.oilechartline {
height: 100%;
flex: 1;
}
}
.bottomitemchartboxspecial {
.bartitle {
position: absolute;
top: 16px;
left: 28px;
color: #FFFFFF;
font-size: 12px;
}
.eventechartpie {
height: 100%;
width: 100%;
position: relative;
}
.eventechartline {
position: absolute;
right: 0;
bottom: 0;
height: 86%;
width: 76%;
// border: 1px solid red;
}
}
}
.bottomitemcontent1 {
padding-left: 30px;
padding-right: 4px;
}
.bottomitemcontent2 {
padding-left: 15px;
padding-right: 16px;
}
}
}
.angle-border {
position: absolute;
width: 6px;
height: 6px;
}
}
// 适配150%
@media screen and (max-height: 600px) {
.informbox {
width: 100%;
height: 32px;
margin: 6px 0;
padding: 0 16px;
.warningnumber {
width: 150px;
img {
width: 36px;
}
.num {
font-size:23px;
margin: 0 5px;
}
.today {
font-size: 13px;
margin-bottom: 10px;
margin-left: 2px;
}
}
.inform {
height: 30px;
.infologo {
img {
width: 20px;
}
height: 18px;
line-height: 18px;
font-size: 10px;
margin-left: 8px;
margin-right: 30px;
}
#container {
height: 22px;
}
.info {
height: 22px;
line-height: 22px;
font-size: 10px;
.infoitem {
img {
width: 20px;
}
}
.btn {
span:nth-child(1) {
margin-right: 12px;
}
span:nth-child(2) {
margin-right: 20px;
}
}
}
}
}
.centerbox {
height: 49%;
.leftbox {
.title {
padding: 0 16PX;
height: 30px;
}
.leftboxcontent {
padding: 8px;
padding-right: 4px;
.leftitem {
margin: 0 4px;
padding: 6px 8px;
.progress {
height: 2px;
.colorbar {
height: 2px;
}
}
.itemname {
margin-bottom: 2px;
font-size: 10px;
}
.areabox {
.areaboxitemtop {
font-size: 10px;
margin-bottom: 4px;
}
}
.eventbox {
.eventboxitem {
font-size: 10px;
.eventname {
width: 30%;
.block {
width: 14px;
height: 14px;
border-radius: 2px;
line-height: 14px;
font-size: 8px;
}
}
}
}
.stationbox {
.stationboxitem {
font-size: 10px;
.stationname {
.block {
width: 14px;
height: 14px;
line-height: 14px;
border-radius: 2px;
font-size: 8px;
}
}
}
}
}
.leftitem:nth-child(1) {
flex: .8;
.warningnum {
width: 70px;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 19%;
h1 {
font-size: 32px;
}
}
img {
position: absolute;
}
.bucket {
left: 50.5%;
transform: translateX(-50%);
top: 28%;
width: 68%;
height: 68%;
}
.circle {
left: 50%;
transform: translateX(-50%);
top: 3%;
width: 68%;
height: 68%;
}
}
}
}
.rightbox {
.title {
padding: 0 8PX;
height: 30px;
}
.rightboxcontent {
padding: 12px;
padding-left: 0;
.rightitem {
padding: 8px 0;
.numlistbox {
height: 60px;
width: 80%;
display: flex;
align-items: center;
img {
width: 36px;
height: 36px;
margin-right: 12px;
}
.content {
.lightspan {
font-size: 16px;
line-height: 16px;
margin-bottom: 4px;
}
.lightspan1 {
text-shadow: 0px 0px 8px #3A9AFF;
}
.lightspan2 {
text-shadow: 0px 0px 8px #23D9FF;
}
.lightspan3 {
text-shadow: 0px 0px 8px #FFB791;
}
}
}
}
}
}
}
.bottombox {
.title {
height:30px;
}
.bottomitem {
.bottomitemcontent {
padding: 8px 0;
.bottomitemchartbox {
.bartitle {
top: 16px;
right: 28px;
font-size: 10px;
}
.numlistbox {
left: 5%;
bottom: 6%;
.numlistboxitem {
margin: 2px 0;
span {
font-size: 10px;
}
.top {
display: inline-block;
width: 12px;
height: 12px;
line-height: 12px;
text-align: center;
font-size: 8px;
border-radius: 2px;
}
.name {
margin: 0 10px;
}
}
}
.eventechartpie,
.oilechartpie {
height: 100%;
width: 23%;
position: relative;
}
.eventechartline,
.oilechartline {
height: 100%;
flex: 1;
}
}
.bottomitemchartboxspecial {
.bartitle {
position: absolute;
top: 16px;
left: 28px;
color: #FFFFFF;
font-size: 10px;
}
.eventechartpie {
height: 100%;
width: 100%;
position: relative;
}
.eventechartline {
position: absolute;
right: 0;
bottom: 0;
height: 86%;
width: 76%;
// border: 1px solid red;
}
}
}
.bottomitemcontent1 {
padding-left: 30px;
padding-right: 4px;
}
.bottomitemcontent2 {
padding-left: 15px;
padding-right: 16px;
}
}
}
.angle-border {
position: absolute;
width: 6px;
height: 6px;
}
}

33
src/app/pages/home-page/home-page.component.ts
Unescape View File

@ -47,11 +47,7 @@ export class HomePageComponent implements OnInit {
right: '77%',
avoidLabelOverlap: false,//防止标签重叠策略
emphasis: {//中间高亮区域
label: {
show: false,
fontSize: '40',
fontWeight: 'bold'
}
show: true,
},
data: [
],
@ -72,14 +68,14 @@ export class HomePageComponent implements OnInit {
formatter: '',
rich: {
total: {
fontSize: 35,
fontSize: document.documentElement.clientHeight < 750 ? 20 : 35,
textShadowColor: '#8df',
textShadowBlur: 3,
color: '#fff',
},
active: {
fontSize: 14,
fontSize: document.documentElement.clientHeight < 750 ? 12 : 14,
color: '#fff',
fontFamily: 'Microsoft YaHei',
},
@ -254,7 +250,21 @@ export class HomePageComponent implements OnInit {
this.getAggregations()
// if (Number(sessionStorage.getItem('zoom')) != 1) {
// console.log('走这里了吗')
// let dom1 = document.getElementById('eventechartpie')
// let dom2 = document.getElementById('eventechartline')
// let dom3 = document.getElementById('oilechartpie')
// let dom4 = document.getElementById('oilechartline')
// let zoom = 1 / Number(sessionStorage.getItem('zoom'))
// let domList = [dom1, dom2, dom3, dom4]
// domList.forEach((item: any) => {
// item.style.zoom = zoom
// item.style.transform = "scale(" + Number(sessionStorage.getItem('zoom')) + ")"
// item.style.transformOrigin = "0%0%"
// item.style.width = 50 + "%"
// })
// }
}
@ -394,13 +404,13 @@ export class HomePageComponent implements OnInit {
formatter: '',
rich: {
total: {
fontSize: 35,
fontSize: document.documentElement.clientHeight < 750 ? 20 : 35,
textShadowColor: '#8df',
textShadowBlur: 3,
color: '#fff'
},
active: {
fontSize: 14,
fontSize: document.documentElement.clientHeight < 750 ? 12 : 14,
color: '#fff',
fontFamily: 'Microsoft YaHei',
},
@ -656,8 +666,9 @@ export class HomePageComponent implements OnInit {
}
const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: 1200,
nzWidth: (document.documentElement.clientHeight<650 || document.documentElement.clientWidth<1400) ? 1000 : 1200,
nzBodyStyle: {
'border': '1px solid #6d9cc7',
'border-radius': '0px',

118
src/app/pages/home/home.component.scss
Unescape View File

@ -19,9 +19,11 @@
background: url('../../../assets/images/navbg.png') no-repeat;
background-size: 100% 115%;
position: relative;
.libox{
.libox {
width: 33%;
display: flex;
li {
flex: 1;
height: 52px;
@ -40,7 +42,8 @@
position: absolute;
left: 24px;
top: 16px;
img{
img {
width: 154px;
}
}
@ -119,3 +122,114 @@
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, #36A2FF 50%, rgba(35, 153, 255, 0) 100%);
}
// 适配125%
@media screen and (max-height: 750px) {
.menu {
height: 42px;
font-size: 14px;
.libox {
width: 33%;
li {
height: 42px;
line-height: 42px;
}
}
}
.boxleft {
left:30px;
top: 12px;
img {
width: 125px;
}
}
.boxright {
right: 24px;
top: 13px;
span {
font-size: 13px;
opacity: 0.6;
}
img {
width: 26px;
height: 26px;
}
}
.backbtn {
left: 176px;
bottom: 3px;
button {
width: 46px;
height: 25px;
line-height: 25px;
font-size: 10px;
text-align: center;
padding: 0;
}
}
}
// 适配150%
@media screen and (max-height: 600px) {
.menu {
height: 32px;
font-size: 8px;
.libox {
width: 33%;
li {
height: 32px;
line-height: 32px;
}
}
}
.boxleft {
left: 24px;
top: 8px;
img {
width: 105px;
}
}
.boxright {
right: 24px;
top: 10px;
span {
font-size: 8px;
opacity: 0.6;
}
img {
width: 20px;
height: 20px;
}
}
.backbtn {
left: 156px;
bottom: 0px;
button {
width: 46px;
height: 25px;
line-height: 25px;
font-size: 8px;
text-align: center;
padding: 0;
}
}
}

3
src/app/pages/home/home.component.ts
Unescape View File

@ -117,8 +117,9 @@ export class HomeComponent implements OnInit {
}).subscribe((data: any) => {
const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: 1200,
nzWidth: (document.documentElement.clientHeight<650 || document.documentElement.clientWidth<1400) ? 1000 : 1200,
nzBodyStyle: {
'border': '1px solid #6d9cc7',
'border-radius': '0px',

325
src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss
Unescape View File

@ -18,12 +18,17 @@
display: flex;
justify-content: space-around;
.searchParams,
.btn {
margin: 0 3px;
}
.searchParams {
width: 44.5%;
flex: 10;
}
.btn {
width: 5%;
flex: 1;
}
nz-select {
@ -32,7 +37,7 @@
nz-range-picker {
background-color: rgba(0, 0, 0, 0);
width: 97%;
width: 100%;
}
}
@ -155,8 +160,9 @@
.centerContent {
position: absolute;
top: 36%;
left: 26%;
top: 34%;
left: 50%;
transform: translateX(-50%);
width: 170px;
div {
@ -177,7 +183,8 @@
line-height: 46px;
}
}
.goback{
.goback {
position: absolute;
right: 20px;
top: 14px;
@ -282,3 +289,309 @@
}
}
// 适配125%
@media screen and (max-height: 750px) {
.search {
box-sizing: border-box;
padding: 0 30px;
height: 32px;
margin-bottom: 12px;
form {
width: 100%;
height: 32px;
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.title {
height: 42px;
padding: 0 20px;
margin: 8px 0;
.titlebox {
width: 100%;
height: 100%;
display: flex;
align-items: center;
img {
width: 46px;
height: 46px;
}
.content {
height: 36px;
.contentitem {
width: 100%;
height: 25px;
span {
margin-left: 6px;
font-size: 16px;
}
span:nth-child(1) {
margin-left: 8px;
}
}
}
}
.packup {
position: absolute;
right: 33px;
top: 4px;
cursor: pointer;
}
}
.chartsbox {
width: 100%;
height: 43%;
.chartname {
position: absolute;
left: 20px;
top: 12px;
}
.chart {
width: 97%;
height: 100%;
div {
span {
font-size: 14px;
}
div {
flex: 1;
}
}
.leftbox {
width: 300px;
box-shadow: 0 0 20px 0px #1a7fd7 inset;
margin-right: 12px;
.centerContent {
.num {
color: #FFFFFF;
font-size: 42px;
text-shadow: 0px 0px 16px #3A9AFF;
font-weight: bold;
height: 49px;
line-height: 50px;
}
}
}
.rightbox {
flex: 1;
position: relative;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
.btnbox {
position: absolute;
right: 28px;
top: 12px;
display: flex;
flex-direction: row;
z-index: 999;
.rankingBtn {
margin-right: 12px;
}
}
}
}
}
.tablebox {
.table {
.th {
height: 32px;
line-height: 32px;
font-size: 12px !important;
}
.tbody {
.tr {
height: 32px;
line-height: 32px;
div {
font-size: 12px !important;
}
img {
width: 32px;
}
}
}
}
}
}
}
// 适配150%
@media screen and (max-height: 600px) {
.search {
box-sizing: border-box;
padding: 0 22px;
height: 32px;
margin-bottom: 6px;
form {
width: 100%;
height: 32px;
}
}
.content {
.title {
height: 36px;
padding: 0 20px;
margin: 3px 0;
.titlebox {
width: 100%;
height: 100%;
display: flex;
align-items: center;
img {
width: 36px;
height: 36px;
}
.content {
height: 30px;
.contentitem {
width: 100%;
height: 22px;
span {
margin-left: 6px;
font-size: 13px;
}
span:nth-child(1) {
margin-left: 12px;
}
}
}
}
.packup {
position: absolute;
right: 33px;
top: 2px;
cursor: pointer;
}
}
.chartsbox {
width: 100%;
height: 40%;
.chartname {
position: absolute;
left: 20px;
top: 12px;
}
.chart {
width: 97%;
height: 100%;
div {
span {
font-size: 14px;
}
div {
flex: 1;
}
}
.leftbox {
width: 260px;
box-shadow: 0 0 20px 0px #1a7fd7 inset;
margin-right: 8px;
.centerContent {
.num {
color: #FFFFFF;
font-size: 32px;
text-shadow: 0px 0px 12px #3A9AFF;
font-weight: bold;
height: 42px;
line-height: 42px;
}
}
}
.rightbox {
box-shadow: 0 0 22px 0px #1a7fd7 inset;
.btnbox {
position: absolute;
right: 28px;
top: 12px;
display: flex;
flex-direction: row;
z-index: 999;
.rankingBtn {
margin-right: 8px;
}
}
}
}
}
.tablebox {
.table {
.th {
height: 28px;
line-height: 28px;
font-size: 10px !important;
}
.tbody {
.tr {
height: 28px;
line-height: 28px;
div {
font-size: 10px !important;
}
img {
width: 30px;
}
}
}
}
}
}
}

2
src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts
Unescape View File

@ -253,7 +253,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
trigger: 'item'//触发类型
},
legend: {
bottom: '12%',
bottom: '8%',
left: 'center',
itemGap: 10,
itemWidth: 8,

101
src/app/pages/plan-admin/plan-admin.component.scss
Unescape View File

@ -78,6 +78,7 @@
flex-direction: column;
align-items: center;
overflow: hidden;
.pagination {
margin-top: 26px;
display: flex;
@ -90,3 +91,103 @@
}
}
}
// 适配125%
@media screen and (max-height: 750px) {
.stationPlanBox {
padding: 16px 20px;
}
.title {
width: 100%;
height: 42px;
}
.orbox {
width: 290px;
margin-right: 32px;
.or {
margin-top: 8px;
padding: 15px 10px;
}
}
.stationList {
.search {
box-sizing: border-box;
padding-left: 22px;
padding-right: 30px;
width: 100%;
height: 32px;
margin-top: 8px;
margin-bottom: 15px;
form {
height: 32px;
.searchParams {
flex: 12;
}
.btn {
flex: 1;
}
}
}
}
}
// 适配150%
@media screen and (max-height: 600px) {
.stationPlanBox {
padding: 12px 15px;
}
.title {
width: 100%;
height: 33px;
}
.orbox {
width: 250px;
margin-right:23px;
.or {
margin-top: 5px;
padding: 10px 6px;
}
}
.stationList {
.search {
box-sizing: border-box;
padding-left: 18px;
padding-right: 22px;
width: 100%;
height: 32px;
margin-top: 8px;
margin-bottom: 15px;
form {
height: 32px;
.searchParams {
flex: 10;
}
.btn {
flex: 1;
}
}
}
.tablebox{
nz-table{
th{
font-size: 10px!important;
}
}
}
}
}

156
src/app/pages/today-warning-admin/today-warning-admin.component.scss
Unescape View File

@ -24,6 +24,7 @@
img {
width: 32px;
}
.today {
font-size: 18px;
font-family: titlefont;
@ -31,6 +32,7 @@
margin-left: 8px;
margin-right: 16px;
}
.num {
font-size: 20px;
text-shadow: 0px 0px 6px #8df;
@ -54,12 +56,17 @@
display: flex;
justify-content: space-around;
.searchParams,
.btn {
margin: 0 3px;
}
.searchParams {
width: 12.5%;
flex: 3;
}
.btn {
width: 5%;
flex: 1;
}
nz-select {
@ -96,6 +103,7 @@
box-sizing: border-box;
padding-left: 20px;
padding-right: 60px;
div {
font-size: 15px;
text-align: left;
@ -145,3 +153,147 @@
}
// 适配125%
@media screen and (max-height: 750px) {
.warningbox {
.title {
box-sizing: border-box;
padding: 0 16PX;
height: 42px;
margin: 12px 0;
position: relative;
}
.warningnumber {
right: 70px;
top: 9px;
img {
width: 32px;
}
.today {
font-size: 16px;
margin-left: 5px;
margin-right: 13px;
}
.num {
font-size: 18px;
}
}
.search {
padding: 0 32px;
height: 32px;
form {
height: 32px;
.searchParams,
.btn {
margin: 0 3px;
}
}
}
.listbox {
flex: 1;
overflow-y: auto;
box-sizing: border-box;
padding: 16px 35px 16px 36px;
.listitem {
height: 40px;
line-height: 40px;
margin-bottom: 8px;
padding-right: 36px;
div {
font-size: 12px;
button {
font-size: 12px;
}
}
}
}
}
}
// 适配150%
@media screen and (max-height: 600px) {
.warningbox {
.title {
box-sizing: border-box;
padding: 0 12PX;
height: 38px;
margin: 6px 0;
position: relative;
}
.warningnumber {
right: 70px;
top: 6px;
img {
width: 32px;
}
.today {
font-size: 15px;
margin-left: 5px;
margin-right: 13px;
}
.num {
font-size: 16px;
}
}
.search {
padding: 0 32px;
height: 32px;
form {
height: 32px;
.searchParams,
.btn {
margin: 0 3px;
}
}
}
.listbox {
flex: 1;
overflow-y: auto;
box-sizing: border-box;
padding: 16px 35px 16px 36px;
.listitem {
height: 36px;
line-height: 36px;
margin-bottom: 5px;
padding-right: 22px;
div {
font-size: 10px;
button {
font-size: 10px;
}
}
}
}
}
}

4
src/app/pages/today-warning-admin/today-warning-admin.component.ts
Unescape View File

@ -166,8 +166,9 @@ export class TodayWarningAdminComponent implements OnInit {
} else {
const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: 1200,
nzWidth: (document.documentElement.clientHeight<650 || document.documentElement.clientWidth<1400) ? 1000 : 1200,
nzBodyStyle: {
'border': '1px solid #6d9cc7',
'border-radius': '0px',
@ -192,6 +193,7 @@ export class TodayWarningAdminComponent implements OnInit {
console.log(item)
const modal = this.modal.create({
nzContent: DispositionComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: 380,
nzBodyStyle: {

222
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
Unescape View File

@ -102,223 +102,77 @@
flex: 1;
box-sizing: border-box;
padding-left: 13px;
display: flex;
justify-content: center;
img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
}
}
}
.oilbox {
display: flex;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 18px 20px;
.title {
// 适配125%
@media screen and (max-height: 750px) {
.box {
width: 100%;
height: 30px;
line-height: 30px;
background: rgba(35, 153, 255, 0.2);
text-align: left;
border-bottom: 1px solid rgba(54, 162, 255, 0.47);
box-sizing: border-box;
padding-left: 16px;
color: #36A2FF;
}
.leftbox {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-right: 70px;
.lefttop,
.leftbottom {
width: 840px;
height: 280px;
border: 1px solid rgba(54, 162, 255, 0.47);
height: 650px;
color: #fff;
display: flex;
flex-direction: column;
.content {
flex: 1;
background: #001d3c;
}
background-image: linear-gradient(#003B6E, #000D21);
position: relative;
}
.lefttop {
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.imglist1 {
width: 100%;
display: flex;
justify-content: space-around;
}
.line {
width: 80%;
display: flex;
margin-top: 6px;
.imgbox {
div {
.bigimg {
// min-width: 1149px;
flex: 1;
height: 6px;
border-right: 1px solid #91CCFF;
border-bottom: 1px solid #91CCFF;
}
div:nth-child(1) {
border-left: 1px solid #91CCFF;
}
}
.imglist2 {
margin-top: -6px;
width: 100%;
box-sizing: border-box;
padding-left: 13px;
display: flex;
justify-content: center;
}
}
}
.leftbottom {
.content {
.colimglist {
display: flex;
align-items: center;
.colimglist1 {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.colline {
height: 120px;
width: 6px;
border-right: 1px solid #91CCFF;
border-top: 1px solid #91CCFF;
border-bottom: 1px solid #91CCFF;
margin-left: 8px;
}
img {
max-width: 100%;
max-height: 100%;
}
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
}
}
}
}
.rightbox {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.rightbottom {
width: 160px;
height: 490px;
display: flex;
flex-direction: column;
border: 1px solid rgba(54, 162, 255, 0.47);
.content {
padding: 6px;
flex: 1;
background: #001d3c;
// 适配150%
@media screen and (max-height: 600px) {
.box {
width: 100%;
height: 480px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
// align-items:;
}
}
background-image: linear-gradient(#003B6E, #000D21);
position: relative;
}
.content {
.imgbox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.img {
width: 96px;
height: 64px;
box-shadow: 0px 0px 6px #36A2FF;
border: 1px solid #C4E2FC;
.bigimg {
// min-width: 1149px;
flex: 1;
box-sizing: border-box;
padding-left: 13px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
img {
width: 100%;
height: 100%;
cursor: pointer;
}
.err{
width: 24px;
height: 24px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
.selectedimg {
box-shadow: 0px 0px 8px #FF4B65;
border: 1px solid #FF4B65;
background: #3f213b;
img{
width: 24px;
height: 24px;
}
}
.errimg{
box-shadow: 0px 0px 8px #FF4B65;
border: 1px solid #FF4B65;
img {
max-width: 100%;
max-height: 100%;
}
.name {
margin-top: 3px;
color: #FFFFFF;
font-size: 14px;
}
}
}
}
.longleft1,
.longleft2 {
position: absolute;
}
.longleft1 {
right: 213px;
top: 102px;
}
.longleft2 {
right: 250px;
bottom: 137px;
width: 100px;
}

162
src/app/pages/today-warning/today-warning.component.scss
Unescape View File

@ -13,6 +13,7 @@
margin: 16px 0;
position: relative;
}
.warningnumber {
position: absolute;
right: 80px;
@ -23,6 +24,7 @@
img {
width: 32px;
}
.today {
font-size: 18px;
font-family: titlefont;
@ -30,6 +32,7 @@
margin-left: 8px;
margin-right: 16px;
}
.num {
font-size: 20px;
text-shadow: 0px 0px 6px #8df;
@ -39,6 +42,7 @@
}
.search {
box-sizing: border-box;
padding: 0 36px;
@ -52,12 +56,17 @@
display: flex;
justify-content: space-around;
.searchParams,
.btn {
margin: 0 3px;
}
.searchParams {
width: 17.5%;
flex: 3;
}
.btn {
width: 5%;
flex: 1;
}
nz-select {
@ -89,6 +98,7 @@
background: linear-gradient(180deg, rgba(3, 0, 0, 0) 0%, rgba(0, 46, 91, 0.68) 100%);
box-sizing: border-box;
padding-right: 60px;
div {
font-size: 15px;
text-align: center;
@ -104,8 +114,154 @@
}
}
}
.dispositioned{
.dispositioned {
color: #23D9FF;
}
}
}
// 适配125%
@media screen and (max-height: 750px) {
.warningbox {
.title {
box-sizing: border-box;
padding: 0 16PX;
height: 42px;
margin: 12px 0;
position: relative;
}
.warningnumber {
right: 70px;
top: 9px;
img {
width: 32px;
}
.today {
font-size: 16px;
margin-left: 5px;
margin-right: 13px;
}
.num {
font-size: 18px;
}
}
.search {
padding: 0 32px;
height: 32px;
form {
height: 32px;
.searchParams,
.btn {
margin: 0 3px;
}
}
}
.listbox {
flex: 1;
overflow-y: auto;
box-sizing: border-box;
padding: 16px 35px 16px 36px;
.listitem {
height: 40px;
line-height: 40px;
margin-bottom: 8px;
padding-right: 36px;
div {
font-size: 12px;
button {
font-size: 12px;
}
}
}
}
}
}
// 适配150%
@media screen and (max-height: 600px) {
.warningbox {
.title {
box-sizing: border-box;
padding: 0 12PX;
height: 38px;
margin: 6px 0;
position: relative;
}
.warningnumber {
right: 70px;
top: 6px;
img {
width: 32px;
}
.today {
font-size: 15px;
margin-left: 5px;
margin-right: 13px;
}
.num {
font-size: 16px;
}
}
.search {
padding: 0 32px;
height: 32px;
form {
height: 32px;
.searchParams,
.btn {
margin: 0 3px;
}
}
}
.listbox {
flex: 1;
overflow-y: auto;
box-sizing: border-box;
padding: 16px 35px 16px 36px;
.listitem {
height: 36px;
line-height: 36px;
margin-bottom: 5px;
padding-right: 22px;
div {
font-size: 10px;
button {
font-size: 10px;
}
}
}
}
}
}

4
src/app/pages/today-warning/today-warning.component.ts
Unescape View File

@ -118,8 +118,9 @@ export class TodayWarningComponent implements OnInit {
} else {
const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: 1200,
nzWidth: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200,
nzBodyStyle: {
'border': '1px solid #6d9cc7',
'border-radius': '0px',
@ -144,6 +145,7 @@ export class TodayWarningComponent implements OnInit {
if (item.isEnableHandle) {
const modal = this.modal.create({
nzContent: DispositionComponent,
nzWrapClassName: "vertical-center-modal",
nzViewContainerRef: this.viewContainerRef,
nzWidth: 380,
nzBodyStyle: {

5
src/app/system-management/navigation/navigation.component.scss
Unescape View File

@ -10,6 +10,7 @@ nz-sider {
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
.logo {
width: 100%;
@ -24,7 +25,6 @@ nz-sider {
align-items: center;
margin-top: 46px;
margin-bottom: 46px;
.photograph {
// width: 140px;
// height: 140px;
@ -50,7 +50,8 @@ nz-sider {
margin-bottom: 16px;
box-sizing: border-box;
padding-left: 26%;
img{
img {
margin-right: 8px;
}
}

51
src/app/ui/title/title.component.scss
Unescape View File

@ -3,10 +3,12 @@
height: 100%;
display: flex;
align-items: center;
img {
width: 65px;
height: 65px;
}
.content {
flex: 1;
height: 48px;
@ -22,6 +24,7 @@
align-items: center;
// background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147);
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%);
span {
margin-left: 10px;
@ -33,3 +36,51 @@
}
}
// 适配125%
@media screen and (max-height: 750px) {
.titlebox {
img {
width: 46px;
height: 46px;
}
.content {
height: 36px;
.contentitem {
height: 25px;
span {
margin-left: 6px;
font-size: 16px;
}
}
}
}
}
// 适配150%
@media screen and (max-height: 600px) {
.titlebox {
img {
width: 36px;
height: 36px;
}
.content {
height: 28px;
.contentitem {
height: 20px;
span {
margin-left: 6px;
font-size: 13px;
}
}
}
}
}

13
src/theme.less
Unescape View File

@ -385,11 +385,11 @@
}
.maxHeightTreeSelect{
.maxHeightTreeSelect {
max-height: 280px;
}
.cdk-overlay-pane{
.cdk-overlay-pane {
// position: fixed!important;
// top: 47px;
// right: 26px!important;
@ -397,3 +397,12 @@
// width: 88px;
}
.vertical-center-modal {
display: flex;
align-items: center;
justify-content: center;
}
.vertical-center-modal .ant-modal {
top: 0;
}

Write Preview
Loading…
Cancel
Save