Skip to content

S
supervise-front
Commit 521a365d by niuxiaolin
Options

latest ui 08/20/2019 11:41:19

parents 03043b0d 00350ea8
Showing with 535 additions and 163 deletions
package-lock.json
......@@ -713,6 +713,15 @@
"semver-intersect": "1.4.0"
}
},
"@types/echarts": {
"version": "4.1.10",
"resolved": "https://registry.npmjs.org/@types/echarts/-/echarts-4.1.10.tgz",
"integrity": "sha512-AadUmn1mHp0RGNFwcDnNdVbz5LNZZla7V9B+3ptyEp31qiyRK0Hfr2yQLD26/4ojcLDSmUzyGfVrHrEXxgUmuA==",
"dev": true,
"requires": {
"@types/zrender": "*"
}
},
"@types/jasmine": {
"version": "2.8.16",
"resolved": "https://registry.npm.taobao.org/@types/jasmine/download/@types/jasmine-2.8.16.tgz",
......@@ -771,6 +780,12 @@
}
}
},
"@types/zrender": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.0.tgz",
"integrity": "sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w==",
"dev": true
},
"@webassemblyjs/ast": {
"version": "1.7.11",
"resolved": "https://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.7.11.tgz",
......@@ -2103,6 +2118,11 @@
"resolved": "https://registry.npm.taobao.org/classlist.js/download/classlist.js-1.1.20150312.tgz",
"integrity": "sha1-HXCEL3Ai8I2awIbOaeWyUPLFd4k="
},
"claygl": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
"integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
},
"clean-css": {
"version": "4.2.1",
"resolved": "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.1.tgz",
......@@ -2899,6 +2919,23 @@
"safer-buffer": "^2.1.0"
}
},
"echarts": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.2.1.tgz",
"integrity": "sha512-pw4xScRPsLegD/cqEcoXRKeA2SD4+s+Kyo0Na166NamOWhzNl2yI5RZ2rE97tBlAopNmhyMeBVpAeD5qb+ee1A==",
"requires": {
"zrender": "4.0.7"
}
},
"echarts-gl": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-1.1.1.tgz",
"integrity": "sha512-cRSTU9H+Ay+qCUFowm+2XcxYqCfi/OLK805NISeJunKgJa5p+7p7tnHZoI0qKebjtHu8VbFSOBk9UvWZ01adng==",
"requires": {
"claygl": "^1.2.1",
"zrender": "^4.0.4"
}
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
......@@ -6470,6 +6507,14 @@
"resolved": "https://registry.npm.taobao.org/ngx-color-picker/download/ngx-color-picker-8.1.0.tgz",
"integrity": "sha1-65n1MGJhaenuoVxMnHLAolIJRpY="
},
"ngx-echarts": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/ngx-echarts/-/ngx-echarts-4.2.1.tgz",
"integrity": "sha512-wdlIAkvnR9A1Wv4z8RMD2MX1Zinp9SmiCCu70nVYColV1c0LnFt0Ur85Uu/3yZlE/Yl1BblB5IAnHA3/iOG8cw==",
"requires": {
"tslib": "^1.9.0"
}
},
"nice-try": {
"version": "1.0.5",
"resolved": "https://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz",
......@@ -10678,6 +10723,11 @@
"version": "0.8.29",
"resolved": "https://registry.npm.taobao.org/zone.js/download/zone.js-0.8.29.tgz",
"integrity": "sha1-jc6Sqg3VU7ULxb+7kK+Zhq2EWhI="
},
"zrender": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.0.7.tgz",
"integrity": "sha512-TNloHe0ums6zxbHfnaCryM61J4IWDajZwNq6dHk9vfWhhysO/OeFvvR0drBs/nbXha2YxSzfQj2FiCd6RVBe+Q=="
}
}
}
package.json
......@@ -26,8 +26,11 @@
"angular2-baidu-map": "^4.7.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.5.4",
"echarts": "^4.2.1",
"echarts-gl": "^1.1.1",
"ng-zorro-antd": "^7.5.1",
"ngx-color-picker": "^8.1.0",
"ngx-echarts": "^4.2.1",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.2",
......@@ -38,9 +41,10 @@
"@angular/cli": "~7.3.9",
"@angular/compiler-cli": "~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/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
......
proxy.json
[
{
"context": [
"/project",
"/scetion",
"/course",
"/camera"
],
"target": "http://localhost:8081",
"secure": false
{
"*": {
"target": "http://192.168.19.199:80",
"secure": false,
"changeOrigin": true,
"logLevel": "info"
}
]
\ No newline at end of file
}
publish-to-backend.ps1
......@@ -8,7 +8,7 @@ git commit -m $msg
git push
Remove-Item -Recurse -Force D:\\projects\\supervise\\supervise\\src\\main\\resources\\static
mkdir D:\\projects\\supervise\\supervise\\src\\main\\resources\\static
Copy-Item D:\\projects\\map\\dist\\map\\* -Destination D:\\projects\\supervise\\supervise\\src\\main\\resources\\static -Recurse
Copy-Item .\\dist\\map\\* -Destination D:\\projects\\supervise\\supervise\\src\\main\\resources\\static -Recurse
cd ../supervise/supervise
git pull
git add .
......
src/app/api/api/default.service.ts
......@@ -42,7 +42,7 @@ import { environment } from 'src/environments/environment';
@Injectable()
export class DefaultService {
public basePath = 'https://localhost:443';
public basePath = 'https://localhost:8008';
// public basePath = 'http://192.168.19.199:8081';
// public basePath = environment.prod? 'http://localhost:8081':'http://192.168.19.199:8081';
public defaultHeaders = new HttpHeaders();
......@@ -52,7 +52,7 @@ export class DefaultService {
if(environment.production){
this.basePath="./";
}else{
this.basePath = "http://localhost";
this.basePath = "http://localhost:8008";
// this.basePath = "http://192.168.19.199";
}
// if (basePath) {
......
src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main/main.component';
import { VideoComponent } from './video/video.component';
import { LoginComponent } from './login/login.component';
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { MainComponent } from "./main/main.component";
import { VideoComponent } from "./video/video.component";
import { LoginComponent } from "./login/login.component";
import { QsMarkComponent } from "./qs-mark/qs-mark.component";
const routes: Routes = [
{path:"",redirectTo:"login",pathMatch:'full'},
{path:'home',component:MainComponent},
{path:'video',component:VideoComponent},
{path:'login',component:LoginComponent},
{ path: "", redirectTo: "login", pathMatch: "full" },
{ path: "home", component: MainComponent },
{ path: "video", component: VideoComponent },
{ path: "login", component: LoginComponent },
{ path: "qs-mark", component: QsMarkComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes,{
useHash:true
})],
imports: [
RouterModule.forRoot(routes, {
useHash: true
})
],
exports: [RouterModule]
})
export class AppRoutingModule { }
export class AppRoutingModule {}
src/app/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
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 { BrowserModule } from "@angular/platform-browser";
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 { QsMarkComponent } from "./qs-mark/qs-mark.component";
import { NgxEchartsModule } from "ngx-echarts";
@NgModule({
declarations: [
AppComponent,
MainComponent,
VideoComponent,
ModalComponent,
LoginComponent
LoginComponent,
QsMarkComponent
],
imports: [
HttpClientModule,
BrowserModule,
AppRoutingModule,
......@@ -34,12 +34,13 @@ import { LoginComponent } from './login/login.component';
FormsModule,
ReactiveFormsModule,
ApiModule,
NgxEchartsModule,
NzIconModule,
/** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule,
BaiduMapModule.forRoot({ ak: 'KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6' })
BaiduMapModule.forRoot({ ak: "KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6" })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export class AppModule {}
src/app/main/main.component.html
<h1 class="gradient">
山西省公路建设智慧监管指挥平台
</h1>
</h1>
<div *ngIf="debug">
标注：<input id="markerText" type="text">
......@@ -17,13 +16,13 @@
<option value="2">SECTION</option>
</select>
<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 [(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 [(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>
</div>
......@@ -122,7 +121,7 @@
<p>coordinate: <input type="text" [(ngModel)]="proj.coordinate" /></p>
<p>course: <input type="text" [(ngModel)]="proj.course" /></p>
<p>lineStyle:
<input [(colorPicker)]="proj.lineStyle" [style.background]="proj.lineStyle"/>
<input [(colorPicker)]="proj.lineStyle" [style.background]="proj.lineStyle" />
</p>
<p>lineWidth: <input type="text" [(ngModel)]="proj.lineWidth" /></p>
<p>mileage: <input type="text" [(ngModel)]="proj.mileage" /></p>
......@@ -137,12 +136,12 @@
<h1>添加course</h1>
<p>courses名称: <input type="text" [(ngModel)]="course.name" /></p>
<p>lineStyle:
<input [(colorPicker)]="course.lineStyle" [style.background]="course.lineStyle"/>
<input [(colorPicker)]="course.lineStyle" [style.background]="course.lineStyle" />
</p>
<p>lineWidth: <input type="text" [(ngModel)]="course.lineWidth" /></p>
<p>coordinate: <input type="text" [(ngModel)]="course.coordinate" /></p>
<p>mark:
<select [(ngModel)]="course.mark" >
<select [(ngModel)]="course.mark">
<option [value]="1">高速公路</option>
<option [value]="2">普通干线</option>
</select>
......@@ -150,14 +149,14 @@
<button (click)="addCourse(course)">添加</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>
<p>section名称: <input type="text" [(ngModel)]="section.name" /></p>
<p>projectId: <input type="text" [(ngModel)]="section.project" /></p>
<p>lineStyle:
<input [(colorPicker)]="section.lineStyle" [style.background]="section.lineStyle"/>
<input [(colorPicker)]="section.lineStyle" [style.background]="section.lineStyle" />
</p>
<p>lineWidth: <input type="text" [(ngModel)]="section.lineWidth" /></p>
<p>coordinate: <input type="text" [(ngModel)]="section.coordinate" /></p>
......@@ -166,13 +165,13 @@
<button (click)="addSection(section)">添加</button>
<button (click)="closeModal('custom-modal-3');">Close</button>
</jw-modal>
<jw-modal id="marker">
</jw-modal>
<jw-modal id="marker">
<h1>添加marker</h1>
<p>marker 名称: <input type="text" [(ngModel)]="marker.name" /></p>
<p>子标题 名称: <input type="text" [(ngModel)]="marker.mark" /></p>
<p>divStyle:
<input [(colorPicker)]="marker.divStyle" [style.background]="marker.divStyle"/>
<input [(colorPicker)]="marker.divStyle" [style.background]="marker.divStyle" />
</p>
<p>coordinate: <input type="text" [(ngModel)]="marker.coordinate" /></p>
......@@ -181,7 +180,7 @@
<button (click)="addMarker(marker)">添加</button>
<button (click)="closeModal('marker');">Close</button>
</jw-modal>
</jw-modal>
<div class="function">
<div class="tooltip">
......@@ -189,7 +188,7 @@
<span class="tooltiptextx">视频监控</span>
</div>
<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">
</a>
......@@ -212,3 +211,25 @@
</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;
// grid-template-columns: 15% auto 15%;
// grid-template-rows:850px;
fieldset{
fieldset {
// padding: 1em;
// background: #3885b338;
// margin: 5px;
......@@ -13,9 +13,10 @@
// border: 1px solid #613d3d;
// margin-bottom: 1em;
// margin-left: 2em;
height:288px;
height: 288px;
position: relative;
button{
button {
//position: absolute;
background: #dbdbc90f;
color: #16e8d6;
......@@ -30,7 +31,8 @@
border: 2px solid #f3f42678;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&:hover{
&:hover {
background: #48a9a0;
}
}
......@@ -40,12 +42,13 @@
// grid-template-columns: 77% auto;
// color: #eaab4e;
// }
&.sub{
&.sub {
padding: 0.4em;
border: none;
margin: 0;
padding:0.4em;
border:none;
margin:0;
label{
label {
cursor: pointer;
background: #076796;
......@@ -55,30 +58,30 @@
}
}
.left{
.left {
width: 301px;
position: absolute;
top: 15%;
top: 19%;
display: flex;
flex-direction: column;
}
.map{
}
.map {}
}
.focus{
background: #ea262d96!important;
.focus {
background: #ea262d96 !important;
}
baidu-map{
baidu-map {
width: 100%;
height: 900px;
display: block;
}
.function{
.function {
// right: 128px;
// /* bottom: 60px; */
......@@ -86,11 +89,11 @@ baidu-map{
// width: 35px;
position: absolute;
right: 10%;
top: 10%;
top: 12%;
width: 2em;
img{
background:#3170f8;
img {
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;*/
border-radius: 14px;
// margin-bottom: 1.3em;
......@@ -99,15 +102,16 @@ baidu-map{
}
}
.right{
.right {
position: absolute;
right: 80px;
top: 20px;
}
.proj-info{
.proj-info {
label{
label {
display: -ms-grid;
display: grid;
-ms-grid-columns: 70% 30%;
......@@ -117,74 +121,80 @@ baidu-map{
padding-top: 1em;
font-size: 22px;
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;
background: #015293;
margin: 5px;
border-radius: 13px;
margin-bottom: 5em;
margin-left: 2em;
width:180%;
legend{
width: 180%;
legend {
color: #015293;
padding: 0.5em;
background: #c1d9ef;
font-weight: bolder;
font-size: 19px;
border-radius: 8px;
// &:hover{
// background: #00daff33;
// padding: 0.5em;
// border: 1px solid #16e8d6;
// cursor: pointer;
// }
&:hover{
&:hover {
cursor: pointer;
}
}
}
.sub{
.sub {
padding:0.4em;
border:none;
padding: 0.4em;
border: none;
// background: #07679657;
margin:0;
.item{
margin: 0;
.item {
text-align: left;
padding-top: 0.3em;
font-size: 22px;
color: white;
}
label{
label {
cursor: pointer;
padding: 0.2em;
// border: 1px solid #42a5d23b;
}
}
}
.tooltip {
.tooltip {
position: relative;
display: inline-block;
margin-top: 1.6em;
text-align: center;
width:70px;
}
width: 70px;
}
.tooltip .tooltiptext {
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
border:1px solid #16e8d6;
border: 1px solid #16e8d6;
background-color: black;
color: #16e8d6;
text-align: center;
......@@ -193,49 +203,53 @@ fieldset{
/* Position the tooltip */
position: absolute;
top:-28px;
left:-4px;
top: -28px;
left: -4px;
z-index: 1;
}
}
.tooltip:hover .tooltiptext {
.tooltip:hover .tooltiptext {
visibility: visible;
}
}
#baidu-map{
#baidu-map {
width: 100%;
height: 900px;
display: block;
// background-color:rgb(9, 18, 32)!important;
}
.function{
>.tooltip{
margin-bottom:1em;
.function {
>.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 */
// body{
// background:red;
// }
.ie-fix1{
display:inline-block;
.ie-fix1 {
display: inline-block;
}
.ie-fix{
float:right;
.ie-fix {
float: right;
}
.proj-info{
.proj-info {
label{
display:inline-block;
}
label {
display: inline-block;
}
}
}
/*
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
......@@ -244,67 +258,136 @@ fieldset{
//CSS
}
}
/*
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1380px) {
.main{
.left{
width:250px;
@media (min-width: 1025px) and (max-width: 1440px) {
.main {
.left {
width: 250px;
}
}
legend{
width:24%!important;
legend {
width: 24% !important;
}
//CSS
.function {
>.tooltip {
margin-bottom: 0;
}
}
fieldset {
margin-bottom: 2em;
}
/*
.tooltip {
margin-top: 1.2em;
}
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
@media (min-width: 768px) and (max-width: 1024px) {
//CSS
}
}
/*
/*
##Device = Tablets, Ipads (landscape)
##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
}
}
/*
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
@media (min-width: 481px) and (max-width: 767px) {
//CSS
}
}
/*
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
@media (min-width: 320px) and (max-width: 480px) {
//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>
山西省交通运输厅智慧监管指挥平台
</h1>
<div class="main">
<div class="left">
......@@ -53,4 +51,4 @@
<nz-modal [(nzVisible)]="isVisible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<p>插件启动失败，请检查插件是否安装！</p>
<p>下载地址：<a href="/assets/VideoWebPlugin.exe">VideoWebPlugin.exe</a></p>
</nz-modal>
</nz-modal>
src/app/video/video.component.less
......@@ -29,7 +29,7 @@
}
#playWnd{
width:1000px;
width:900px;
height: 500px;
// border:1px solid red;
}
......
src/app/video/video.component.ts
......@@ -299,8 +299,12 @@ export class VideoComponent implements OnInit {
// })
// })
var width=$(document).width()
var ratio = 0.75;
if(window.screen.width==1440){
ratio = 0.65;
}
var height=$(document).height()
oWebControl.JS_Resize(width*0.75, height*0.75); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
oWebControl.JS_Resize(width*ratio, height*0.75); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
});
});
}
......
src/main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
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) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
platformBrowserDynamic()
.bootstrapModule(AppModule)
.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