From cfadf76f5bbdd634268c86a5c5395b2a6473c8fa Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Fri, 10 Dec 2021 15:48:22 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E5=88=86=E8=BE=A8=E7=8E=87?= =?UTF-8?q?=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.ts | 53 +- .../criminal-records-admin.component.html | 8 +- .../criminal-records-admin.component.scss | 331 ++++++++- .../criminal-records-admin.component.ts | 51 +- .../criminal-records.component.html | 8 +- .../criminal-records.component.scss | 309 +++++++- .../criminal-records.component.ts | 53 +- .../disposition/disposition.component.scss | 26 + .../pages/home-page/home-page.component.scss | 701 +++++++++++++++++- .../pages/home-page/home-page.component.ts | 33 +- src/app/pages/home/home.component.scss | 120 ++- src/app/pages/home/home.component.ts | 3 +- .../oil-unloading-process-list.component.scss | 325 +++++++- .../oil-unloading-process-list.component.ts | 2 +- .../plan-admin/plan-admin.component.html | 2 +- .../plan-admin/plan-admin.component.scss | 101 +++ .../today-warning-admin.component.scss | 158 +++- .../today-warning-admin.component.ts | 4 +- .../get-out-of-line-details.component.scss | 242 ++---- .../today-warning.component.scss | 164 +++- .../today-warning/today-warning.component.ts | 4 +- .../navigation/navigation.component.scss | 7 +- src/app/ui/title/title.component.scss | 51 ++ src/theme.less | 17 +- 24 files changed, 2419 insertions(+), 354 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index fb3d6c2..3a83d8e 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -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() - }) - } } diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.html b/src/app/pages/criminal-records-admin/criminal-records-admin.component.html index 606e22a..d2360c2 100644 --- a/src/app/pages/criminal-records-admin/criminal-records-admin.component.html +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.html @@ -146,13 +146,13 @@
- - - -
diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss b/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss index f45f7ba..055b7f1 100644 --- a/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.scss @@ -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%; @@ -87,17 +93,20 @@ font-size: 20px; 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; @@ -137,18 +149,21 @@ div { flex: 1; } - + } + .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; + } + } + } + } + + } + } +} diff --git a/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts b/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts index 062ca95..7174684 100644 --- a/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts +++ b/src/app/pages/criminal-records-admin/criminal-records-admin.component.ts @@ -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,26 +529,32 @@ export class CriminalRecordsAdminComponent implements OnInit { look(item) { // GetOutOfLineDetailsComponent // OilUnloadingProcessComponent - const modal = this.modal.create({ - nzContent: GetOutOfLineDetailsComponent, - nzViewContainerRef: this.viewContainerRef, - nzWidth: 1200, - nzBodyStyle: { - 'border': '1px solid #6d9cc7', - 'border-radius': '0px', - 'padding': '0px', - 'box-shadow': '0 0 8px 0 #fff', - 'background': '#000D21', - }, - nzComponentParams: { - data: item - }, - nzFooter: null, - nzOnOk: async () => { + 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: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200, + nzBodyStyle: { + 'border': '1px solid #6d9cc7', + 'border-radius': '0px', + 'padding': '0px', + 'box-shadow': '0 0 8px 0 #fff', + 'background': '#000D21', + }, + nzComponentParams: { + data: item + }, + nzFooter: null, + nzOnOk: async () => { + + } + }); + const instance = modal.getContentComponent(); + } - } - }); - 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: { diff --git a/src/app/pages/criminal-records/criminal-records.component.html b/src/app/pages/criminal-records/criminal-records.component.html index 2bc1e0f..ff9c502 100644 --- a/src/app/pages/criminal-records/criminal-records.component.html +++ b/src/app/pages/criminal-records/criminal-records.component.html @@ -136,13 +136,13 @@
- - - -
diff --git a/src/app/pages/criminal-records/criminal-records.component.scss b/src/app/pages/criminal-records/criminal-records.component.scss index d0bba88..8a00808 100644 --- a/src/app/pages/criminal-records/criminal-records.component.scss +++ b/src/app/pages/criminal-records/criminal-records.component.scss @@ -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; + } + } + } + } + + } + } +} \ No newline at end of file diff --git a/src/app/pages/criminal-records/criminal-records.component.ts b/src/app/pages/criminal-records/criminal-records.component.ts index db0e37a..1a161d6 100644 --- a/src/app/pages/criminal-records/criminal-records.component.ts +++ b/src/app/pages/criminal-records/criminal-records.component.ts @@ -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,26 +509,34 @@ export class CriminalRecordsComponent implements OnInit { } look(item) { - const modal = this.modal.create({ - nzContent: GetOutOfLineDetailsComponent, - nzViewContainerRef: this.viewContainerRef, - nzWidth: 1200, - nzBodyStyle: { - 'border': '1px solid #6d9cc7', - 'border-radius': '0px', - 'padding': '0px', - 'box-shadow': '0 0 8px 0 #fff', - 'background': '#000D21', - }, - nzComponentParams: { - data: item - }, - nzFooter: null, - nzOnOk: async () => { - } - }); - const instance = modal.getContentComponent(); + 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: (document.documentElement.clientHeight < 650 || document.documentElement.clientWidth < 1400) ? 1000 : 1200, + nzBodyStyle: { + 'border': '1px solid #6d9cc7', + 'border-radius': '0px', + 'padding': '0px', + 'box-shadow': '0 0 8px 0 #fff', + 'background': '#000D21', + }, + nzComponentParams: { + data: item + }, + nzFooter: null, + nzOnOk: async () => { + + } + }); + 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: { diff --git a/src/app/pages/disposition/disposition.component.scss b/src/app/pages/disposition/disposition.component.scss index b616fdb..b8b75e4 100644 --- a/src/app/pages/disposition/disposition.component.scss +++ b/src/app/pages/disposition/disposition.component.scss @@ -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; + } + } + + + + } + + } +} \ No newline at end of file diff --git a/src/app/pages/home-page/home-page.component.scss b/src/app/pages/home-page/home-page.component.scss index 48dee9b..42813d6 100644 --- a/src/app/pages/home-page/home-page.component.scss +++ b/src/app/pages/home-page/home-page.component.scss @@ -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; + } +} diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts index d9e0b19..98e0ee0 100644 --- a/src/app/pages/home-page/home-page.component.ts +++ b/src/app/pages/home-page/home-page.component.ts @@ -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,8 +250,22 @@ 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', diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index 0df94dc..832880f 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -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; @@ -32,7 +34,7 @@ color: #EBFAFF; } } - + } @@ -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; + } + } + + +} diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 8e2b6b9..894195f 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -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', diff --git a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss index 385ee8e..fe2eda9 100644 --- a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss +++ b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.scss @@ -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; + } + } + } + } + + } + } +} diff --git a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts index d3032dd..70f5a87 100644 --- a/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts +++ b/src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts @@ -253,7 +253,7 @@ export class OilUnloadingProcessListComponent implements OnInit { trigger: 'item'//触发类型 }, legend: { - bottom: '12%', + bottom: '8%', left: 'center', itemGap: 10, itemWidth: 8, diff --git a/src/app/pages/plan-admin/plan-admin.component.html b/src/app/pages/plan-admin/plan-admin.component.html index bec8f22..4f2f656 100644 --- a/src/app/pages/plan-admin/plan-admin.component.html +++ b/src/app/pages/plan-admin/plan-admin.component.html @@ -58,7 +58,7 @@
- +
加油站名称 区域 diff --git a/src/app/pages/plan-admin/plan-admin.component.scss b/src/app/pages/plan-admin/plan-admin.component.scss index 5aad2c8..79ecb13 100644 --- a/src/app/pages/plan-admin/plan-admin.component.scss +++ b/src/app/pages/plan-admin/plan-admin.component.scss @@ -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; + } + } + } + } +} diff --git a/src/app/pages/today-warning-admin/today-warning-admin.component.scss b/src/app/pages/today-warning-admin/today-warning-admin.component.scss index e8ae4c0..d4a330d 100644 --- a/src/app/pages/today-warning-admin/today-warning-admin.component.scss +++ b/src/app/pages/today-warning-admin/today-warning-admin.component.scss @@ -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; @@ -38,7 +40,7 @@ font-weight: 600; } - + } .search { @@ -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; + } + } + } + } + } +} diff --git a/src/app/pages/today-warning-admin/today-warning-admin.component.ts b/src/app/pages/today-warning-admin/today-warning-admin.component.ts index f98694b..4427d7c 100644 --- a/src/app/pages/today-warning-admin/today-warning-admin.component.ts +++ b/src/app/pages/today-warning-admin/today-warning-admin.component.ts @@ -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: { diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss index 44e11e0..8659464 100644 --- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss +++ b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss @@ -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; +// 适配125% +@media screen and (max-height: 750px) { + .box { width: 100%; - height: 100%; - box-sizing: border-box; - padding: 18px 20px; - - .title { - 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; - - } + height: 650px; + color: #fff; + display: flex; + flex-direction: column; + background-image: linear-gradient(#003B6E, #000D21); + position: relative; + } - .leftbox { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - margin-right: 70px; + .content { + .imgbox { - .lefttop, - .leftbottom { - width: 840px; - height: 280px; - border: 1px solid rgba(54, 162, 255, 0.47); + .bigimg { + // min-width: 1149px; + flex: 1; + box-sizing: border-box; + padding-left: 13px; display: flex; - flex-direction: column; - - - - .content { - flex: 1; - background: #001d3c; - } - } - - .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; - - div { - 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%; - 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; - } - } + justify-content: center; - display: flex; - width: 100%; - justify-content: space-around; - align-items: center; + img { + max-width: 100%; + max-height: 100%; } - } } + } +} - .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; - display: flex; - flex-direction: column; - justify-content: center; - // align-items:; - } - } - } +// 适配150% +@media screen and (max-height: 600px) { + .box { + width: 100%; + height: 480px; + color: #fff; + display: flex; + flex-direction: column; + 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; + img { + max-width: 100%; + max-height: 100%; } } - .errimg{ - box-shadow: 0px 0px 8px #FF4B65; - border: 1px solid #FF4B65; - } - - .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; -} diff --git a/src/app/pages/today-warning/today-warning.component.scss b/src/app/pages/today-warning/today-warning.component.scss index 78a2db0..254ebcb 100644 --- a/src/app/pages/today-warning/today-warning.component.scss +++ b/src/app/pages/today-warning/today-warning.component.scss @@ -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; @@ -37,8 +40,9 @@ font-weight: 600; } - + } + .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; + } + } + } + } + } +} diff --git a/src/app/pages/today-warning/today-warning.component.ts b/src/app/pages/today-warning/today-warning.component.ts index 7727c63..ead500d 100644 --- a/src/app/pages/today-warning/today-warning.component.ts +++ b/src/app/pages/today-warning/today-warning.component.ts @@ -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: { diff --git a/src/app/system-management/navigation/navigation.component.scss b/src/app/system-management/navigation/navigation.component.scss index 3a4a07a..036102a 100644 --- a/src/app/system-management/navigation/navigation.component.scss +++ b/src/app/system-management/navigation/navigation.component.scss @@ -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,8 +50,9 @@ nz-sider { margin-bottom: 16px; box-sizing: border-box; padding-left: 26%; - img{ - margin-right: 8px; + + img { + margin-right: 8px; } } diff --git a/src/app/ui/title/title.component.scss b/src/app/ui/title/title.component.scss index 35c7a8b..919d58b 100644 --- a/src/app/ui/title/title.component.scss +++ b/src/app/ui/title/title.component.scss @@ -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; + } + } + + } + } +} diff --git a/src/theme.less b/src/theme.less index 44dbc59..ef84883 100644 --- a/src/theme.less +++ b/src/theme.less @@ -385,15 +385,24 @@ } -.maxHeightTreeSelect{ +.maxHeightTreeSelect { max-height: 280px; } -.cdk-overlay-pane{ +.cdk-overlay-pane { // position: fixed!important; // top: 47px; // right: 26px!important; // left: none!important; - + // width: 88px; -} \ No newline at end of file +} + +.vertical-center-modal { + display: flex; + align-items: center; + justify-content: center; +} +.vertical-center-modal .ant-modal { + top: 0; +}