Skip to content

S
supervise-front
Commit 521a365d by niuxiaolin
Options

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

parents 03043b0d 00350ea8
Showing with 793 additions and 356 deletions
package-lock.json
...@@ -713,6 +713,15 @@ ...@@ -713,6 +713,15 @@
"semver-intersect": "1.4.0" "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": { "@types/jasmine": {
"version": "2.8.16", "version": "2.8.16",
"resolved": "https://registry.npm.taobao.org/@types/jasmine/download/@types/jasmine-2.8.16.tgz", "resolved": "https://registry.npm.taobao.org/@types/jasmine/download/@types/jasmine-2.8.16.tgz",
...@@ -771,6 +780,12 @@ ...@@ -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": { "@webassemblyjs/ast": {
"version": "1.7.11", "version": "1.7.11",
"resolved": "https://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.7.11.tgz", "resolved": "https://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.7.11.tgz",
...@@ -2103,6 +2118,11 @@ ...@@ -2103,6 +2118,11 @@
"resolved": "https://registry.npm.taobao.org/classlist.js/download/classlist.js-1.1.20150312.tgz", "resolved": "https://registry.npm.taobao.org/classlist.js/download/classlist.js-1.1.20150312.tgz",
"integrity": "sha1-HXCEL3Ai8I2awIbOaeWyUPLFd4k=" "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": { "clean-css": {
"version": "4.2.1", "version": "4.2.1",
"resolved": "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.1.tgz", "resolved": "https://registry.npm.taobao.org/clean-css/download/clean-css-4.2.1.tgz",
...@@ -2899,6 +2919,23 @@ ...@@ -2899,6 +2919,23 @@
"safer-buffer": "^2.1.0" "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": { "ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz", "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
...@@ -6470,6 +6507,14 @@ ...@@ -6470,6 +6507,14 @@
"resolved": "https://registry.npm.taobao.org/ngx-color-picker/download/ngx-color-picker-8.1.0.tgz", "resolved": "https://registry.npm.taobao.org/ngx-color-picker/download/ngx-color-picker-8.1.0.tgz",
"integrity": "sha1-65n1MGJhaenuoVxMnHLAolIJRpY=" "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": { "nice-try": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz", "resolved": "https://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz",
...@@ -10678,6 +10723,11 @@ ...@@ -10678,6 +10723,11 @@
"version": "0.8.29", "version": "0.8.29",
"resolved": "https://registry.npm.taobao.org/zone.js/download/zone.js-0.8.29.tgz", "resolved": "https://registry.npm.taobao.org/zone.js/download/zone.js-0.8.29.tgz",
"integrity": "sha1-jc6Sqg3VU7ULxb+7kK+Zhq2EWhI=" "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 @@ ...@@ -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
publish-to-backend.ps1
...@@ -8,7 +8,7 @@ git commit -m $msg ...@@ -8,7 +8,7 @@ git commit -m $msg
git push git push
Remove-Item -Recurse -Force D:\\projects\\supervise\\supervise\\src\\main\\resources\\static Remove-Item -Recurse -Force D:\\projects\\supervise\\supervise\\src\\main\\resources\\static
mkdir 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 cd ../supervise/supervise
git pull git pull
git add . git add .
......
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>
...@@ -122,7 +121,7 @@ ...@@ -122,7 +121,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>
...@@ -137,12 +136,12 @@ ...@@ -137,12 +136,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>
...@@ -150,14 +149,14 @@ ...@@ -150,14 +149,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>
...@@ -166,13 +165,13 @@ ...@@ -166,13 +165,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>
...@@ -181,7 +180,7 @@ ...@@ -181,7 +180,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">
...@@ -189,7 +188,7 @@ ...@@ -189,7 +188,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>
...@@ -212,3 +211,25 @@ ...@@ -212,3 +211,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,67 +258,136 @@ fieldset{ ...@@ -244,67 +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: 1380px) { @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 {
>.tooltip {
margin-bottom: 0;
}
}
fieldset {
margin-bottom: 2em;
} }
/* .tooltip {
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/main/main.component.ts
import { Component, OnInit, AfterContentInit, AfterViewInit, ViewChild, Inject, ChangeDetectorRef } from '@angular/core'; import {
import { MapOptions, Point, PolylineOptions, BPolyline, ControlAnchor, MapTypeEnum } from 'angular2-baidu-map'; Component,
import { DynamicScriptLoaderService } from '../dynamic-script.service'; OnInit,
AfterContentInit,
AfterViewInit,
import { theme } from './theme'; ViewChild,
import { ModalService } from '../services'; Inject,
import { DefaultService, Project, Course, Scetion, Camera } from '../api'; ChangeDetectorRef
import { HttpClient, HttpParams } from '@angular/common/http'; } from "@angular/core";
import { timer } from 'rxjs'; import {
MapOptions,
import { timeInterval, pluck, take, tap } from 'rxjs/operators'; Point,
import { ActivatedRoute, Router } from '@angular/router'; PolylineOptions,
import { IdService } from '../services/id.service'; BPolyline,
import { SelfMapService } from '../services/map.service'; ControlAnchor,
MapTypeEnum
} from "angular2-baidu-map";
import { DynamicScriptLoaderService } from "../dynamic-script.service";
import { theme } from "./theme";
import { ModalService } from "../services";
import { DefaultService, Project, Course, Scetion, Camera } from "../api";
import { HttpClient, HttpParams } from "@angular/common/http";
import { timer } from "rxjs";
import { timeInterval, pluck, take, tap } from "rxjs/operators";
import { ActivatedRoute, Router } from "@angular/router";
import { IdService } from "../services/id.service";
import { SelfMapService } from "../services/map.service";
declare var BMap: any; declare var BMap: any;
declare var BMapLib: any; declare var BMapLib: any;
declare var drawingManager: any; declare var drawingManager: any;
declare var BMAP_HYBRID_MAP:any; declare var BMAP_HYBRID_MAP: any;
declare var mapv; declare var mapv;
const enum CordType { const enum CordType {
PROJ, PROJ,
...@@ -27,32 +40,54 @@ const enum CordType { ...@@ -27,32 +40,54 @@ const enum CordType {
} }
const enum markType { const enum markType {
HIGHWAY = 1, HIGHWAY = 1,
NORMAL NORMAL = 2
} }
export interface DialogData { export interface DialogData {
animal: string; animal: string;
name: string; name: string;
} }
@Component({ @Component({
selector: 'app-main', selector: "app-main",
templateUrl: './main.component.html', templateUrl: "./main.component.html",
styleUrls: ['./main.component.less'] styleUrls: ["./main.component.less"]
}) })
export class MainComponent implements OnInit { export class MainComponent implements OnInit {
cameraSum: any={}; cameraSum: any = {};
allsecs: any=[]; allsecs: any = [];
curive:boolean = false; curive: boolean = false;
curiveLength:number = 10; curiveLength: number = 10;
theme: any; theme: any;
markers: any; markers: any;
map: any; map: any;
wheelEvent:any = {clientX:944,clientY:554,currentTarget:document.getElementById("baidu-map"),deltaX:0,deltaY:-600,type:"mousewheel",wheelDelta:450,wheelDeltaX:0,wheelDeltaY:450,which:0,x:944,y:188}; wheelEvent: any = {
constructor(private m:SelfMapService, private router:Router, private idService: IdService, private route: ActivatedRoute, private cd: ChangeDetectorRef, private http: HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService, private modalService: ModalService, private s: DefaultService) { clientX: 944,
clientY: 554,
currentTarget: document.getElementById("baidu-map"),
deltaX: 0,
deltaY: -600,
type: "mousewheel",
wheelDelta: 450,
wheelDeltaX: 0,
wheelDeltaY: 450,
which: 0,
x: 944,
y: 188
};
constructor(
private m: SelfMapService,
private router: Router,
private idService: IdService,
private route: ActivatedRoute,
private cd: ChangeDetectorRef,
private http: HttpClient,
private dynamicScriptLoader: DynamicScriptLoaderService,
private modalService: ModalService,
private s: DefaultService
) {
this.polylineOptions = { this.polylineOptions = {
strokeColor: 'yellow', strokeColor: "yellow",
strokeWeight: 10 strokeWeight: 10
} };
} }
drawingManager: any; drawingManager: any;
currentProjId: number; currentProjId: number;
...@@ -60,15 +95,13 @@ export class MainComponent implements OnInit { ...@@ -60,15 +95,13 @@ export class MainComponent implements OnInit {
courses = []; courses = [];
highShow = false; highShow = false;
normalShow = false; normalShow = false;
public opts: MapOptions public opts: MapOptions;
public points: Array<Point> = []; public points: Array<Point> = [];
public polylineOptions: PolylineOptions; public polylineOptions: PolylineOptions;
public projects = [ public projects = [{ secs: [] }];
{ secs: [] } public projects1 = [];
] public projects2 = [];
public projects1 = []
public projects2 = []
polys = []; polys = [];
proj: Project = { delFlag: 0 }; proj: Project = { delFlag: 0 };
course: Course = { delFlag: 0 }; course: Course = { delFlag: 0 };
...@@ -81,157 +114,163 @@ export class MainComponent implements OnInit { ...@@ -81,157 +114,163 @@ export class MainComponent implements OnInit {
normalProjects: any = []; normalProjects: any = [];
currProj: Project = {}; currProj: Project = {};
secs: Array<Scetion> = []; secs: Array<Scetion> = [];
camera:Camera={}; camera: Camera = {};
marker:any={}; marker: any = {};
debug = false; debug = false;
typeChange(e) { typeChange(e) {
//0:course, 1 :project,2:section. //0:course, 1 :project,2:section.
var dic = { 0: "red", 1: "yellow", 2: "green" } var dic = { 0: "red", 1: "yellow", 2: "green" };
console.log(drawingManager.polylineOptions.strokeColor = dic[e]); console.log((drawingManager.polylineOptions.strokeColor = dic[e]));
//当属于标段类型添加检查是否点在线上机制。 //当属于标段类型添加检查是否点在线上机制。
if (e == 2) { if (e == 2) {
drawingManager.hook = (point: Point) => { drawingManager.hook = (point: Point) => {
return BMapLib.GeoUtils.isPointOnPolyline(point, this.getOverlayById(this.currentProjId)); return BMapLib.GeoUtils.isPointOnPolyline(
} point,
this.getOverlayById(this.currentProjId)
);
};
} else { } else {
drawingManager.hook = null; drawingManager.hook = null;
} }
} }
addPoly(proj) { addPoly(proj) {
var points = JSON.parse(proj.coordinate); var points = JSON.parse(proj.coordinate);
var toPoints = this.m.toPoints(points,this.curiveLength,this.curive); var toPoints = this.m.toPoints(points, this.curiveLength, this.curive);
var newPolyLine = new window.BMap.Polyline(toPoints, { strokeColor: proj.lineStyle, strokeWeight: proj.lineWidth }); var newPolyLine = new window.BMap.Polyline(toPoints, {
strokeColor: proj.lineStyle,
strokeWeight: proj.lineWidth
});
(newPolyLine as any).id = (proj.course ? "p" : "s") + proj.id; (newPolyLine as any).id = (proj.course ? "p" : "s") + proj.id;
this.map.addOverlay(newPolyLine); this.map.addOverlay(newPolyLine);
// var newPoints = this.corToPoint(proj.coordinate); // var newPoints = this.corToPoint(proj.coordinate);
// this.m.animationLine(newPoints); // this.m.animationLine(newPoints);
} }
goToVideo(){ goToVideo() {
this.router.navigate(['/video']); this.router.navigate(["/video"]);
} }
ngOnInit(): void { ngOnInit(): void {
(window as any).main_this = this; (window as any).main_this = this;
this.m.clearMapLocal(); this.m.clearMapLocal();
this.map = new window.BMap.Map(("baidu-map"), { this.map = new window.BMap.Map("baidu-map", {
enableMapClick: true enableMapClick: true
}); });
setTimeout(() => { setTimeout(() => {
this.others(); this.others();
}, 1); }, 1);
} }
others() { others() {
this.dynamicScriptLoader.load('drawing','geouti','mapv').then(data => { this.dynamicScriptLoader
.load("drawing", "geouti", "mapv")
.then(data => {
//显示编辑按钮 //显示编辑按钮
(window as any).main_this.route.queryParamMap.subscribe(queryParams => { (window as any).main_this.route.queryParamMap.subscribe(queryParams => {
(window as any).main_this.debug = Boolean(queryParams.get("debug")) (window as any).main_this.debug = Boolean(queryParams.get("debug"));
if( (window as any).main_this.debug){ if ((window as any).main_this.debug) {
var node = document.getElementsByClassName('BMapLib_Drawing')[0]; var node = document.getElementsByClassName("BMapLib_Drawing")[0];
(node as any).style.display = 'block'; (node as any).style.display = "block";
} }
}) });
// Script Loaded Successfully // Script Loaded Successfully
drawingManager.addEventListener('overlaycomplete', e => { drawingManager.addEventListener("overlaycomplete", e => {
var overlay = e.overlay; var overlay = e.overlay;
var coordinates = []; var coordinates = [];
if(overlay.getPath){ if (overlay.getPath) {
var path = overlay.getPath(); var path = overlay.getPath();
for (var i = 0; i < path.length; i++) { for (var i = 0; i < path.length; i++) {
coordinates.push([path[i].lng, path[i].lat]); coordinates.push([path[i].lng, path[i].lat]);
} }
}else{ } else {
coordinates.push(overlay.getPosition()) coordinates.push(overlay.getPosition());
} }
if (overlay.toString() == '[object Polyline]') { if (overlay.toString() == "[object Polyline]") {
if (this.type == CordType.PROJ) { if (this.type == CordType.PROJ) {
this.proj.course = this.currentCouseId; this.proj.course = this.currentCouseId;
this.proj.coordinate = JSON.stringify(coordinates); this.proj.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-1'); this.modalService.open("custom-modal-1");
} } else if (this.type == CordType.COURSE) {
else if (this.type == CordType.COURSE) {
this.course.coordinate = JSON.stringify(coordinates); this.course.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-2'); this.modalService.open("custom-modal-2");
} } else if (this.type == CordType.SECTION) {
else if (this.type == CordType.SECTION) {
this.section.project = this.currentProjId; this.section.project = this.currentProjId;
this.section.coordinate = JSON.stringify(coordinates); this.section.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-3'); this.modalService.open("custom-modal-3");
}
} }
else if (overlay.toString() == '[object Polygon]') { } else if (overlay.toString() == "[object Polygon]") {
// geojsonStr = { // geojsonStr = {
// "type": "Polygon", // "type": "Polygon",
// "coordinates": [coordinates] // "coordinates": [coordinates]
// }; // };
}else if(overlay.toString() == "[object Marker]"){ } else if (overlay.toString() == "[object Marker]") {
this.marker.coordinate = JSON.stringify(coordinates[0]); this.marker.coordinate = JSON.stringify(coordinates[0]);
this.modalService.open('marker'); this.modalService.open("marker");
} }
// document.getElementById('result').innerHTML = "<div><span>左下角,右上角(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + sw.lng + "," + sw.lat + "," + ne.lng + "," + ne.lat + "</p></div>" // document.getElementById('result').innerHTML = "<div><span>左下角,右上角(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + sw.lng + "," + sw.lat + "," + ne.lng + "," + ne.lat + "</p></div>"
// + "<div><span>左下角,右上角(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + swMc.x + "," + swMc.y + "," + neMc.x + "," + neMc.y + "</p></div>" // + "<div><span>左下角,右上角(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + swMc.x + "," + swMc.y + "," + neMc.x + "," + neMc.y + "</p></div>"
// + "<div><span>坐标集(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + pathStr + "</p></div>" // + "<div><span>坐标集(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + pathStr + "</p></div>"
// + "<div><span>坐标集(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + pathmcStr + "</p></div>" // + "<div><span>坐标集(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + pathmcStr + "</p></div>"
// + "<div><span>geojson：</span><button class='btn'>复制</button><p class='copyText' style='white-space:nowrap;'>" + JSON.stringify(geojsonStr) + "</p></div>"; // + "<div><span>geojson：</span><button class='btn'>复制</button><p class='copyText' style='white-space:nowrap;'>" + JSON.stringify(geojsonStr) + "</p></div>";
}); });
})
}).catch(error => console.log(error)); .catch(error => console.log(error));
this.map.setMaxZoom(this.debug==true ? 18:13); this.map.setMaxZoom(this.debug == true ? 18 : 13);
(window as any).map=this.map; (window as any).map = this.map;
// this.map.setMapStyleV2({ styleJson: theme }); // this.map.setMapStyleV2({ styleJson: theme });
var hiddenHighIcon={ var hiddenHighIcon = {
"featureType": "highwaysign", featureType: "highwaysign",
"elementType": "labels.icon", elementType: "labels.icon",
"stylers": { stylers: {
"visibility": "off" visibility: "off"
} }
} };
//this.map.setMapStyleV2({styleJson:hiddenHighIcon}); //this.map.setMapStyleV2({styleJson:hiddenHighIcon});
this.map.enableScrollWheelZoom(); this.map.enableScrollWheelZoom();
//this.map.enableScrollWheelZoom() //this.map.enableScrollWheelZoom()
this.map.enableContinuousZoom() this.map.enableContinuousZoom();
//this.map.centerAndZoom("山西省",11); //this.map.centerAndZoom("山西省",11);
var _map =this.map; var _map = this.map;
var maping = {8:11,9:15,10:20,11:22,12:25,13:26,14:28,15:29} var maping = {
8: 11,
9: 15,
10: 20,
11: 22,
12: 25,
13: 26,
14: 28,
15: 29
};
this.map.addEventListener("zoomend", function() { this.map.addEventListener("zoomend", function() {
var curZoom =_map.getZoom(); var curZoom = _map.getZoom();
var collections = document.getElementsByClassName("label-panel2"); var collections = document.getElementsByClassName("label-panel2");
var marks = document.getElementsByClassName("mark"); var marks = document.getElementsByClassName("mark");
for (const key in collections) { for (const key in collections) {
if (collections.hasOwnProperty(key)) { if (collections.hasOwnProperty(key)) {
const element = collections[key]; const element = collections[key];
const mark = marks[key]; const mark = marks[key];
(element as any).style.fontSize=maping[curZoom]+"px"; (element as any).style.fontSize = maping[curZoom] + "px";
if(mark){ if (mark) {
(mark as any).style.fontSize=maping[curZoom]+"px"; (mark as any).style.fontSize = maping[curZoom] + "px";
} }
} }
} }
}); });
this.setBound(); this.setBound();
this.http
.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`)
.subscribe(res => {
this.http.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`).subscribe(res => {
this.projects1 = res.data; this.projects1 = res.data;
}); });
this.http.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`).subscribe(res => { this.http
.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`)
.subscribe(res => {
this.projects2 = res.data; this.projects2 = res.data;
}); });
this.http.get<any>(this.s.basePath + `/project/total`).subscribe(res => { this.http.get<any>(this.s.basePath + `/project/total`).subscribe(res => {
...@@ -251,7 +290,7 @@ export class MainComponent implements OnInit { ...@@ -251,7 +290,7 @@ export class MainComponent implements OnInit {
this.courses = res.data; this.courses = res.data;
//加载全局线路 //加载全局线路
// setTimeout(() => { // setTimeout(() => {
this.loadPolys(res,false); this.loadPolys(res, false);
//}, 5000); //}, 5000);
// setTimeout(() => { // setTimeout(() => {
this.http.get<any>(this.s.basePath + "/mapLable/list").subscribe(res => { this.http.get<any>(this.s.basePath + "/mapLable/list").subscribe(res => {
...@@ -262,12 +301,13 @@ export class MainComponent implements OnInit { ...@@ -262,12 +301,13 @@ export class MainComponent implements OnInit {
//}, 5000); //}, 5000);
}); });
// }, 200); // }, 200);
}); });
this.http.get<any>(this.s.basePath + "/scetion/list").subscribe(res => { this.http.get<any>(this.s.basePath + "/scetion/list").subscribe(res => {
this.allsecs = res.data; this.allsecs = res.data;
}); });
//response to 1440*900
} }
proj2Change($event, type) { proj2Change($event, type) {
this.map.clearOverlays(); this.map.clearOverlays();
...@@ -281,8 +321,7 @@ export class MainComponent implements OnInit { ...@@ -281,8 +321,7 @@ export class MainComponent implements OnInit {
var points = this.corToPoint(proj.coordinate); var points = this.corToPoint(proj.coordinate);
this.map.setViewport(points); this.map.setViewport(points);
} }
loadLabels(data){ loadLabels(data) {
//var labels = [{lng:112.43176242674386,lat:37.78663390039693,text:"test1"}]; //var labels = [{lng:112.43176242674386,lat:37.78663390039693,text:"test1"}];
// var labels = data.map(d=>({...(JSON.parse(data.coordinate)),text:d.name})); // var labels = data.map(d=>({...(JSON.parse(data.coordinate)),text:d.name}));
data.forEach(label => { data.forEach(label => {
...@@ -290,26 +329,25 @@ export class MainComponent implements OnInit { ...@@ -290,26 +329,25 @@ export class MainComponent implements OnInit {
}); });
} }
toHighWay() { toHighWay() {
this.highShow = !this.highShow; this.highShow = !this.highShow;
if (this.highShow) { if (this.highShow) {
///map.clearOverlays(); ///map.clearOverlays();
this.http.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`).subscribe(res => { this.http
.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`)
.subscribe(res => {
this.projects = res.data; this.projects = res.data;
var points = this.loadPolys(res,true); var points = this.loadPolys(res, true);
}); });
}else{ } else {
this.map.centerAndZoom("山西省",8); this.map.centerAndZoom("山西省", 8);
} }
} }
private loadPolys(res: any,animation:boolean) { private loadPolys(res: any, animation: boolean) {
var allPoints = []; var allPoints = [];
res.data.forEach(obj => { res.data.forEach(obj => {
this.addPoly(obj); this.addPoly(obj);
if(animation){ if (animation) {
var newPoints = this.corToPoint(obj.coordinate); var newPoints = this.corToPoint(obj.coordinate);
this.m.animationLine(newPoints); this.m.animationLine(newPoints);
} }
...@@ -322,6 +360,7 @@ export class MainComponent implements OnInit { ...@@ -322,6 +360,7 @@ export class MainComponent implements OnInit {
toNormalWay() { toNormalWay() {
this.normalShow = !this.normalShow; this.normalShow = !this.normalShow;
<<<<<<< HEAD
if (this.normalShow) { if (this.normalShow) {
///map.clearOverlays(); ///map.clearOverlays();
this.http.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`).subscribe(res => { this.http.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`).subscribe(res => {
...@@ -332,22 +371,33 @@ export class MainComponent implements OnInit { ...@@ -332,22 +371,33 @@ export class MainComponent implements OnInit {
this.map.centerAndZoom("山西省",8); this.map.centerAndZoom("山西省",8);
} }
=======
this.http
.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`)
.subscribe(res => {
this.normalProjects = res.data;
});
>>>>>>> 00350ea8987895ef638def14a2cca7611415aead
} }
openDialog(id: string) { openDialog(id: string) {
this.modalService.open(id); this.modalService.open(id);
} }
corToPoint(json: string): Array<Point> { corToPoint(json: string): Array<Point> {
return JSON.parse(json).map(r => ({ lng: r[0], lat: r[1] })); return JSON.parse(json).map(r => ({ lng: r[0], lat: r[1] }));
} }
highLight(i: number, obj, type) { highLight(i: number, obj, type) {
if(obj.hadZoom) return; if (obj.hadZoom) return;
this.currProj = Object.assign({}, obj); this.currProj = Object.assign({}, obj);
var overlays = this.map.getOverlays(); var overlays = this.map.getOverlays();
var cur = overlays.find(o => o.id == type + obj.id); var cur = overlays.find(o => o.id == type + obj.id);
timer(0, 200) timer(0, 200)
.pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => { .pipe(
timeInterval(),
pluck("interval"),
take(6)
)
.subscribe(index => {
if (cur.isVisible()) { if (cur.isVisible()) {
cur.hide(); cur.hide();
} else { } else {
...@@ -358,35 +408,35 @@ export class MainComponent implements OnInit { ...@@ -358,35 +408,35 @@ export class MainComponent implements OnInit {
var points = this.corToPoint(obj.coordinate); var points = this.corToPoint(obj.coordinate);
//标段不定位 //标段不定位
if(type!='s'){ if (type != "s") {
// this.map.setViewport(points,{ // this.map.setViewport(points,{
// enableAnimation:true, // enableAnimation:true,
// delay:5000 // delay:5000
// }); // });
var view = this.map.getViewport(points,{enableAnimation:true,delay:2000}); var view = this.map.getViewport(points, {
enableAnimation: true,
delay: 2000
});
this.map.panTo(view.center,{duration:500}); this.map.panTo(view.center, { duration: 500 });
// var orginZoom = this.map.getZoom(); // var orginZoom = this.map.getZoom();
// var dur =view.zoom - this.map.getZoom(); // var dur =view.zoom - this.map.getZoom();
// timer(0, 200) // timer(0, 200)
// .pipe(timeInterval(), pluck('interval'), take(dur)).subscribe((index:any)=>{ // .pipe(timeInterval(), pluck('interval'), take(dur)).subscribe((index:any)=>{
// // this.m.dispatchWheelEvent_Chrome(document.getElementById("baidu-map"),10); // // this.m.dispatchWheelEvent_Chrome(document.getElementById("baidu-map"),10);
// } // }
// ); // );
this.wheelEvent.target=document.getElementById("baidu-map"); this.wheelEvent.target = document.getElementById("baidu-map");
setTimeout(() => { setTimeout(() => {
if (!this.m.isIE()) {
if(!this.m.isIE()){
(window as any).xiaolinMouseWheel(this.wheelEvent); (window as any).xiaolinMouseWheel(this.wheelEvent);
(window as any).xiaolinMouseWheel(this.wheelEvent); (window as any).xiaolinMouseWheel(this.wheelEvent);
}else{ } else {
this.map.centerAndZoom(view.center,view.zoom); this.map.centerAndZoom(view.center, view.zoom);
} }
}, 500); }, 500);
obj.hadZoom=true; obj.hadZoom = true;
// setTimeout(() => { // setTimeout(() => {
// this.map.centerAndZoom(view.center,view.zoom); // this.map.centerAndZoom(view.center,view.zoom);
// }, 4000); // }, 4000);
...@@ -396,26 +446,26 @@ export class MainComponent implements OnInit { ...@@ -396,26 +446,26 @@ export class MainComponent implements OnInit {
// this.map.centerAndZoom(view.center,view.zoom); // this.map.centerAndZoom(view.center,view.zoom);
// //this.map.dispatchWheelEvent_Chrome // //this.map.dispatchWheelEvent_Chrome
// }, 1000); // }, 1000);
} }
//设置摄像头数据 //设置摄像头数据
// this.http.get<any>(this.s.basePath + `/camera/totalByProjId?projId=`+obj.id).subscribe(res => { // this.http.get<any>(this.s.basePath + `/camera/totalByProjId?projId=`+obj.id).subscribe(res => {
// this.cameraSum ={project:1,total:res.data} ; // this.cameraSum ={project:1,total:res.data} ;
// }); // });
//设置标注信息 //设置标注信息
this.addLabel(points,obj); this.addLabel(points, obj);
//设置动画效果 //设置动画效果
this.m.animationLine(points) this.m.animationLine(points);
} }
setPrj(prj: Project) { setPrj(prj: Project) {
this.http.get<any>(this.s.basePath + "/scetion/findListById/" + prj.id).subscribe(res => { this.http
.get<any>(this.s.basePath + "/scetion/findListById/" + prj.id)
.subscribe(res => {
prj.secs = res.data; prj.secs = res.data;
this.loadPolys(res,false); this.loadPolys(res, false);
}); });
} }
setCamera(sec: Scetion) { setCamera(sec: Scetion) {
...@@ -425,38 +475,42 @@ export class MainComponent implements OnInit { ...@@ -425,38 +475,42 @@ export class MainComponent implements OnInit {
// }); // });
} }
addCourse(course: Course) { addCourse(course: Course) {
this.http
this.http.post<Course>(this.s.basePath + "/course/add", course).subscribe(res => { .post<Course>(this.s.basePath + "/course/add", course)
this.modalService.close('custom-modal-2'); .subscribe(res => {
}) this.modalService.close("custom-modal-2");
});
} }
addSection(section: Scetion) { addSection(section: Scetion) {
this.http
this.http.post<Scetion>(this.s.basePath + "/scetion/add", section).subscribe(res => { .post<Scetion>(this.s.basePath + "/scetion/add", section)
this.modalService.close('custom-modal-3'); .subscribe(res => {
}) this.modalService.close("custom-modal-3");
});
} }
addCamera(camera: Camera) { addCamera(camera: Camera) {
this.http
this.http.post<Scetion>(this.s.basePath + "/camera/add", camera).subscribe(res => { .post<Scetion>(this.s.basePath + "/camera/add", camera)
this.modalService.close('marker'); .subscribe(res => {
}) this.modalService.close("marker");
});
} }
addMarker(marker){ addMarker(marker) {
this.http
this.http.post<Scetion>(this.s.basePath + "/mapLable/add", marker).subscribe(res => { .post<Scetion>(this.s.basePath + "/mapLable/add", marker)
this.modalService.close('marker'); .subscribe(res => {
}) this.modalService.close("marker");
});
// localStorage.setItem("marker_"+marker.name,JSON.stringify(marker.coordinate)); // localStorage.setItem("marker_"+marker.name,JSON.stringify(marker.coordinate));
// this.closeModal('marker') // this.closeModal('marker')
} }
addProj(proj: Project) { addProj(proj: Project) {
this.http.post(this.s.basePath + "/project/add", proj).subscribe(res => { this.http.post(this.s.basePath + "/project/add", proj).subscribe(res => {
console.log(res) console.log(res);
}); });
} }
setTheme(theme){ setTheme(theme) {
(window as any).map.setMapStyleV2({ styleJson: theme }); (window as any).map.setMapStyleV2({ styleJson: theme });
} }
public polylineLoaded(polyline: BPolyline): void { public polylineLoaded(polyline: BPolyline): void {
...@@ -466,15 +520,13 @@ export class MainComponent implements OnInit { ...@@ -466,15 +520,13 @@ export class MainComponent implements OnInit {
// this.map.setMapStyleV2({ styleJson: theme }); // this.map.setMapStyleV2({ styleJson: theme });
this.map.enableScrollWheelZoom(true); this.map.enableScrollWheelZoom(true);
this.map.centerAndZoom("山西省",11); this.map.centerAndZoom("山西省", 11);
this.dynamicScriptLoader.load('geouti',"mapv").then(); this.dynamicScriptLoader.load("geouti", "mapv").then();
console.log('polyline loaded', polyline) console.log("polyline loaded", polyline);
} }
// public polylineClicked({ polyline }): void { // public polylineClicked({ polyline }): void {
// console.log('polyline clicked', polyline) // console.log('polyline clicked', polyline)
// } // }
...@@ -483,10 +535,8 @@ export class MainComponent implements OnInit { ...@@ -483,10 +535,8 @@ export class MainComponent implements OnInit {
this.modalService.close(id); this.modalService.close(id);
} }
setBound() { setBound() {
var project = this.map.getMapType().getProjection(); var project = this.map.getMapType().getProjection();
var getPathStr = function (overlay) { var getPathStr = function(overlay) {
var pathStr = ""; var pathStr = "";
var path = overlay.getPath(); var path = overlay.getPath();
for (var i = 0; i < path.length; i++) { for (var i = 0; i < path.length; i++) {
...@@ -494,11 +544,10 @@ export class MainComponent implements OnInit { ...@@ -494,11 +544,10 @@ export class MainComponent implements OnInit {
} }
pathStr = pathStr.substr(0, pathStr.length - 1); pathStr = pathStr.substr(0, pathStr.length - 1);
return pathStr; return pathStr;
} };
var _this=this; var _this = this;
var bdary = new BMap.Boundary(); var bdary = new BMap.Boundary();
bdary.get('山西省', function (rs) { bdary.get("山西省", function(rs) {
// map.clearOverlays(); // map.clearOverlays();
//清除地图覆盖物 //清除地图覆盖物
//思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层 //思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
...@@ -506,8 +555,8 @@ export class MainComponent implements OnInit { ...@@ -506,8 +555,8 @@ export class MainComponent implements OnInit {
var strs = new Array(); var strs = new Array();
strs = rs.boundaries[0].split(";"); strs = rs.boundaries[0].split(";");
var ENWS = ""; var ENWS = "";
for (var i=0;i<strs.length;i++) { for (var i = 0; i < strs.length; i++) {
ENWS += strs[i] + ";" ENWS += strs[i] + ";";
} }
//2.自定义外围边框点的集合 //2.自定义外围边框点的集合
var E_JW = "170.672126, 39.623555;"; //东 var E_JW = "170.672126, 39.623555;"; //东
...@@ -520,13 +569,26 @@ export class MainComponent implements OnInit { ...@@ -520,13 +569,26 @@ export class MainComponent implements OnInit {
var SE_JW = "170.672126, -68.045308 ;"; //东南角 var SE_JW = "170.672126, -68.045308 ;"; //东南角
//3.添加环形遮罩层 //3.添加环形遮罩层
// var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {strokeColor:"none",strokeOpacity:0,fillColor:"#0002069c",fillOpacity:"0.5"}); //建立多边形覆盖物 // var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {strokeColor:"none",strokeOpacity:0,fillColor:"#0002069c",fillOpacity:"0.5"}); //建立多边形覆盖物
var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {strokeColor:"none",strokeOpacity:0,fillColor:"#0002069c",fillOpacity:"0"}); //建立多边形覆盖物 var ply1 = new BMap.Polygon(
_this.map.addOverlay(ply1);//遮罩物是半透明的，如果需要纯色可以多添加几层 ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW,
{
strokeColor: "none",
strokeOpacity: 0,
fillColor: "#0002069c",
fillOpacity: "0"
}
); //建立多边形覆盖物
_this.map.addOverlay(ply1); //遮罩物是半透明的，如果需要纯色可以多添加几层
//4. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层 //4. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight:0,strokeColor:"#0000C6",fillColor:"#dde7f6",fillOpacity:"0.2"}); var ply = new BMap.Polygon(rs.boundaries[0], {
strokeWeight: 0,
strokeColor: "#0000C6",
fillColor: "#dde7f6",
fillOpacity: "0.2"
});
// var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight:0,strokeColor:"#16e8d6",fillColor:"",fillOpacity:"0"}); // var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight:0,strokeColor:"#16e8d6",fillColor:"",fillOpacity:"0"});
_this.map.addOverlay(ply); _this.map.addOverlay(ply);
_this.map.setViewport(ply.getPath());//调整视野 _this.map.setViewport(ply.getPath()); //调整视野
}); });
} }
/** /**
...@@ -538,40 +600,43 @@ export class MainComponent implements OnInit { ...@@ -538,40 +600,43 @@ export class MainComponent implements OnInit {
var overlays = this.map.getOverlays(); var overlays = this.map.getOverlays();
return overlays.find(o => o.id == type + id); return overlays.find(o => o.id == type + id);
} }
addLabel(points:Array<Point>,proj){ addLabel(points: Array<Point>, proj) {
var center = {lng:0,lat:0} var center = { lng: 0, lat: 0 };
points.forEach(p => { points.forEach(p => {
center.lng+=p.lng; center.lng += p.lng;
center.lat+=p.lat; center.lat += p.lat;
}); });
center.lng=center.lng/points.length; center.lng = center.lng / points.length;
center.lat=center.lat/points.length; center.lat = center.lat / points.length;
var label = new BMap.Label(` var label = new BMap.Label(
`
<div class="label-panel"> <div class="label-panel">
<p class="header" style="margin:0">${proj.name}</p> <p class="header" style="margin:0">${proj.name}</p>
<p style="margin:0;color:#eaab4e;">里程：<i>${proj.mileage || ""}Km</i></p> <p style="margin:0;color:#eaab4e;">里程：<i>${proj.mileage ||
<p style="margin:0;color:#eaab4e;">投资：<i>${proj.capital || ""}亿</i></p> ""}Km</i></p>
</div>`, { <p style="margin:0;color:#eaab4e;">投资：<i>${proj.capital ||
""}亿</i></p>
</div>`,
{
position: center position: center
}); }
);
this.map.addOverlay(label); this.map.addOverlay(label);
} }
addLabel2(label){ addLabel2(label) {
var label = new BMap.Label(
var label = new BMap.Label(` `
<div style="background:${label.divStyle};font-size:11px;" class="label-panel2"> <div style="background:${label.divStyle};font-size:11px;" class="label-panel2">
${label.name} ${label.name}
</div> </div>
<div class='mark' style="font-size:11px;">${label.mark}</div> <div class='mark' style="font-size:11px;">${label.mark}</div>
`, { `,
position: JSON.parse(label.coordinate), {
position: JSON.parse(label.coordinate)
// offset:{width:5,height:-10} // offset:{width:5,height:-10}
}); }
this.map.addOverlay(label); );
this.map.addOverlay(label);
} }
} }
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/app/video/video.component.less
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
} }
#playWnd{ #playWnd{
width:1000px; width:900px;
height: 500px; height: 500px;
// border:1px solid red; // border:1px solid red;
} }
......
src/app/video/video.component.ts
...@@ -299,8 +299,12 @@ export class VideoComponent implements OnInit { ...@@ -299,8 +299,12 @@ export class VideoComponent implements OnInit {
// }) // })
// }) // })
var width=$(document).width() var width=$(document).width()
var ratio = 0.75;
if(window.screen.width==1440){
ratio = 0.65;
}
var height=$(document).height() 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 { 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