Skip to content

S
supervise-front
Commit 00350ea8 by 杨子
Options

update

parent a0efcbfe
Showing with 473 additions and 166 deletions
package.json
...@@ -26,8 +26,11 @@ ...@@ -26,8 +26,11 @@
"angular2-baidu-map": "^4.7.0", "angular2-baidu-map": "^4.7.0",
"classlist.js": "^1.1.20150312", "classlist.js": "^1.1.20150312",
"core-js": "^2.5.4", "core-js": "^2.5.4",
"echarts": "^4.2.1",
"echarts-gl": "^1.1.1",
"ng-zorro-antd": "^7.5.1", "ng-zorro-antd": "^7.5.1",
"ngx-color-picker": "^8.1.0", "ngx-color-picker": "^8.1.0",
"ngx-echarts": "^4.2.1",
"rxjs": "~6.3.3", "rxjs": "~6.3.3",
"tslib": "^1.9.0", "tslib": "^1.9.0",
"web-animations-js": "^2.3.2", "web-animations-js": "^2.3.2",
...@@ -38,9 +41,10 @@ ...@@ -38,9 +41,10 @@
"@angular/cli": "~7.3.9", "@angular/cli": "~7.3.9",
"@angular/compiler-cli": "~7.2.0", "@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0", "@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4", "@types/echarts": "^4.1.10",
"@types/jasmine": "~2.8.8", "@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3", "@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0", "codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1", "jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1", "jasmine-spec-reporter": "~4.2.1",
......
proxy.json
{
[ "*": {
{ "target": "http://192.168.19.199:80",
"context": [ "secure": false,
"/project", "changeOrigin": true,
"/scetion", "logLevel": "info"
"/course",
"/camera"
],
"target": "http://localhost:8081",
"secure": false
} }
] }
\ No newline at end of file
src/app/api/api/default.service.ts
...@@ -42,7 +42,7 @@ import { environment } from 'src/environments/environment'; ...@@ -42,7 +42,7 @@ import { environment } from 'src/environments/environment';
@Injectable() @Injectable()
export class DefaultService { export class DefaultService {
public basePath = 'https://localhost:443'; public basePath = 'https://localhost:8008';
// public basePath = 'http://192.168.19.199:8081'; // public basePath = 'http://192.168.19.199:8081';
// public basePath = environment.prod? 'http://localhost:8081':'http://192.168.19.199:8081'; // public basePath = environment.prod? 'http://localhost:8081':'http://192.168.19.199:8081';
public defaultHeaders = new HttpHeaders(); public defaultHeaders = new HttpHeaders();
...@@ -52,7 +52,7 @@ export class DefaultService { ...@@ -52,7 +52,7 @@ export class DefaultService {
if(environment.production){ if(environment.production){
this.basePath="./"; this.basePath="./";
}else{ }else{
this.basePath = "http://localhost"; this.basePath = "http://localhost:8008";
// this.basePath = "http://192.168.19.199"; // this.basePath = "http://192.168.19.199";
} }
// if (basePath) { // if (basePath) {
......
src/app/app-routing.module.ts
import { NgModule } from '@angular/core'; import { NgModule } from "@angular/core";
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from "@angular/router";
import { MainComponent } from './main/main.component'; import { MainComponent } from "./main/main.component";
import { VideoComponent } from './video/video.component'; import { VideoComponent } from "./video/video.component";
import { LoginComponent } from './login/login.component'; import { LoginComponent } from "./login/login.component";
import { QsMarkComponent } from "./qs-mark/qs-mark.component";
const routes: Routes = [ const routes: Routes = [
{path:"",redirectTo:"login",pathMatch:'full'}, { path: "", redirectTo: "login", pathMatch: "full" },
{path:'home',component:MainComponent}, { path: "home", component: MainComponent },
{path:'video',component:VideoComponent}, { path: "video", component: VideoComponent },
{path:'login',component:LoginComponent}, { path: "login", component: LoginComponent },
{ path: "qs-mark", component: QsMarkComponent }
]; ];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes,{ imports: [
useHash:true RouterModule.forRoot(routes, {
})], useHash: true
})
],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule {}
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from '@angular/core'; import { NgModule } from "@angular/core";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
import { VideoComponent } from './video/video.component';
import { BaiduMapModule } from 'angular2-baidu-map';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ModalComponent } from './modal/modal.component';
import { ApiModule } from './api';
import { HttpClientModule } from '@angular/common/http';
import { ColorPickerModule } from 'ngx-color-picker';
import { NgZorroAntdModule, NZ_I18N, zh_CN,NzIconModule } from 'ng-zorro-antd';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LoginComponent } from './login/login.component';
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { MainComponent } from "./main/main.component";
import { VideoComponent } from "./video/video.component";
import { BaiduMapModule } from "angular2-baidu-map";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { ModalComponent } from "./modal/modal.component";
import { ApiModule } from "./api";
import { HttpClientModule } from "@angular/common/http";
import { ColorPickerModule } from "ngx-color-picker";
import { NgZorroAntdModule, NZ_I18N, zh_CN, NzIconModule } from "ng-zorro-antd";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { LoginComponent } from "./login/login.component";
import { QsMarkComponent } from "./qs-mark/qs-mark.component";
import { NgxEchartsModule } from "ngx-echarts";
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
MainComponent, MainComponent,
VideoComponent, VideoComponent,
ModalComponent, ModalComponent,
LoginComponent LoginComponent,
QsMarkComponent
], ],
imports: [ imports: [
HttpClientModule, HttpClientModule,
BrowserModule, BrowserModule,
AppRoutingModule, AppRoutingModule,
...@@ -34,12 +34,13 @@ import { LoginComponent } from './login/login.component'; ...@@ -34,12 +34,13 @@ import { LoginComponent } from './login/login.component';
FormsModule, FormsModule,
ReactiveFormsModule, ReactiveFormsModule,
ApiModule, ApiModule,
NgxEchartsModule,
NzIconModule, NzIconModule,
/** 导入 ng-zorro-antd 模块 **/ /** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule, NgZorroAntdModule,
BaiduMapModule.forRoot({ ak: 'KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6' }) BaiduMapModule.forRoot({ ak: "KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6" })
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule {}
src/app/main/main.component.html
<h1 class="gradient"> <h1 class="gradient">
山西省公路建设智慧监管指挥平台 山西省公路建设智慧监管指挥平台
</h1> </h1>
<div *ngIf="debug"> <div *ngIf="debug">
标注：<input id="markerText" type="text"> 标注：<input id="markerText" type="text">
...@@ -17,13 +16,13 @@ ...@@ -17,13 +16,13 @@
<option value="2">SECTION</option> <option value="2">SECTION</option>
</select> </select>
<select [(ngModel)]="currentCouseId"> <select [(ngModel)]="currentCouseId">
<option *ngFor="let c of courses" [value]="c.id" >{{c.name}}</option> <option *ngFor="let c of courses" [value]="c.id">{{c.name}}</option>
</select> </select>
<select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,1)"> <select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,1)">
<option *ngFor="let c of projects1" [value]="c.id" >{{c.name}}</option> <option *ngFor="let c of projects1" [value]="c.id">{{c.name}}</option>
</select> </select>
<select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,2)"> <select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,2)">
<option *ngFor="let c of projects2" [value]="c.id" >{{c.name}}</option> <option *ngFor="let c of projects2" [value]="c.id">{{c.name}}</option>
</select> </select>
</div> </div>
...@@ -117,7 +116,7 @@ ...@@ -117,7 +116,7 @@
<p>coordinate: <input type="text" [(ngModel)]="proj.coordinate" /></p> <p>coordinate: <input type="text" [(ngModel)]="proj.coordinate" /></p>
<p>course: <input type="text" [(ngModel)]="proj.course" /></p> <p>course: <input type="text" [(ngModel)]="proj.course" /></p>
<p>lineStyle: <p>lineStyle:
<input [(colorPicker)]="proj.lineStyle" [style.background]="proj.lineStyle"/> <input [(colorPicker)]="proj.lineStyle" [style.background]="proj.lineStyle" />
</p> </p>
<p>lineWidth: <input type="text" [(ngModel)]="proj.lineWidth" /></p> <p>lineWidth: <input type="text" [(ngModel)]="proj.lineWidth" /></p>
<p>mileage: <input type="text" [(ngModel)]="proj.mileage" /></p> <p>mileage: <input type="text" [(ngModel)]="proj.mileage" /></p>
...@@ -132,12 +131,12 @@ ...@@ -132,12 +131,12 @@
<h1>添加course</h1> <h1>添加course</h1>
<p>courses名称: <input type="text" [(ngModel)]="course.name" /></p> <p>courses名称: <input type="text" [(ngModel)]="course.name" /></p>
<p>lineStyle: <p>lineStyle:
<input [(colorPicker)]="course.lineStyle" [style.background]="course.lineStyle"/> <input [(colorPicker)]="course.lineStyle" [style.background]="course.lineStyle" />
</p> </p>
<p>lineWidth: <input type="text" [(ngModel)]="course.lineWidth" /></p> <p>lineWidth: <input type="text" [(ngModel)]="course.lineWidth" /></p>
<p>coordinate: <input type="text" [(ngModel)]="course.coordinate" /></p> <p>coordinate: <input type="text" [(ngModel)]="course.coordinate" /></p>
<p>mark: <p>mark:
<select [(ngModel)]="course.mark" > <select [(ngModel)]="course.mark">
<option [value]="1">高速公路</option> <option [value]="1">高速公路</option>
<option [value]="2">普通干线</option> <option [value]="2">普通干线</option>
</select> </select>
...@@ -145,14 +144,14 @@ ...@@ -145,14 +144,14 @@
<button (click)="addCourse(course)">添加</button> <button (click)="addCourse(course)">添加</button>
<button (click)="closeModal('custom-modal-2');">Close</button> <button (click)="closeModal('custom-modal-2');">Close</button>
</jw-modal> </jw-modal>
<jw-modal id="custom-modal-3"> <jw-modal id="custom-modal-3">
<h1>添加section</h1> <h1>添加section</h1>
<p>section名称: <input type="text" [(ngModel)]="section.name" /></p> <p>section名称: <input type="text" [(ngModel)]="section.name" /></p>
<p>projectId: <input type="text" [(ngModel)]="section.project" /></p> <p>projectId: <input type="text" [(ngModel)]="section.project" /></p>
<p>lineStyle: <p>lineStyle:
<input [(colorPicker)]="section.lineStyle" [style.background]="section.lineStyle"/> <input [(colorPicker)]="section.lineStyle" [style.background]="section.lineStyle" />
</p> </p>
<p>lineWidth: <input type="text" [(ngModel)]="section.lineWidth" /></p> <p>lineWidth: <input type="text" [(ngModel)]="section.lineWidth" /></p>
<p>coordinate: <input type="text" [(ngModel)]="section.coordinate" /></p> <p>coordinate: <input type="text" [(ngModel)]="section.coordinate" /></p>
...@@ -161,13 +160,13 @@ ...@@ -161,13 +160,13 @@
<button (click)="addSection(section)">添加</button> <button (click)="addSection(section)">添加</button>
<button (click)="closeModal('custom-modal-3');">Close</button> <button (click)="closeModal('custom-modal-3');">Close</button>
</jw-modal> </jw-modal>
<jw-modal id="marker"> <jw-modal id="marker">
<h1>添加marker</h1> <h1>添加marker</h1>
<p>marker 名称: <input type="text" [(ngModel)]="marker.name" /></p> <p>marker 名称: <input type="text" [(ngModel)]="marker.name" /></p>
<p>子标题 名称: <input type="text" [(ngModel)]="marker.mark" /></p> <p>子标题 名称: <input type="text" [(ngModel)]="marker.mark" /></p>
<p>divStyle: <p>divStyle:
<input [(colorPicker)]="marker.divStyle" [style.background]="marker.divStyle"/> <input [(colorPicker)]="marker.divStyle" [style.background]="marker.divStyle" />
</p> </p>
<p>coordinate: <input type="text" [(ngModel)]="marker.coordinate" /></p> <p>coordinate: <input type="text" [(ngModel)]="marker.coordinate" /></p>
...@@ -176,7 +175,7 @@ ...@@ -176,7 +175,7 @@
<button (click)="addMarker(marker)">添加</button> <button (click)="addMarker(marker)">添加</button>
<button (click)="closeModal('marker');">Close</button> <button (click)="closeModal('marker');">Close</button>
</jw-modal> </jw-modal>
<div class="function"> <div class="function">
<div class="tooltip"> <div class="tooltip">
...@@ -184,7 +183,7 @@ ...@@ -184,7 +183,7 @@
<span class="tooltiptextx">视频监控</span> <span class="tooltiptextx">视频监控</span>
</div> </div>
<div class="tooltip"> <div class="tooltip">
<a href="http://47.92.203.246/pcByFullScreen/#/pcByFullScreen/" target="_blank"> <a routerLink="/qs-mark">
<img alt="质量安全监管" class="tooltip" src="/assets/baseline-security.svg"> <img alt="质量安全监管" class="tooltip" src="/assets/baseline-security.svg">
</a> </a>
...@@ -207,3 +206,25 @@ ...@@ -207,3 +206,25 @@
</div> </div>
</div> </div>
<div class="b-mark">
<div class="legend">图例</div>
<div class="con">
<div class="mark-c">
<div class="line g-line"></div>
<div>已建成高速公路</div>
</div>
<div class="mark-c">
<div class="line b-line"></div>
<div>在建项目</div>
</div>
<div class="mark-c">
<div class="line v-line"></div>
<div style="width:98px;">拟开工项目</div>
</div>
<div class="mark-c">
<div class="line o-line"></div>
<div>待建项目</div>
</div>
</div>
</div>
src/app/main/main.component.less
.main{ .main {
// display: grid; // display: grid;
// grid-template-columns: 15% auto 15%; // grid-template-columns: 15% auto 15%;
// grid-template-rows:850px; // grid-template-rows:850px;
fieldset{ fieldset {
// padding: 1em; // padding: 1em;
// background: #3885b338; // background: #3885b338;
// margin: 5px; // margin: 5px;
...@@ -13,9 +13,10 @@ ...@@ -13,9 +13,10 @@
// border: 1px solid #613d3d; // border: 1px solid #613d3d;
// margin-bottom: 1em; // margin-bottom: 1em;
// margin-left: 2em; // margin-left: 2em;
height:288px; height: 288px;
position: relative; position: relative;
button{
button {
//position: absolute; //position: absolute;
background: #dbdbc90f; background: #dbdbc90f;
color: #16e8d6; color: #16e8d6;
...@@ -30,7 +31,8 @@ ...@@ -30,7 +31,8 @@
border: 2px solid #f3f42678; border: 2px solid #f3f42678;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
&:hover{
&:hover {
background: #48a9a0; background: #48a9a0;
} }
} }
...@@ -40,12 +42,13 @@ ...@@ -40,12 +42,13 @@
// grid-template-columns: 77% auto; // grid-template-columns: 77% auto;
// color: #eaab4e; // color: #eaab4e;
// } // }
&.sub{ &.sub {
padding: 0.4em;
border: none;
margin: 0;
padding:0.4em; label {
border:none;
margin:0;
label{
cursor: pointer; cursor: pointer;
background: #076796; background: #076796;
...@@ -55,30 +58,30 @@ ...@@ -55,30 +58,30 @@
} }
} }
.left{ .left {
width: 301px; width: 301px;
position: absolute; position: absolute;
top: 15%; top: 19%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.map{ .map {}
}
} }
.focus{
background: #ea262d96!important; .focus {
background: #ea262d96 !important;
} }
baidu-map{
baidu-map {
width: 100%; width: 100%;
height: 900px; height: 900px;
display: block; display: block;
} }
.function{ .function {
// right: 128px; // right: 128px;
// /* bottom: 60px; */ // /* bottom: 60px; */
...@@ -86,11 +89,11 @@ baidu-map{ ...@@ -86,11 +89,11 @@ baidu-map{
// width: 35px; // width: 35px;
position: absolute; position: absolute;
right: 10%; right: 10%;
top: 10%; top: 12%;
width: 2em; width: 2em;
img{ img {
background:#3170f8; background: #3170f8;
/*box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #4a83b4, 0 0 35px #4a83b4, 0 0 40px #4a83b4, 0 0 50px #4a83b4, 0 0 75px #4a83b4;*/ /*box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #4a83b4, 0 0 35px #4a83b4, 0 0 40px #4a83b4, 0 0 50px #4a83b4, 0 0 75px #4a83b4;*/
border-radius: 14px; border-radius: 14px;
// margin-bottom: 1.3em; // margin-bottom: 1.3em;
...@@ -99,15 +102,16 @@ baidu-map{ ...@@ -99,15 +102,16 @@ baidu-map{
} }
} }
.right{
.right {
position: absolute; position: absolute;
right: 80px; right: 80px;
top: 20px; top: 20px;
} }
.proj-info{ .proj-info {
label{ label {
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
-ms-grid-columns: 70% 30%; -ms-grid-columns: 70% 30%;
...@@ -117,74 +121,80 @@ baidu-map{ ...@@ -117,74 +121,80 @@ baidu-map{
padding-top: 1em; padding-top: 1em;
font-size: 22px; font-size: 22px;
width: 374px; width: 374px;
div:nth-of-type(1){
color:white; div:nth-of-type(1) {
color: white;
} }
} }
} }
fieldset{
border:3px solid #bdc5d4; fieldset {
border: 3px solid #bdc5d4;
padding: 1em; padding: 1em;
background: #015293; background: #015293;
margin: 5px; margin: 5px;
border-radius: 13px; border-radius: 13px;
margin-bottom: 5em; margin-bottom: 5em;
margin-left: 2em; margin-left: 2em;
width:180%; width: 180%;
legend{
legend {
color: #015293; color: #015293;
padding: 0.5em; padding: 0.5em;
background: #c1d9ef; background: #c1d9ef;
font-weight: bolder; font-weight: bolder;
font-size: 19px; font-size: 19px;
border-radius: 8px; border-radius: 8px;
// &:hover{ // &:hover{
// background: #00daff33; // background: #00daff33;
// padding: 0.5em; // padding: 0.5em;
// border: 1px solid #16e8d6; // border: 1px solid #16e8d6;
// cursor: pointer; // cursor: pointer;
// } // }
&:hover{ &:hover {
cursor: pointer; cursor: pointer;
} }
} }
} }
.sub{ .sub {
padding:0.4em; padding: 0.4em;
border:none; border: none;
// background: #07679657; // background: #07679657;
margin:0; margin: 0;
.item{
.item {
text-align: left; text-align: left;
padding-top: 0.3em; padding-top: 0.3em;
font-size: 22px; font-size: 22px;
color: white; color: white;
} }
label{
label {
cursor: pointer; cursor: pointer;
padding: 0.2em; padding: 0.2em;
// border: 1px solid #42a5d23b; // border: 1px solid #42a5d23b;
} }
} }
.tooltip { .tooltip {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin-top: 1.6em; margin-top: 1.6em;
text-align: center; text-align: center;
width:70px; width: 70px;
} }
.tooltip .tooltiptext { .tooltip .tooltiptext {
visibility: hidden; visibility: hidden;
width: 120px; width: 120px;
border:1px solid #16e8d6; border: 1px solid #16e8d6;
background-color: black; background-color: black;
color: #16e8d6; color: #16e8d6;
text-align: center; text-align: center;
...@@ -193,49 +203,53 @@ fieldset{ ...@@ -193,49 +203,53 @@ fieldset{
/* Position the tooltip */ /* Position the tooltip */
position: absolute; position: absolute;
top:-28px; top: -28px;
left:-4px; left: -4px;
z-index: 1; z-index: 1;
} }
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
visibility: visible; visibility: visible;
} }
#baidu-map{ #baidu-map {
width: 100%; width: 100%;
height: 900px; height: 900px;
display: block; display: block;
// background-color:rgb(9, 18, 32)!important; // background-color:rgb(9, 18, 32)!important;
} }
.function{
>.tooltip{ .function {
margin-bottom:1em; >.tooltip {
margin-bottom: 1em;
} }
} }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { @media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
/* IE10+ CSS styles go here */ /* IE10+ CSS styles go here */
// body{ // body{
// background:red; // background:red;
// } // }
.ie-fix1{ .ie-fix1 {
display:inline-block; display: inline-block;
} }
.ie-fix{
float:right; .ie-fix {
float: right;
} }
.proj-info{ .proj-info {
label{ label {
display:inline-block; display: inline-block;
}
} }
} }
}
/* /*
##Device = Desktops ##Device = Desktops
##Screen = 1281px to higher resolution desktops ##Screen = 1281px to higher resolution desktops
*/ */
...@@ -244,78 +258,136 @@ fieldset{ ...@@ -244,78 +258,136 @@ fieldset{
//CSS //CSS
} }
/* /*
##Device = Laptops, Desktops ##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px ##Screen = B/w 1025px to 1280px
*/ */
@media (min-width: 1025px) and (max-width: 1440px) { @media (min-width: 1025px) and (max-width: 1440px) {
.main{ .main {
.left{ .left {
width:250px; width: 250px;
} }
} }
legend{ legend {
width:24%!important; width: 24% !important;
} }
//CSS //CSS
.function{ .function {
>.tooltip{ >.tooltip {
margin-bottom:0; margin-bottom: 0;
} }
} }
fieldset{
fieldset {
margin-bottom: 2em; margin-bottom: 2em;
} }
.tooltip{
.tooltip {
margin-top: 1.2em; margin-top: 1.2em;
} }
} }
/* /*
##Device = Tablets, Ipads (portrait) ##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px ##Screen = B/w 768px to 1024px
*/ */
@media (min-width: 768px) and (max-width: 1024px) { @media (min-width: 768px) and (max-width: 1024px) {
//CSS //CSS
} }
/* /*
##Device = Tablets, Ipads (landscape) ##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px ##Screen = B/w 768px to 1024px
*/ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
//CSS //CSS
} }
/* /*
##Device = Low Resolution Tablets, Mobiles (Landscape) ##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px ##Screen = B/w 481px to 767px
*/ */
@media (min-width: 481px) and (max-width: 767px) { @media (min-width: 481px) and (max-width: 767px) {
//CSS //CSS
} }
/* /*
##Device = Most of the Smartphones Mobiles (Portrait) ##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px ##Screen = B/w 320px to 479px
*/ */
@media (min-width: 320px) and (max-width: 480px) { @media (min-width: 320px) and (max-width: 480px) {
//CSS //CSS
}
:host {
.b-mark {
position: absolute;
width: 340px;
height: 64px;
background: #fff;
bottom: 0;
left: 50%;
margin-left: -150px;
display: flex;
align-items: center;
.legend {
width: 42px;
text-align: center;
}
.line {
width: 50px;
height: 4px;
margin-right: 8px;
} }
.g-line {
background: rgb(25, 166, 28);
}
.b-line {
background: blue;
}
.v-line {
background: rgb(147, 0, 147);
}
.o-line {
background: red;
}
.con {
display: flex;
flex-wrap: wrap;
.mark-c {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
src/app/qs-mark/qs-mark.component.html 0 → 100644
<h1 class="gradient">
山西省交通运输厅智慧监管指挥平台
</h1>
<div class="main">
<div class="aside">
<button class="ie-fix-button" (click)="back()">返回</button>
<nz-tree [nzShowIcon]="true" [nzTreeTemplate]="nzTreeTemplate" [nzData]="nodes" nzAsyncData
(nzClick)="addVCR($event)" (nzExpandChange)="nzEvent($event)">
<ng-template #nzTreeTemplate let-node>
<span *ngIf="node.isLeaf">
<i nz-icon nzType="video-camera" nzTheme="outline"></i>
{{node.title}}
</span>
<span *ngIf="!node.isLeaf">
<i nz-icon nzType="cluster" nzTheme="outline"></i>
{{node.title}}
</span>
</ng-template>
</nz-tree>
</div>
<div class="content">
<div class="loading">
<div class="left"></div>
<div class="right"></div>
<div class="progress">质量监管</div>
</div>
</div>
</div>
src/app/qs-mark/qs-mark.component.less 0 → 100644
.ie-fix-button {
background: #dbdbc90f;
color: #16e8d6;
border-radius: 9px;
width: 130px;
height: 39px;
display: block;
margin: 0.3em;
font-size: initial;
top: -41px;
left: -8px;
border: 2px solid #f3f42678;
}
.aside {
width: 301px;
position: absolute;
top: 15%;
display: flex;
flex-direction: column;
}
.content {
margin-left: 301px;
}
@media (min-width: 1025px) and (max-width: 1440px) {
.main {
.aside {
width: 250px;
}
}
.content {
margin-left: 250px;
}
}
.demo-chart {
height: 400px;
}
.loading {
margin: 100px auto;
width: 8em;
height: 8em;
position: relative;
}
.loading .progress {
position: absolute;
width: 6em;
height: 6em;
background-color: white;
border-radius: 50%;
left: 1em;
top: 1em;
line-height: 6em;
text-align: center;
}
.left,
.right {
width: 4em;
height: 8em;
overflow: hidden;
position: relative;
float: left;
background-color: #999999
}
.left {
border-radius: 8em 0 0 8em;
}
.right {
border-radius: 0 8em 8em 0;
}
.left:after,
.right:after {
content: "";
position: absolute;
display: block;
width: 4em;
height: 8em;
background-color: white;
border-radius: 8em 0 0 8em;
background-color: red;
}
.right:after {
content: "";
position: absolute;
display: block;
border-radius: 0 8em 8em 0;
}
.left:after {
transform-origin: right center;
}
.right:after {
transform-origin: left center;
transform: rotateZ(45deg);
}
src/app/qs-mark/qs-mark.component.spec.ts 0 → 100644
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { QsMarkComponent } from './qs-mark.component';
describe('QsMarkComponent', () => {
let component: QsMarkComponent;
let fixture: ComponentFixture<QsMarkComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ QsMarkComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(QsMarkComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/qs-mark/qs-mark.component.ts 0 → 100644
import { Component, OnInit } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { NzFormatEmitEvent } from "ng-zorro-antd";
import { DefaultService } from "../api";
import { EChartOption } from "echarts";
@Component({
selector: "app-qs-mark",
templateUrl: "./qs-mark.component.html",
styleUrls: ["./qs-mark.component.less"]
})
export class QsMarkComponent implements OnInit {
nodes = [{ title: "高速公路", key: "1" }, { title: "普通干线", key: "0" }];
constructor(private http: HttpClient, private d: DefaultService) {}
ngOnInit() {}
nzEvent(event: Required<NzFormatEmitEvent>) {
console.log(event);
// load child async
if (event.eventName === "expand") {
const node = event.node;
let request = null;
if (node.level == 0) {
request = "/project/list/";
} else {
request = "";
return false;
}
if (node && node.getChildren().length === 0 && node.isExpanded) {
this.http.get(this.d.basePath + request + node.key).subscribe(res => {
node.addChildren(
(res as any).data.map(function(d, index) {
return {
title: d.name || d.cameraName,
key: d.id || d.cameraIndexCode,
index,
isLeaf: node.level == 2
};
})
);
});
}
}
}
}
src/app/video/video.component.html
<h1 class="gradient"> <h1 class="gradient">
山西省公路建设智慧监管指挥平台 山西省交通运输厅智慧监管指挥平台
</h1> </h1>
<div class="main"> <div class="main">
<div class="left"> <div class="left">
...@@ -53,4 +51,4 @@ ...@@ -53,4 +51,4 @@
<nz-modal [(nzVisible)]="isVisible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"> <nz-modal [(nzVisible)]="isVisible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<p>插件启动失败，请检查插件是否安装！</p> <p>插件启动失败，请检查插件是否安装！</p>
<p>下载地址：<a href="/assets/VideoWebPlugin.exe">VideoWebPlugin.exe</a></p> <p>下载地址：<a href="/assets/VideoWebPlugin.exe">VideoWebPlugin.exe</a></p>
</nz-modal> </nz-modal>
src/main.ts
import { enableProdMode } from '@angular/core'; import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
/** echarts extensions: */
import "echarts-gl";
import "echarts/theme/macarons.js";
import "echarts/dist/extension/bmap.min.js";
if (environment.production) { if (environment.production) {
enableProdMode(); enableProdMode();
} }
platformBrowserDynamic().bootstrapModule(AppModule) platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.error(err)); .catch(err => console.error(err));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment