Skip to content

S
supervise-front
Commit ddbea814 by niuxiaolin
Options

latest ui 08/11/2019 15:06:38

parent 9b61839d
Showing with 186 additions and 59 deletions
package.json
......@@ -3,7 +3,7 @@
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --port 8008 --proxy--config proxy.json",
"start": "ng serve --port 8008 --host 0.0.0.0 --proxy--config proxy.json",
"build": "ng build --prod --build-optimizer && npm run publish-to-backend ",
"publish-to-backend": "Powershell.exe -executionpolicy remotesigned -File publish-to-backend.ps1",
"test": "ng test",
......
src/app/api/api/default.service.ts
......@@ -53,6 +53,7 @@ export class DefaultService {
this.basePath="./";
}else{
this.basePath = "http://localhost";
// this.basePath = "http://192.168.19.199";
}
// if (basePath) {
// this.basePath = basePath;
......
src/app/app.component.html
<h1 class="gradient">
山西省公路建设智慧监管指挥平台
</h1>
<router-outlet></router-outlet>
src/app/app.component.less
......@@ -4,16 +4,15 @@ h1{
.gradient{
background: radial-gradient(#fff,#1184c2);
/* background: radial-gradient(#fff, #1184c2); */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* -webkit-text-fill-color: transparent; */
letter-spacing: 20px;
margin-top:13px;
font-size: 36px;
/* -webkit-animation: neon6 1.5s ease-in-out infinite alternate; */
/* animation: neon6 0.5s ease-in-out infinite alternate; */
// text-shadow: 0px 0px 18px rgb(167, 223, 102);
margin-top: 13px;
font-size: 46px;
font-weight: 800;
color: white;
}
.gradient:hover{
}
......
src/app/login/login.component.html
<div class="main">
<div></div>
<div class="login-header">
山西省交通运输厅智慧监管指挥平台
</div>
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item>
<h1 style="color:white;">登录</h1>
<h1>登录</h1>
</nz-form-item>
<nz-form-item>
<nz-form-control nzErrorTip="请输入用户名!">
......@@ -22,7 +25,7 @@
<nz-form-item>
<nz-form-control>
<label nz-checkbox formControlName="remember">
<span style="color:white;">记住我</span>
<span>记住我</span>
</label>
<!-- <a class="login-form-forgot" class="login-form-forgot">忘记密码</a> -->
......@@ -33,11 +36,11 @@
<nz-form-control>
<!-- <a class="login-form-forgot" class="login-form-forgot">忘记密码</a> -->
<button nz-button class="login-form-button" [nzType]="'primary'">登录</button>
<button nz-button style="width: 60%;" class="login-form-button" [nzType]="'primary'">登录</button>
</nz-form-control>
</nz-form-item>
<<nz-form-item *ngIf="error" nzFlex>
<nz-form-item *ngIf="error" nzFlex>
<label class="text-error">用户名或者密码出错！</label>
</nz-form-item>
</form>
......
src/app/login/login.component.less
.main{
display: grid;
grid-template-columns: 70% 30%;
background:url('/assets/blue.png');
min-height: 728px;
background-size:cover;
grid-template-rows: 86vh;
// display: grid;
// grid-template-columns: 70% 30%;
// // background:url('/assets/blue.png');
// min-height: 936px;
// background-size:cover;
// grid-template-rows: 86vh;
// background:white;
// display: flex;
// justify-content: center;
min-height: 937px;
background: rgba(72,91,234,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(72,91,234,1) 7%, rgba(72,91,234,1) 32%, rgba(15,32,219,1) 60%, rgba(15,32,219,1) 66%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(7%, rgba(72,91,234,1)), color-stop(32%, rgba(72,91,234,1)), color-stop(60%, rgba(15,32,219,1)), color-stop(66%, rgba(15,32,219,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(72,91,234,1) 7%, rgba(72,91,234,1) 32%, rgba(15,32,219,1) 60%, rgba(15,32,219,1) 66%);
background: -o-radial-gradient(center, ellipse cover, rgba(72,91,234,1) 7%, rgba(72,91,234,1) 32%, rgba(15,32,219,1) 60%, rgba(15,32,219,1) 66%);
background: -ms-radial-gradient(center, ellipse cover, rgba(72,91,234,1) 7%, rgba(72,91,234,1) 32%, rgba(15,32,219,1) 60%, rgba(15,32,219,1) 66%);
background: radial-gradient(ellipse at center, #75abd6 7%, #4e91c7 32%, #055a9e 60%, #015293 66%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#485bea', endColorstr='#0f20db', GradientType=1 );
}
form{
text-align: center;
margin: 10em;
background: #13151591;
background: #FFF;
width: 418px;
color: black;
margin: 0 auto;
padding: 2em;
margin-top: 8em;
}
.text-error{
color:red;
......@@ -53,3 +68,11 @@ form{
}
}
}
.login-header{
padding-top:1em;
font-size: 50px;
text-align: center;
font-weight: 700;
color:#fff;
letter-spacing: 20px;
}
\ No newline at end of file
src/app/login/login.component.ts
......@@ -25,6 +25,11 @@ export class LoginComponent implements OnInit {
this.validateForm.controls[i].updateValueAndValidity();
}
if(this.validateForm.valid){
if(this.validateForm.value.remember==true){
localStorage.setItem("userName",this.validateForm.value.userName);
localStorage.setItem("password",this.validateForm.value.password);
}
let urlParams:URLSearchParams = new URLSearchParams();
......@@ -41,10 +46,12 @@ export class LoginComponent implements OnInit {
constructor(private fb: FormBuilder,private http:HttpClient,private s:DefaultService) {}
ngOnInit(): void {
var userName = localStorage.getItem("userName");
var password = localStorage.getItem("password");
this.validateForm = this.fb.group({
userName: [null, [Validators.required]],
password: [null, [Validators.required]],
remember: [true]
userName: [userName, [Validators.required]],
password: [password, [Validators.required]],
remember: [false]
});
}
}
src/app/main/main.component.html
<h1 class="gradient">
山西省公路建设智慧监管指挥平台
</h1>
<div *ngIf="debug">
标注：<input id="markerText" type="text">
theme:
......@@ -179,7 +184,9 @@
<span class="tooltiptextx">视频监控</span>
</div>
<div class="tooltip">
<img alt="视频监控" class="tooltip" src="/assets/baseline-security.svg">
<a href="http://47.92.203.246/pcByFullScreen/#/pcByFullScreen/">
<img alt="质量安全监管" class="tooltip" src="/assets/baseline-security.svg">
</a>
<span class="tooltiptextx">质量安全监管
</span>
......
src/app/main/main.component.less
......@@ -85,10 +85,10 @@ baidu-map{
top: 106px;
width: 35px;
img{
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;
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;
// margin-bottom: 1.3em;
cursor: pointer;
width: 63px;
}
......@@ -118,23 +118,26 @@ baidu-map{
fieldset{
border:3px solid #bdc5d4;
padding: 1em;
background: #202734;
background: #015293;
margin: 5px;
border-radius: 13px;
margin-bottom: 5em;
margin-left: 2em;
width:180%;
legend{
color: #0089ea;
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{
background: #00daff33;
padding: 0.5em;
border: 1px solid #16e8d6;
cursor: pointer;
}
}
......@@ -165,7 +168,6 @@ fieldset{
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
margin-top: 1.6em;
text-align: center;
width:70px;
......@@ -196,5 +198,10 @@ fieldset{
width: 100%;
height: 900px;
display: block;
background-color:rgb(9, 18, 32)!important;
// background-color:rgb(9, 18, 32)!important;
}
.function{
>.tooltip{
margin-bottom:1em;
}
}
\ No newline at end of file
src/app/main/main.component.ts
......@@ -46,6 +46,7 @@ export class MainComponent implements OnInit {
theme: any;
markers: any;
map: any;
wheelEvent:any = {clientX:944,clientY:588,currentTarget:document.getElementById("baidu-map"),deltaX:0,deltaY:-500,type:"mousewheel",wheelDelta:300,wheelDeltaX:0,wheelDeltaY:300,which:0,x:944,y:488};
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 = {
......@@ -111,14 +112,17 @@ export class MainComponent implements OnInit {
goToVideo(){
this.router.navigate(['/video']);
}
ngOnInit(): void {
//localStorage.clear();
this.map = new window.BMap.Map(("baidu-map"), {
enableMapClick: true
});
(window as any).map=this.map;
this.map.setMapStyleV2({ styleJson: theme });
this.map.enableScrollWheelZoom(true);
//this.map.enableContinuousZoom()
// this.map.setMapStyleV2({ styleJson: theme });
this.map.enableScrollWheelZoom();
//this.map.enableScrollWheelZoom()
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}
......@@ -342,7 +346,15 @@ export class MainComponent implements OnInit {
// // this.m.dispatchWheelEvent_Chrome(document.getElementById("baidu-map"),10);
// }
// );
this.map.centerAndZoom(view.center,view.zoom);
this.wheelEvent.target=document.getElementById("baidu-map");
setTimeout(() => {
(window as any).xiaolinMouseWheel(this.wheelEvent);
}, 1000);
// 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);
......@@ -471,10 +483,12 @@ export class MainComponent implements OnInit {
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.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:"#16e8d6",fillColor:"",fillOpacity:"0"});
var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight:0,strokeColor:"rgb(50, 131, 253)",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());//调整视野
});
......
src/app/video/video.component.html
<h1 class="gradient">
山西省公路建设智慧监管指挥平台
</h1>
<div class="main">
<div>
<button (click)="back()">返回</button>
......@@ -39,3 +45,8 @@
</div>
</div>
<nz-modal [(nzVisible)]="isVisible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<p>插件启动失败，请检查插件是否安装！</p>
<p>下载地址：<a href="/assets/VideoWebPlugin.exe">VideoWebPlugin.exe</a></p>
</nz-modal>
\ No newline at end of file
src/app/video/video.component.ts
......@@ -19,6 +19,8 @@ export class VideoComponent implements OnInit {
oWebControl = null;
pubKey = null;
initCount = 0;
isVisible=false;
nodeItems = [{
id: '0',
name: '高速公路(67/92)',
......@@ -126,6 +128,7 @@ export class VideoComponent implements OnInit {
}];
cams = Array(16);
ngOnInit() {
(window as any).xiaolin_this = this;
this.dynamicScriptLoader.load('jquery', 'jsencrypt', 'jswebcontrol').then(() => {
this.startVideo();
});
......@@ -183,6 +186,15 @@ export class VideoComponent implements OnInit {
);
});
}
handleOk(): void {
console.log('Button ok clicked!');
this.isVisible = false;
}
handleCancel(): void {
console.log('Button cancel clicked!');
this.isVisible = false;
}
preview() {
var cameraIndexCode ="862edc0a09734e83a69101f69f840e0d"; //获取输入的监控点编号值，必填
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
......@@ -230,7 +242,10 @@ export class VideoComponent implements OnInit {
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
$(window).resize(function () {
if (oWebControl != null) {
oWebControl.JS_Resize(1500, 700);
var width=$(document).width()
var height=$(document).height()
oWebControl.JS_Resize(width*0.7, height*0.7);
//oWebControl.JS_Resize((1500/1920)*width*0.8, (700/900)*height*0.8);
setWndCover();
}
});
......@@ -238,7 +253,10 @@ export class VideoComponent implements OnInit {
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
$(window).scroll(function () {
if (oWebControl != null) {
oWebControl.JS_Resize(1500, 700);
var width=$(document).width()
var height=$(document).height()
oWebControl.JS_Resize(width*0.7, height*0.7);
// oWebControl.JS_Resize((1500/1920)*width*0.8, (700/900)*height*0.8);
setWndCover();
}
});
......@@ -309,7 +327,7 @@ oWebControl.JS_RepairPartWindow(0, 0, 1001, 700); // 多1个像素点防止
var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = "D:\\SnapDir"; //抓图存储路径
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
var layout = "4x6"; //playMode指定模式的布局
var layout = "3x3"; //playMode指定模式的布局
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，是为1，否为0
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
......@@ -354,10 +372,13 @@ oWebControl.JS_RepairPartWindow(0, 0, 1001, 700); // 多1个像素点防止
// wndId:wndId //可指定播放窗口
// })
// })
oWebControl.JS_Resize(1500, 700); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
var width=$(document).width()
var height=$(document).height()
oWebControl.JS_Resize(width*0.75, height*0.75); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
});
});
}
let oWebControl = new WebControl({
szPluginContainer: "playWnd", // 指定容器id
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
......@@ -379,6 +400,7 @@ oWebControl.JS_RepairPartWindow(0, 0, 1001, 700); // 多1个像素点防止
},
cbConnectError: function () { // 创建WebControl实例失败
oWebControl = null;
console.log("插件未启动，正在尝试启动，请稍候...");
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
this.initCount++;
......@@ -387,6 +409,7 @@ oWebControl.JS_RepairPartWindow(0, 0, 1001, 700); // 多1个像素点防止
this.initPlugin();
}, 3000)
} else {
(window as any).xiaolin_this.isVisible = true;
console.log("插件启动失败，请检查插件是否安装！");
}
},
......
src/assets/orgingetscript.js
......@@ -1935,10 +1935,10 @@ window.BMAP_AUTHENTIC_KEY = "KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6";
var f = function(a) {
a && (qb = p,
setTimeout(function() {
//rb.src = D.Cd + "images/blank.gif?" + a.src
rb.src = D.Cd + "images/blank.gif?" + a.src
//console.log(rb.src)
//xiaolin
rb.src = "/assets/maptile/back.png"
//rb.src = "/assets/maptile/back.png"
}, 50))
}
, g = function() {
......@@ -8183,18 +8183,20 @@ window.BMAP_AUTHENTIC_KEY = "KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6";
, a = a.y
, f = Sb("normal")
, g = 1
, c = Gd['dark'];
, c = Gd['normal'];
this.map.Yw() && (g = 2);
e = this.map.oh.Uv(e, b).Ol;
var orginUrl= (Fd[Math.abs(e + a) % Fd.length] + "?qt=vtile&x=" + (e + "").replace(/-/gi, "M") + "&y=" + (a + "").replace(/-/gi, "M") + "&z=" + b + "&styles=" + c + "&scaler=" + g + (6 == z.ga.ma ? "&color_dep=32&colors=50" : "") + "&udt=" + f).replace(/-(\d+)/gi, "M$1")
// return orginUrl;
tdir = bmapcfg.tiles_dir.length>0?bmapcfg.tiles_dir:bmapcfg.home + "maptile";
//xiaolin
// httpGetAsync("https://localhost/baidu/isfile/"+e+"/"+a+"/"+b+"/"+c,function(){
httpGetAsync("http://localhost/baidu/isfile/"+e+"/"+a+"/"+b+"/"+c,function(){
// })
// return tdir + "/" + b + "/" + a+ "/" + e + bmapcfg.imgext; // 使用本地的瓦片
})
return tdir + "/" + b + "/" + a+ "/" + e + bmapcfg.imgext; // 使用本地的瓦片
// return "https://localhost/baidu/isfile/"+e+"/"+a+"/"+b+"/"+c;
return "/assets/maptile/back.png";
// return "/assets/maptile/back.png";
}
;
var Pa = new Dd("\u5730\u56fe",Hd,{
......@@ -11502,3 +11504,5 @@ function httpGetAsync(theUrl, callback)
// map.setZoom(curZoom+1);
// }
// }
src/getscript.js
......@@ -3377,6 +3377,9 @@ window.BMAP_AUTHENTIC_KEY = "KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6";
jZ: function(a, b) {
var c = this.lb(a);
try {
if(a=="oppc"){
console.log(b)
}
eval(b)
} catch (e) {
return
......
src/styles.less
......@@ -46,7 +46,7 @@
.label-panel{
padding: 4px;
font-size: 16px;
background: #2f5aa51f;
background: #015293;
border-radius: 4px;
border: 1px solid wheat;
}
......@@ -273,8 +273,10 @@ legend{
width:20%!important;
}
.tooltiptextx{
color:white;
color:#3170f8;
font-size:15px;
font-weight: 900;
}
.ant-tree li {
font-size: 22px;
......@@ -283,3 +285,26 @@ legend{
.BMapLib_Drawing{
display: none;
}
.gradient{
/* background: radial-gradient(#fff, #1184c2); */
-webkit-background-clip: text;
/* -webkit-text-fill-color: transparent; */
letter-spacing: 20px;
margin-top: 13px;
font-size: 46px;
font-weight: 800;
color: white;
text-align: center;
}
body{
overflow: hidden;
}
ul{
&.ant-tree{
overflow: auto;
max-height: 800px;
}
}
\ No newline at end of file
src/supervise.sql
This source diff could not be displayed because it is too large. You can view the blob instead.
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