Skip to content

S
supervise-front
Commit 00350ea8 by 杨子
Options

update

parent a0efcbfe
Showing with 1153 additions and 784 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",
......@@ -1137,7 +1152,6 @@
"resolved": "https://registry.npm.taobao.org/are-we-there-yet/download/are-we-there-yet-1.1.5.tgz",
"integrity": "sha1-SzXClE8GKov82mZBB2A1D+nd/CE=",
"dev": true,
"optional": true,
"requires": {
"delegates": "^1.0.0",
"readable-stream": "^2.0.6"
......@@ -2104,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",
......@@ -2354,8 +2373,7 @@
"version": "1.1.0",
"resolved": "https://registry.npm.taobao.org/console-control-strings/download/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
"dev": true,
"optional": true
"dev": true
},
"constants-browserify": {
"version": "1.0.0",
......@@ -2759,8 +2777,7 @@
"version": "1.0.0",
"resolved": "https://registry.npm.taobao.org/delegates/download/delegates-1.0.0.tgz",
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
"dev": true,
"optional": true
"dev": true
},
"depd": {
"version": "1.1.2",
......@@ -2902,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",
......@@ -3705,8 +3739,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
......@@ -3727,14 +3760,12 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
......@@ -3749,20 +3780,17 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
......@@ -3879,8 +3907,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
......@@ -3892,7 +3919,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -3907,7 +3933,6 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -3915,14 +3940,12 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
......@@ -3941,7 +3964,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -4022,8 +4044,7 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"object-assign": {
"version": "4.1.1",
......@@ -4035,7 +4056,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -4121,8 +4141,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
......@@ -4158,7 +4177,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -4178,7 +4196,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -4222,14 +4239,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},
......@@ -4238,7 +4253,6 @@
"resolved": "https://registry.npm.taobao.org/fstream/download/fstream-1.0.12.tgz",
"integrity": "sha1-Touo7i1Ivk99DeUFRVVI6uWTIEU=",
"dev": true,
"optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"inherits": "~2.0.0",
......@@ -4251,7 +4265,6 @@
"resolved": "https://registry.npm.taobao.org/gauge/download/gauge-2.7.4.tgz",
"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
"dev": true,
"optional": true,
"requires": {
"aproba": "^1.0.3",
"console-control-strings": "^1.0.0",
......@@ -4289,8 +4302,7 @@
"version": "4.0.1",
"resolved": "https://registry.npm.taobao.org/get-stdin/download/get-stdin-4.0.1.tgz",
"integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
"dev": true,
"optional": true
"dev": true
},
"get-stream": {
"version": "3.0.0",
......@@ -4470,8 +4482,7 @@
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/has-unicode/download/has-unicode-2.0.1.tgz",
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
"dev": true,
"optional": true
"dev": true
},
"has-value": {
"version": "1.0.0",
......@@ -5210,8 +5221,7 @@
"version": "0.2.1",
"resolved": "https://registry.npm.taobao.org/is-utf8/download/is-utf8-0.2.1.tgz",
"integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
"dev": true,
"optional": true
"dev": true
},
"is-windows": {
"version": "1.0.2",
......@@ -5839,7 +5849,6 @@
"resolved": "https://registry.npm.taobao.org/load-json-file/download/load-json-file-1.1.0.tgz?cache=0&sync_timestamp=1562833825124&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fload-json-file%2Fdownload%2Fload-json-file-1.1.0.tgz",
"integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
"dev": true,
"optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"parse-json": "^2.2.0",
......@@ -5852,8 +5861,7 @@
"version": "2.3.0",
"resolved": "https://registry.npm.taobao.org/pify/download/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true,
"optional": true
"dev": true
}
}
},
......@@ -6126,8 +6134,7 @@
"version": "1.0.1",
"resolved": "https://registry.npm.taobao.org/map-obj/download/map-obj-1.0.1.tgz",
"integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
"dev": true,
"optional": true
"dev": true
},
"map-visit": {
"version": "1.0.0",
......@@ -6500,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",
......@@ -6778,7 +6793,6 @@
"resolved": "https://registry.npm.taobao.org/npmlog/download/npmlog-4.1.2.tgz",
"integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=",
"dev": true,
"optional": true,
"requires": {
"are-we-there-yet": "~1.1.2",
"console-control-strings": "~1.1.0",
......@@ -7814,7 +7828,6 @@
"resolved": "https://registry.npm.taobao.org/read-pkg/download/read-pkg-1.1.0.tgz",
"integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
"dev": true,
"optional": true,
"requires": {
"load-json-file": "^1.0.0",
"normalize-package-data": "^2.3.2",
......@@ -7826,7 +7839,6 @@
"resolved": "https://registry.npm.taobao.org/path-type/download/path-type-1.1.0.tgz",
"integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
"dev": true,
"optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"pify": "^2.0.0",
......@@ -7837,8 +7849,7 @@
"version": "2.3.0",
"resolved": "https://registry.npm.taobao.org/pify/download/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true,
"optional": true
"dev": true
}
}
},
......@@ -7847,7 +7858,6 @@
"resolved": "https://registry.npm.taobao.org/read-pkg-up/download/read-pkg-up-1.0.1.tgz",
"integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
"dev": true,
"optional": true,
"requires": {
"find-up": "^1.0.0",
"read-pkg": "^1.0.0"
......@@ -7858,7 +7868,6 @@
"resolved": "https://registry.npm.taobao.org/find-up/download/find-up-1.1.2.tgz",
"integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
"dev": true,
"optional": true,
"requires": {
"path-exists": "^2.0.0",
"pinkie-promise": "^2.0.0"
......@@ -7869,7 +7878,6 @@
"resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-2.1.0.tgz",
"integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
"dev": true,
"optional": true,
"requires": {
"pinkie-promise": "^2.0.0"
}
......@@ -9193,7 +9201,6 @@
"resolved": "https://registry.npm.taobao.org/strip-bom/download/strip-bom-2.0.0.tgz",
"integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
"dev": true,
"optional": true,
"requires": {
"is-utf8": "^0.2.0"
}
......@@ -10543,7 +10550,6 @@
"resolved": "https://registry.npm.taobao.org/wide-align/download/wide-align-1.1.3.tgz",
"integrity": "sha1-rgdOa9wMFKQx6ATmJFScYzsABFc=",
"dev": true,
"optional": true,
"requires": {
"string-width": "^1.0.2 || 2"
}
......@@ -10717,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
}
]
\ No newline at end of file
{
"*": {
"target": "http://192.168.19.199:80",
"secure": false,
"changeOrigin": true,
"logLevel": "info"
}
}
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' })
/** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule,
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">
theme:
......@@ -11,21 +10,21 @@
set curive:
<input type="checkbox" [(ngModel)]="curive">
<input type="number" [(ngModel)]="curiveLength">
<select [(ngModel)]="type" (ngModelChange)="typeChange($event)">
<option value="0">project</option>
<option value="1">course</option>
<option value="2">SECTION</option>
</select>
<select [(ngModel)]="currentCouseId">
<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>
</select>
<select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,2)">
<option *ngFor="let c of projects2" [value]="c.id" >{{c.name}}</option>
</select>
</div>
<select [(ngModel)]="type" (ngModelChange)="typeChange($event)">
<option value="0">project</option>
<option value="1">course</option>
<option value="2">SECTION</option>
</select>
<select [(ngModel)]="currentCouseId">
<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>
</select>
<select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,2)">
<option *ngFor="let c of projects2" [value]="c.id">{{c.name}}</option>
</select>
</div>
<div id="baidu-map"></div>
<div class="main">
......@@ -116,8 +115,8 @@
<p>capital: <input type="text" [(ngModel)]="proj.capital" /></p>
<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"/>
<p>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>
......@@ -129,54 +128,54 @@
<jw-modal id="custom-modal-2">
<h1>添加course</h1>
<p>courses名称: <input type="text" [(ngModel)]="course.name" /></p>
<p>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" >
<option [value]="1">高速公路</option>
<option [value]="2">普通干线</option>
</select>
</p>
<button (click)="addCourse(course)">添加</button>
<button (click)="closeModal('custom-modal-2');">Close</button>
</jw-modal>
<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"/>
</p>
<p>lineWidth: <input type="text" [(ngModel)]="section.lineWidth" /></p>
<p>coordinate: <input type="text" [(ngModel)]="section.coordinate" /></p>
<p>mileage: <input type="text" [(ngModel)]="section.mileage" /></p>
<button (click)="addSection(section)">添加</button>
<button (click)="closeModal('custom-modal-3');">Close</button>
</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"/>
</p>
<p>coordinate: <input type="text" [(ngModel)]="marker.coordinate" /></p>
<button (click)="addMarker(marker)">添加</button>
<button (click)="closeModal('marker');">Close</button>
</jw-modal>
<h1>添加course</h1>
<p>courses名称: <input type="text" [(ngModel)]="course.name" /></p>
<p>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">
<option [value]="1">高速公路</option>
<option [value]="2">普通干线</option>
</select>
</p>
<button (click)="addCourse(course)">添加</button>
<button (click)="closeModal('custom-modal-2');">Close</button>
</jw-modal>
<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" />
</p>
<p>lineWidth: <input type="text" [(ngModel)]="section.lineWidth" /></p>
<p>coordinate: <input type="text" [(ngModel)]="section.coordinate" /></p>
<p>mileage: <input type="text" [(ngModel)]="section.mileage" /></p>
<button (click)="addSection(section)">添加</button>
<button (click)="closeModal('custom-modal-3');">Close</button>
</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" />
</p>
<p>coordinate: <input type="text" [(ngModel)]="marker.coordinate" /></p>
<button (click)="addMarker(marker)">添加</button>
<button (click)="closeModal('marker');">Close</button>
</jw-modal>
<div class="function">
<div class="tooltip">
......@@ -184,26 +183,48 @@
<span class="tooltiptextx">视频监控</span>
</div>
<div class="tooltip">
<a href="http://47.92.203.246/pcByFullScreen/#/pcByFullScreen/" target="_blank">
<img alt="质量安全监管" class="tooltip" src="/assets/baseline-security.svg">
<a routerLink="/qs-mark">
<img alt="质量安全监管" class="tooltip" src="/assets/baseline-security.svg">
</a>
<span class="tooltiptextx">质量安全监管
</span>
</span>
</div>
<div class="tooltip">
<img alt="视频监控" class="tooltip" src="/assets/baseline-assessment.svg">
<span class="tooltiptextx">建设程序监管 </span>
<img alt="视频监控" class="tooltip" src="/assets/baseline-assessment.svg">
<span class="tooltiptextx">建设程序监管 </span>
</div>
<div class="tooltip">
<img alt="视频监控" class="tooltip" src="/assets/baseline-featured_play.svg">
<img alt="视频监控" class="tooltip" src="/assets/baseline-featured_play.svg">
<span class="tooltiptextx">投资监管</span>
</div>
<div class="tooltip">
<img alt="视频监控" class="tooltip" src="/assets/baseline-table_chart-24px.svg">
<img alt="视频监控" class="tooltip" src="/assets/baseline-table_chart-24px.svg">
<span class="tooltiptextx">造价监管</span>
</div>
</div>
\ No newline at end of file
</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{
// display: grid;
// grid-template-columns: 15% auto 15%;
// grid-template-rows:850px;
fieldset{
// padding: 1em;
// background: #3885b338;
// margin: 5px;
// border-radius: 4px;
// border: 1px solid #613d3d;
// margin-bottom: 1em;
// margin-left: 2em;
height:288px;
position: relative;
button{
//position: absolute;
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;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&:hover{
background: #48a9a0;
}
}
// label{
// display: grid;
// grid-template-columns: 77% auto;
// color: #eaab4e;
// }
&.sub{
padding:0.4em;
border:none;
margin:0;
label{
cursor: pointer;
background: #076796;
padding: 0.2em;
border: 1px solid #42a5d23b;
}
}
}
.main {
// display: grid;
// grid-template-columns: 15% auto 15%;
// grid-template-rows:850px;
.left{
width: 301px;
position: absolute;
top: 15%;
display: flex;
flex-direction: column;
fieldset {
// padding: 1em;
// background: #3885b338;
// margin: 5px;
// border-radius: 4px;
// border: 1px solid #613d3d;
// margin-bottom: 1em;
// margin-left: 2em;
height: 288px;
position: relative;
button {
//position: absolute;
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;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
&:hover {
background: #48a9a0;
}
}
.map{
// label{
// display: grid;
// grid-template-columns: 77% auto;
// color: #eaab4e;
// }
&.sub {
padding: 0.4em;
border: none;
margin: 0;
label {
cursor: pointer;
background: #076796;
padding: 0.2em;
border: 1px solid #42a5d23b;
}
}
}
.left {
width: 301px;
position: absolute;
top: 19%;
display: flex;
flex-direction: column;
}
.map {}
}
.focus{
background: #ea262d96!important;
.focus {
background: #ea262d96 !important;
}
baidu-map{
width: 100%;
height: 900px;
display: block;
baidu-map {
width: 100%;
height: 900px;
display: block;
}
.function{
// right: 128px;
// /* bottom: 60px; */
// top: 106px;
// width: 35px;
position: absolute;
right: 10%;
top: 10%;
width: 2em;
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;
cursor: pointer;
width: 63px;
}
.function {
// right: 128px;
// /* bottom: 60px; */
// top: 106px;
// width: 35px;
position: absolute;
right: 10%;
top: 12%;
width: 2em;
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;
cursor: pointer;
width: 63px;
}
}
.right{
position: absolute;
right: 80px;
top: 20px;
.right {
position: absolute;
right: 80px;
top: 20px;
}
.proj-info{
label{
display: -ms-grid;
display: grid;
-ms-grid-columns: 70% 30%;
grid-template-columns: 70% 30%;
color: #eaab4e;
padding-top: 1em;
font-size: 22px;
width: 374px;
div:nth-of-type(1){
color:white;
}
.proj-info {
label {
display: -ms-grid;
display: grid;
-ms-grid-columns: 70% 30%;
grid-template-columns: 70% 30%;
color: #eaab4e;
padding-top: 1em;
font-size: 22px;
width: 374px;
div:nth-of-type(1) {
color: white;
}
}
}
fieldset{
border:3px solid #bdc5d4;
padding: 1em;
background: #015293;
margin: 5px;
border-radius: 13px;
margin-bottom: 5em;
margin-left: 2em;
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{
cursor: pointer;
}
}
}
.sub{
padding:0.4em;
border:none;
// background: #07679657;
margin:0;
.item{
text-align: left;
padding-top: 0.3em;
font-size: 22px;
color: white;
fieldset {
border: 3px solid #bdc5d4;
padding: 1em;
background: #015293;
margin: 5px;
border-radius: 13px;
margin-bottom: 5em;
margin-left: 2em;
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 {
cursor: pointer;
}
label{
cursor: pointer;
padding: 0.2em;
}
}
// border: 1px solid #42a5d23b;
}
}
.sub {
padding: 0.4em;
border: none;
// background: #07679657;
margin: 0;
.tooltip {
position: relative;
display: inline-block;
margin-top: 1.6em;
text-align: center;
width:70px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
border:1px solid #16e8d6;
background-color: black;
color: #16e8d6;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
top:-28px;
left:-4px;
z-index: 1;
.item {
text-align: left;
padding-top: 0.3em;
font-size: 22px;
color: white;
}
.tooltip:hover .tooltiptext {
visibility: visible;
label {
cursor: pointer;
padding: 0.2em;
// border: 1px solid #42a5d23b;
}
}
#baidu-map{
width: 100%;
height: 900px;
display: block;
// background-color:rgb(9, 18, 32)!important;
.tooltip {
position: relative;
display: inline-block;
margin-top: 1.6em;
text-align: center;
width: 70px;
}
.function{
>.tooltip{
margin-bottom:1em;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
border: 1px solid #16e8d6;
background-color: black;
color: #16e8d6;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
top: -28px;
left: -4px;
z-index: 1;
}
@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-fix{
float:right;
}
.proj-info{
label{
display:inline-block;
}
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
#baidu-map {
width: 100%;
height: 900px;
display: block;
// background-color:rgb(9, 18, 32)!important;
}
.function {
>.tooltip {
margin-bottom: 1em;
}
}
@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-fix {
float: right;
}
.proj-info {
label {
display: inline-block;
}
}
}
/*
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
//CSS
}
/*
//CSS
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1440px) {
.main{
.left{
width:250px;
}
@media (min-width: 1025px) and (max-width: 1440px) {
.main {
.left {
width: 250px;
}
}
legend{
width:24%!important;
}
//CSS
.function{
>.tooltip{
margin-bottom:0;
}
legend {
width: 24% !important;
}
fieldset{
margin-bottom: 2em;
//CSS
.function {
>.tooltip {
margin-bottom: 0;
}
}
.tooltip{
margin-top: 1.2em;
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) {
//CSS
}
/*
@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) {
//CSS
}
/*
@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) {
//CSS
}
/*
@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) {
//CSS
}
\ No newline at end of file
@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/main/main.component.ts
import { Component, OnInit, AfterContentInit, AfterViewInit, ViewChild, Inject, ChangeDetectorRef } from '@angular/core';
import { MapOptions, Point, PolylineOptions, BPolyline, 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';
import {
Component,
OnInit,
AfterContentInit,
AfterViewInit,
ViewChild,
Inject,
ChangeDetectorRef
} from "@angular/core";
import {
MapOptions,
Point,
PolylineOptions,
BPolyline,
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 BMapLib: any;
declare var drawingManager: any;
declare var BMAP_HYBRID_MAP:any;
declare var BMAP_HYBRID_MAP: any;
declare var mapv;
const enum CordType {
PROJ,
......@@ -27,32 +40,54 @@ const enum CordType {
}
const enum markType {
HIGHWAY = 1,
NORMAL
NORMAL = 2
}
export interface DialogData {
animal: string;
name: string;
}
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.less']
selector: "app-main",
templateUrl: "./main.component.html",
styleUrls: ["./main.component.less"]
})
export class MainComponent implements OnInit {
cameraSum: any={};
allsecs: any=[];
curive:boolean = false;
curiveLength:number = 10;
cameraSum: any = {};
allsecs: any = [];
curive: boolean = false;
curiveLength: number = 10;
theme: any;
markers: 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};
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) {
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
};
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 = {
strokeColor: 'yellow',
strokeColor: "yellow",
strokeWeight: 10
}
};
}
drawingManager: any;
currentProjId: number;
......@@ -60,180 +95,184 @@ export class MainComponent implements OnInit {
courses = [];
highShow = false;
normalShow = false;
public opts: MapOptions
public opts: MapOptions;
public points: Array<Point> = [];
public polylineOptions: PolylineOptions;
public projects = [
{ secs: [] }
]
public projects1 = []
public projects2 = []
public projects = [{ secs: [] }];
public projects1 = [];
public projects2 = [];
polys = [];
proj: Project = { delFlag: 0 };
course: Course = { delFlag: 0 };
section: Scetion = { delFlag: 0 };
type = 1;
currentCouseId: any;
staticHighWay: any = {};
staticNormal: any = {};
normalProjects: any = [];
currProj: Project = {};
secs: Array<Scetion> = [];
camera:Camera={};
marker:any={};
camera: Camera = {};
marker: any = {};
debug = false;
typeChange(e) {
//0:course, 1 :project,2:section.
var dic = { 0: "red", 1: "yellow", 2: "green" }
console.log(drawingManager.polylineOptions.strokeColor = dic[e]);
var dic = { 0: "red", 1: "yellow", 2: "green" };
console.log((drawingManager.polylineOptions.strokeColor = dic[e]));
//当属于标段类型添加检查是否点在线上机制。
if (e == 2) {
drawingManager.hook = (point: Point) => {
return BMapLib.GeoUtils.isPointOnPolyline(point, this.getOverlayById(this.currentProjId));
}
return BMapLib.GeoUtils.isPointOnPolyline(
point,
this.getOverlayById(this.currentProjId)
);
};
} else {
drawingManager.hook = null;
}
}
addPoly(proj) {
var points = JSON.parse(proj.coordinate);
var toPoints = this.m.toPoints(points,this.curiveLength,this.curive);
var newPolyLine = new window.BMap.Polyline(toPoints, { strokeColor: proj.lineStyle, strokeWeight: proj.lineWidth });
var toPoints = this.m.toPoints(points, this.curiveLength, this.curive);
var newPolyLine = new window.BMap.Polyline(toPoints, {
strokeColor: proj.lineStyle,
strokeWeight: proj.lineWidth
});
(newPolyLine as any).id = (proj.course ? "p" : "s") + proj.id;
this.map.addOverlay(newPolyLine);
// var newPoints = this.corToPoint(proj.coordinate);
// this.m.animationLine(newPoints);
// var newPoints = this.corToPoint(proj.coordinate);
// this.m.animationLine(newPoints);
}
goToVideo(){
this.router.navigate(['/video']);
goToVideo() {
this.router.navigate(["/video"]);
}
ngOnInit(): void {
(window as any).main_this = this;
this.m.clearMapLocal();
this.map = new window.BMap.Map(("baidu-map"), {
this.map = new window.BMap.Map("baidu-map", {
enableMapClick: true
});
setTimeout(() => {
this.others();
this.others();
}, 1);
}
others() {
this.dynamicScriptLoader.load('drawing','geouti','mapv').then(data => {
//显示编辑按钮
(window as any).main_this.route.queryParamMap.subscribe(queryParams => {
(window as any).main_this.debug = Boolean(queryParams.get("debug"))
if( (window as any).main_this.debug){
var node = document.getElementsByClassName('BMapLib_Drawing')[0];
(node as any).style.display = 'block';
}
})
// Script Loaded Successfully
drawingManager.addEventListener('overlaycomplete', e => {
var overlay = e.overlay;
var coordinates = [];
if(overlay.getPath){
var path = overlay.getPath();
for (var i = 0; i < path.length; i++) {
coordinates.push([path[i].lng, path[i].lat]);
this.dynamicScriptLoader
.load("drawing", "geouti", "mapv")
.then(data => {
//显示编辑按钮
(window as any).main_this.route.queryParamMap.subscribe(queryParams => {
(window as any).main_this.debug = Boolean(queryParams.get("debug"));
if ((window as any).main_this.debug) {
var node = document.getElementsByClassName("BMapLib_Drawing")[0];
(node as any).style.display = "block";
}
}else{
coordinates.push(overlay.getPosition())
}
if (overlay.toString() == '[object Polyline]') {
});
if (this.type == CordType.PROJ) {
this.proj.course = this.currentCouseId;
this.proj.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-1');
}
else if (this.type == CordType.COURSE) {
this.course.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-2');
// Script Loaded Successfully
drawingManager.addEventListener("overlaycomplete", e => {
var overlay = e.overlay;
var coordinates = [];
if (overlay.getPath) {
var path = overlay.getPath();
for (var i = 0; i < path.length; i++) {
coordinates.push([path[i].lng, path[i].lat]);
}
} else {
coordinates.push(overlay.getPosition());
}
else if (this.type == CordType.SECTION) {
this.section.project = this.currentProjId;
this.section.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-3');
if (overlay.toString() == "[object Polyline]") {
if (this.type == CordType.PROJ) {
this.proj.course = this.currentCouseId;
this.proj.coordinate = JSON.stringify(coordinates);
this.modalService.open("custom-modal-1");
} else if (this.type == CordType.COURSE) {
this.course.coordinate = JSON.stringify(coordinates);
this.modalService.open("custom-modal-2");
} else if (this.type == CordType.SECTION) {
this.section.project = this.currentProjId;
this.section.coordinate = JSON.stringify(coordinates);
this.modalService.open("custom-modal-3");
}
} else if (overlay.toString() == "[object Polygon]") {
// geojsonStr = {
// "type": "Polygon",
// "coordinates": [coordinates]
// };
} else if (overlay.toString() == "[object Marker]") {
this.marker.coordinate = JSON.stringify(coordinates[0]);
this.modalService.open("marker");
}
}
else if (overlay.toString() == '[object Polygon]') {
// geojsonStr = {
// "type": "Polygon",
// "coordinates": [coordinates]
// };
}else if(overlay.toString() == "[object Marker]"){
this.marker.coordinate = JSON.stringify(coordinates[0]);
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>"
// + "<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'>" + pathmcStr + "</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));
this.map.setMaxZoom(this.debug==true ? 18:13);
(window as any).map=this.map;
// 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'>" + pathStr + "</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>";
});
})
.catch(error => console.log(error));
this.map.setMaxZoom(this.debug == true ? 18 : 13);
(window as any).map = this.map;
// this.map.setMapStyleV2({ styleJson: theme });
var hiddenHighIcon={
"featureType": "highwaysign",
"elementType": "labels.icon",
"stylers": {
"visibility": "off"
}
}
//this.map.setMapStyleV2({styleJson:hiddenHighIcon});
var hiddenHighIcon = {
featureType: "highwaysign",
elementType: "labels.icon",
stylers: {
visibility: "off"
}
};
//this.map.setMapStyleV2({styleJson:hiddenHighIcon});
this.map.enableScrollWheelZoom();
//this.map.enableScrollWheelZoom()
this.map.enableContinuousZoom()
this.map.enableContinuousZoom();
//this.map.centerAndZoom("山西省",11);
var _map =this.map;
var maping = {8:11,9:15,10:20,11:22,12:25,13:26,14:28,15:29}
var _map = this.map;
var maping = {
8: 11,
9: 15,
10: 20,
11: 22,
12: 25,
13: 26,
14: 28,
15: 29
};
this.map.addEventListener("zoomend", function() {
var curZoom =_map.getZoom();
var curZoom = _map.getZoom();
var collections = document.getElementsByClassName("label-panel2");
var marks = document.getElementsByClassName("mark");
for (const key in collections) {
if (collections.hasOwnProperty(key)) {
const element = collections[key];
const mark = marks[key];
(element as any).style.fontSize=maping[curZoom]+"px";
if(mark){
(mark as any).style.fontSize=maping[curZoom]+"px";
(element as any).style.fontSize = maping[curZoom] + "px";
if (mark) {
(mark as any).style.fontSize = maping[curZoom] + "px";
}
}
}
});
this.setBound();
this.http.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`).subscribe(res => {
this.projects1 = res.data;
});
this.http.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`).subscribe(res => {
this.projects2 = res.data;
});
this.http
.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`)
.subscribe(res => {
this.projects1 = res.data;
});
this.http
.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`)
.subscribe(res => {
this.projects2 = res.data;
});
this.http.get<any>(this.s.basePath + `/project/total`).subscribe(res => {
this.staticHighWay = res.data[0];
});
......@@ -250,19 +289,18 @@ export class MainComponent implements OnInit {
this.http.get<any>(this.s.basePath + "/course/list").subscribe(res => {
this.courses = res.data;
//加载全局线路
// setTimeout(() => {
this.loadPolys(res,false);
// setTimeout(() => {
this.loadPolys(res, false);
//}, 5000);
// setTimeout(() => {
this.http.get<any>(this.s.basePath + "/mapLable/list").subscribe(res => {
// this.maplabes = res.data;
//加载labels
// setTimeout(() => {
this.loadLabels(res.data);
//}, 5000);
});
// }, 200);
// setTimeout(() => {
this.http.get<any>(this.s.basePath + "/mapLable/list").subscribe(res => {
// this.maplabes = res.data;
//加载labels
// setTimeout(() => {
this.loadLabels(res.data);
//}, 5000);
});
// }, 200);
});
this.http.get<any>(this.s.basePath + "/scetion/list").subscribe(res => {
......@@ -270,7 +308,6 @@ export class MainComponent implements OnInit {
});
//response to 1440*900
}
proj2Change($event, type) {
this.map.clearOverlays();
......@@ -284,8 +321,7 @@ export class MainComponent implements OnInit {
var points = this.corToPoint(proj.coordinate);
this.map.setViewport(points);
}
loadLabels(data){
loadLabels(data) {
//var labels = [{lng:112.43176242674386,lat:37.78663390039693,text:"test1"}];
// var labels = data.map(d=>({...(JSON.parse(data.coordinate)),text:d.name}));
data.forEach(label => {
......@@ -293,28 +329,27 @@ export class MainComponent implements OnInit {
});
}
toHighWay() {
this.highShow = !this.highShow;
if (this.highShow) {
///map.clearOverlays();
this.http.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`).subscribe(res => {
this.projects = res.data;
var points = this.loadPolys(res,true);
});
}else{
this.map.centerAndZoom("山西省",8);
this.http
.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`)
.subscribe(res => {
this.projects = res.data;
var points = this.loadPolys(res, true);
});
} else {
this.map.centerAndZoom("山西省", 8);
}
}
private loadPolys(res: any,animation:boolean) {
private loadPolys(res: any, animation: boolean) {
var allPoints = [];
res.data.forEach(obj => {
this.addPoly(obj);
if(animation){
var newPoints = this.corToPoint(obj.coordinate);
this.m.animationLine(newPoints);
if (animation) {
var newPoints = this.corToPoint(obj.coordinate);
this.m.animationLine(newPoints);
}
allPoints = allPoints.concat(JSON.parse(obj.coordinate));
});
......@@ -326,28 +361,31 @@ export class MainComponent implements OnInit {
this.map.clearOverlays();
this.normalShow = !this.normalShow;
this.http.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`).subscribe(res => {
this.normalProjects = res.data;
});
this.http
.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`)
.subscribe(res => {
this.normalProjects = res.data;
});
}
openDialog(id: string) {
this.modalService.open(id);
}
corToPoint(json: string): Array<Point> {
return JSON.parse(json).map(r => ({ lng: r[0], lat: r[1] }));
}
highLight(i: number, obj, type) {
if(obj.hadZoom) return;
if (obj.hadZoom) return;
this.currProj = Object.assign({}, obj);
var overlays = this.map.getOverlays();
var cur = overlays.find(o => o.id == type + obj.id);
timer(0, 200)
.pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => {
.pipe(
timeInterval(),
pluck("interval"),
take(6)
)
.subscribe(index => {
if (cur.isVisible()) {
cur.hide();
} else {
......@@ -358,65 +396,65 @@ export class MainComponent implements OnInit {
var points = this.corToPoint(obj.coordinate);
//标段不定位
if(type!='s'){
// this.map.setViewport(points,{
if (type != "s") {
// this.map.setViewport(points,{
// enableAnimation:true,
// delay:5000
// });
var view = this.map.getViewport(points,{enableAnimation:true,delay:2000});
this.map.panTo(view.center,{duration:500});
// var orginZoom = this.map.getZoom();
// var dur =view.zoom - this.map.getZoom();
// timer(0, 200)
// .pipe(timeInterval(), pluck('interval'), take(dur)).subscribe((index:any)=>{
// // this.m.dispatchWheelEvent_Chrome(document.getElementById("baidu-map"),10);
// }
// );
this.wheelEvent.target=document.getElementById("baidu-map");
setTimeout(() => {
if(!this.m.isIE()){
(window as any).xiaolinMouseWheel(this.wheelEvent);
(window as any).xiaolinMouseWheel(this.wheelEvent);
}else{
this.map.centerAndZoom(view.center,view.zoom);
}
var view = this.map.getViewport(points, {
enableAnimation: true,
delay: 2000
});
}, 500);
obj.hadZoom=true;
// setTimeout(() => {
// this.map.centerAndZoom(view.center,view.zoom);
// }, 4000);
// setTimeout(() => {
// this.m.dispatchWheelEvent_Chrome(document.getElementById("baidu-map"),50);
// this.map.centerAndZoom(view.center,view.zoom);
// //this.map.dispatchWheelEvent_Chrome
// }, 1000);
this.map.panTo(view.center, { duration: 500 });
// var orginZoom = this.map.getZoom();
// var dur =view.zoom - this.map.getZoom();
// timer(0, 200)
// .pipe(timeInterval(), pluck('interval'), take(dur)).subscribe((index:any)=>{
// // this.m.dispatchWheelEvent_Chrome(document.getElementById("baidu-map"),10);
// }
// );
this.wheelEvent.target = document.getElementById("baidu-map");
setTimeout(() => {
if (!this.m.isIE()) {
(window as any).xiaolinMouseWheel(this.wheelEvent);
(window as any).xiaolinMouseWheel(this.wheelEvent);
} else {
this.map.centerAndZoom(view.center, view.zoom);
}
}, 500);
obj.hadZoom = true;
// setTimeout(() => {
// this.map.centerAndZoom(view.center,view.zoom);
// }, 4000);
// setTimeout(() => {
// this.m.dispatchWheelEvent_Chrome(document.getElementById("baidu-map"),50);
// this.map.centerAndZoom(view.center,view.zoom);
// //this.map.dispatchWheelEvent_Chrome
// }, 1000);
}
//设置摄像头数据
// this.http.get<any>(this.s.basePath + `/camera/totalByProjId?projId=`+obj.id).subscribe(res => {
// 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) {
this.http.get<any>(this.s.basePath + "/scetion/findListById/" + prj.id).subscribe(res => {
prj.secs = res.data;
this.loadPolys(res,false);
});
this.http
.get<any>(this.s.basePath + "/scetion/findListById/" + prj.id)
.subscribe(res => {
prj.secs = res.data;
this.loadPolys(res, false);
});
}
setCamera(sec: Scetion) {
// this.http.get<any>(this.s.basePath + "/camera/findListById/" + sec.id).subscribe(res => {
......@@ -425,55 +463,57 @@ export class MainComponent implements OnInit {
// });
}
addCourse(course: Course) {
this.http.post<Course>(this.s.basePath + "/course/add", course).subscribe(res => {
this.modalService.close('custom-modal-2');
})
this.http
.post<Course>(this.s.basePath + "/course/add", course)
.subscribe(res => {
this.modalService.close("custom-modal-2");
});
}
addSection(section: Scetion) {
this.http.post<Scetion>(this.s.basePath + "/scetion/add", section).subscribe(res => {
this.modalService.close('custom-modal-3');
})
this.http
.post<Scetion>(this.s.basePath + "/scetion/add", section)
.subscribe(res => {
this.modalService.close("custom-modal-3");
});
}
addCamera(camera: Camera) {
this.http.post<Scetion>(this.s.basePath + "/camera/add", camera).subscribe(res => {
this.modalService.close('marker');
})
this.http
.post<Scetion>(this.s.basePath + "/camera/add", camera)
.subscribe(res => {
this.modalService.close("marker");
});
}
addMarker(marker){
this.http.post<Scetion>(this.s.basePath + "/mapLable/add", marker).subscribe(res => {
this.modalService.close('marker');
})
// localStorage.setItem("marker_"+marker.name,JSON.stringify(marker.coordinate));
// this.closeModal('marker')
addMarker(marker) {
this.http
.post<Scetion>(this.s.basePath + "/mapLable/add", marker)
.subscribe(res => {
this.modalService.close("marker");
});
// localStorage.setItem("marker_"+marker.name,JSON.stringify(marker.coordinate));
// this.closeModal('marker')
}
addProj(proj: Project) {
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 });
}
public polylineLoaded(polyline: BPolyline): void {
this.map = polyline.getMap();
this.setBound();
// this.map.setMapStyleV2({ styleJson: theme });
// this.map.setMapStyleV2({ styleJson: theme });
this.map.enableScrollWheelZoom(true);
this.map.centerAndZoom("山西省",11);
this.dynamicScriptLoader.load('geouti',"mapv").then();
console.log('polyline loaded', polyline)
}
this.map.centerAndZoom("山西省", 11);
this.dynamicScriptLoader.load("geouti", "mapv").then();
console.log("polyline loaded", polyline);
}
// public polylineClicked({ polyline }): void {
// console.log('polyline clicked', polyline)
......@@ -483,10 +523,8 @@ export class MainComponent implements OnInit {
this.modalService.close(id);
}
setBound() {
var project = this.map.getMapType().getProjection();
var getPathStr = function (overlay) {
var getPathStr = function(overlay) {
var pathStr = "";
var path = overlay.getPath();
for (var i = 0; i < path.length; i++) {
......@@ -494,43 +532,55 @@ export class MainComponent implements OnInit {
}
pathStr = pathStr.substr(0, pathStr.length - 1);
return pathStr;
}
var _this=this;
};
var _this = this;
var bdary = new BMap.Boundary();
bdary.get('山西省', function (rs) {
// map.clearOverlays();
bdary.get("山西省", function(rs) {
// map.clearOverlays();
//清除地图覆盖物
//思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
//1.获取选中行政区划边框点的集合rs.boundaries[0]
var strs = new Array();
strs = rs.boundaries[0].split(";");
var ENWS = "";
for (var i=0;i<strs.length;i++) {
ENWS += strs[i] + ";"
}
//2.自定义外围边框点的集合
var E_JW = "170.672126, 39.623555;"; //东
var EN_JW = "170.672126, 81.291804;"; //东北角
var N_JW = "105.913641, 81.291804;"; //北
var NW_JW = "-169.604276, 81.291804;"; //西北角
var W_JW = "-169.604276, 38.244136;"; //西
var WS_JW = "-169.604276, -68.045308;"; //西南角
var S_JW = "114.15563, -68.045308;"; //南
var SE_JW = "170.672126, -68.045308 ;"; //东南角
//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"}); //建立多边形覆盖物
_this.map.addOverlay(ply1);//遮罩物是半透明的，如果需要纯色可以多添加几层
//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:"#16e8d6",fillColor:"",fillOpacity:"0"});
_this.map.addOverlay(ply);
_this.map.setViewport(ply.getPath());//调整视野
//思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
//1.获取选中行政区划边框点的集合rs.boundaries[0]
var strs = new Array();
strs = rs.boundaries[0].split(";");
var ENWS = "";
for (var i = 0; i < strs.length; i++) {
ENWS += strs[i] + ";";
}
//2.自定义外围边框点的集合
var E_JW = "170.672126, 39.623555;"; //东
var EN_JW = "170.672126, 81.291804;"; //东北角
var N_JW = "105.913641, 81.291804;"; //北
var NW_JW = "-169.604276, 81.291804;"; //西北角
var W_JW = "-169.604276, 38.244136;"; //西
var WS_JW = "-169.604276, -68.045308;"; //西南角
var S_JW = "114.15563, -68.045308;"; //南
var SE_JW = "170.672126, -68.045308 ;"; //东南角
//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"
}
); //建立多边形覆盖物
_this.map.addOverlay(ply1); //遮罩物是半透明的，如果需要纯色可以多添加几层
//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:"#16e8d6",fillColor:"",fillOpacity:"0"});
_this.map.addOverlay(ply);
_this.map.setViewport(ply.getPath()); //调整视野
});
}
/**
*
*
* @param id id
* @param type "s" = section ,"p"=project
*/
......@@ -538,40 +588,43 @@ export class MainComponent implements OnInit {
var overlays = this.map.getOverlays();
return overlays.find(o => o.id == type + id);
}
addLabel(points:Array<Point>,proj){
var center = {lng:0,lat:0}
points.forEach(p => {
center.lng+=p.lng;
center.lat+=p.lat;
});
center.lng=center.lng/points.length;
center.lat=center.lat/points.length;
var label = new BMap.Label(`
addLabel(points: Array<Point>, proj) {
var center = { lng: 0, lat: 0 };
points.forEach(p => {
center.lng += p.lng;
center.lat += p.lat;
});
center.lng = center.lng / points.length;
center.lat = center.lat / points.length;
var label = new BMap.Label(
`
<div class="label-panel">
<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.capital || ""}亿</i></p>
</div>`, {
position: center
});
<p style="margin:0;color:#eaab4e;">里程：<i>${proj.mileage ||
""}Km</i></p>
<p style="margin:0;color:#eaab4e;">投资：<i>${proj.capital ||
""}亿</i></p>
</div>`,
{
position: center
}
);
this.map.addOverlay(label);
}
addLabel2(label){
var label = new BMap.Label(`
addLabel2(label) {
var label = new BMap.Label(
`
<div style="background:${label.divStyle};font-size:11px;" class="label-panel2">
${label.name}
</div>
<div class='mark' style="font-size:11px;">${label.mark}</div>
`, {
position: JSON.parse(label.coordinate),
// offset:{width:5,height:-10}
});
this.map.addOverlay(label);
}
`,
{
position: JSON.parse(label.coordinate)
// offset:{width:5,height:-10}
}
);
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>
山西省交通运输厅智慧监管指挥平台
</h1>
<div class="main">
<div class="left">
<button class="ie-fix-button" (click)="back()">返回</button>
<nz-tree [nzShowIcon]="true" [nzTreeTemplate]="nzTreeTemplate" [nzData]="nodes" nzAsyncData
(nzClick)="addVCR($event)" (nzExpandChange)="nzEvent($event)">
(nzClick)="addVCR($event)" (nzExpandChange)="nzEvent($event)">
<ng-template #nzTreeTemplate let-node>
<!-- <span class="custom-node" [class.active]="activedNode?.key === node.key">
<span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
......@@ -26,7 +24,7 @@
<span *ngIf="node.isLeaf">
<i nz-icon nzType="video-camera" nzTheme="outline"></i>
{{node.title}}
<!-- <a href="https://221.131.9.172:1443">
<!-- <a href="https://221.131.9.172:1443">
<i nz-icon nzType="sound" (click)="goTo('https://221.131.9.172:1443')" nzTheme="outline"></i>
</a> -->
......@@ -51,6 +49,6 @@
</div>
<nz-modal [(nzVisible)]="isVisible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<p>插件启动失败，请检查插件是否安装！</p>
<p>下载地址：<a href="/assets/VideoWebPlugin.exe">VideoWebPlugin.exe</a></p>
</nz-modal>
<p>插件启动失败，请检查插件是否安装！</p>
<p>下载地址：<a href="/assets/VideoWebPlugin.exe">VideoWebPlugin.exe</a></p>
</nz-modal>
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