Compare commits
20 Commits
| Author | SHA1 | Date |
|---|---|---|
 徐景良
|
df8c499b17 | |
|
徐景良
|
069d377b8e | |
 zhufu
|
d2dc76996b | |
 石超
|
681e5e9b9e | |
|
石超
|
85933b5dee | |
|
石超
|
e272b02cfa | |
|
徐景良
|
fd381b338b | |
|
徐景良
|
0df1c6f9c2 | |
|
石超
|
efc5df9849 | |
|
徐景良
|
d5a1a15b2f | |
|
徐景良
|
01d9ad497f | |
 刘妍
|
c088f51f72 | |
|
刘妍
|
2353ba9af7 | |
|
刘妍
|
64bc78eba2 | |
|
刘妍
|
b5650409f9 | |
|
石超
|
a83044788c | |
|
石超
|
b432aff69e | |
|
刘妍
|
b74de6b0d7 | |
|
刘妍
|
329ca651c6 | |
|
刘妍
|
4655a8c179 |
|
|
@ -1,7 +1,7 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
.history/
|
||||
.svn
|
||||
# local env files
|
||||
.env.local
|
||||
|
|
|
|||
|
|
@ -3320,80 +3320,6 @@
|
|||
"webpack-chain": "^6.4.0",
|
||||
"webpack-dev-server": "^3.11.0",
|
||||
"webpack-merge": "^4.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@vue/cli-shared-utils": {
|
||||
|
|
@ -9075,6 +9001,11 @@
|
|||
"resolved": "https://registry.npmjs.org/js-calendar/-/js-calendar-1.2.3.tgz",
|
||||
"integrity": "sha512-dAA1/Zbp4+c5E+ARCVTIuKepXsNLzSYfzvOimiYD4S5eeP9QuplSHLcdhfqFSwyM1o1u6ku6RRRCyaZ0YAjiBw=="
|
||||
},
|
||||
"js-md5": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.8.3.tgz",
|
||||
"integrity": "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ=="
|
||||
},
|
||||
"js-message": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
|
||||
|
|
@ -9642,6 +9573,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"mapbox-gl-draw-snap-mode": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/mapbox-gl-draw-snap-mode/-/mapbox-gl-draw-snap-mode-0.2.0.tgz",
|
||||
"integrity": "sha512-c6u8wL1cHgzFAAi6wtuoJVBKAF4qzGorpCn4IeninkzkUaYGVrNtUNPky3ECx9C3P9QbNOwD60j8bYj5wQI8hA==",
|
||||
"requires": {
|
||||
"@turf/turf": "^6.5.0"
|
||||
}
|
||||
},
|
||||
"mapbox-gl-utils": {
|
||||
"version": "0.39.0",
|
||||
"resolved": "https://registry.npmmirror.com/mapbox-gl-utils/-/mapbox-gl-utils-0.39.0.tgz",
|
||||
|
|
@ -14041,6 +13980,80 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.8.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
|
||||
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
|
||||
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-router": {
|
||||
"version": "3.5.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
|
||||
|
|
|
|||
|
|
@ -18,8 +18,10 @@
|
|||
"core-js": "^3.6.5",
|
||||
"element-ui": "^2.15.8",
|
||||
"jquery": "^3.6.4",
|
||||
"js-md5": "^0.8.3",
|
||||
"less-loader": "^6.0.0",
|
||||
"mapbox-gl": "^2.13.0",
|
||||
"mapbox-gl": "^2.0.0",
|
||||
"mapbox-gl-draw-snap-mode": "^0.2.0",
|
||||
"mapbox-gl-utils": "^0.39.0",
|
||||
"qs": "^6.11.1",
|
||||
"terraformer-wkt-parser": "^1.2.1",
|
||||
|
|
|
|||
|
|
@ -1,21 +0,0 @@
|
|||
{
|
||||
"method":"feixian",
|
||||
"feixian":{
|
||||
"name":"费县",
|
||||
"map":{
|
||||
"center":[],
|
||||
"zoom":10,
|
||||
"xianjieLayer":"http://175.27.168.120:8080/geoserver/feixian/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=feixian%3Axianjie&maxFeatures=50&outputFormat=application%2Fjson",
|
||||
"yingxiangLayer":"http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"
|
||||
}
|
||||
},
|
||||
"pingyixian":{
|
||||
"name":"平邑县",
|
||||
"map":{
|
||||
"center":[117.7075,35.43222222],
|
||||
"zoom":9.7,
|
||||
"xianjieLayer":"http://175.27.168.120:8080/geoserver/linyishi/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=linyishi%3Axianjie&cql_filter=xzqdm%20like%20%27%25371326%25%27&maxFeatures=50&outputFormat=application%2Fjson",
|
||||
"yingxiangLayer":"http://175.27.168.120:8080/geoserver/pingyixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=pingyixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 843 B |
|
|
@ -1,145 +1,145 @@
|
|||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.flex-1{
|
||||
flex: 1;
|
||||
}
|
||||
.wrap{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.nowrap{
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.row{
|
||||
flex-direction: row;
|
||||
}
|
||||
.column{
|
||||
flex-direction: column;
|
||||
}
|
||||
.hidden{
|
||||
overflow: hidden;
|
||||
}
|
||||
.auto{
|
||||
overflow: auto;
|
||||
}
|
||||
.ai-c{
|
||||
align-items: center;
|
||||
}
|
||||
.ai-e{
|
||||
align-items: end;
|
||||
}
|
||||
.jc-se{
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.jc-sa{
|
||||
justify-content: space-around;
|
||||
}
|
||||
.jc-sb{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.jc-c{
|
||||
justify-content: center;
|
||||
}
|
||||
.jc-e{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.mt-1{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mt-2{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mt-3{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.ml-1{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.ml-2{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.ml-3{
|
||||
margin-left: 30px;
|
||||
}
|
||||
.mb-1{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mb-2{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mb-3{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.mr-1{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mr-2{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mr-3{
|
||||
margin-right: 30px;
|
||||
}
|
||||
.ta-c{
|
||||
text-align: center;
|
||||
}
|
||||
.ta-l{
|
||||
text-align: left;
|
||||
}
|
||||
.cursor{
|
||||
cursor: pointer;
|
||||
}
|
||||
.pos-r{
|
||||
position: relative;
|
||||
}
|
||||
.pos-a{
|
||||
position: absolute;
|
||||
}
|
||||
.pos-f{
|
||||
position: fixed;
|
||||
}
|
||||
.max-w{
|
||||
width: 100%;
|
||||
}
|
||||
.max-h{
|
||||
height: 100%;
|
||||
}
|
||||
.fz-12{
|
||||
font-size: 12px;
|
||||
}
|
||||
.fz-14{
|
||||
font-size: 14px;
|
||||
}
|
||||
.fz-16{
|
||||
font-size: 16px;
|
||||
}
|
||||
.fz-18{
|
||||
font-size: 18px;
|
||||
}
|
||||
.fz-20{
|
||||
font-size: 20px;
|
||||
}
|
||||
.fz-22{
|
||||
font-size: 22px;
|
||||
}
|
||||
.fz-24{
|
||||
font-size: 24px;
|
||||
}
|
||||
.fz-26{
|
||||
font-size: 26px;
|
||||
}
|
||||
.fz-28{
|
||||
font-size: 28px;
|
||||
}
|
||||
.fc-w{
|
||||
color: white;
|
||||
}
|
||||
.fc-b{
|
||||
color: black;
|
||||
}
|
||||
.fc-r{
|
||||
color: red;
|
||||
}
|
||||
.fw-b{
|
||||
font-weight: bold;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.flex-1{
|
||||
flex: 1;
|
||||
}
|
||||
.wrap{
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.nowrap{
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.row{
|
||||
flex-direction: row;
|
||||
}
|
||||
.column{
|
||||
flex-direction: column;
|
||||
}
|
||||
.hidden{
|
||||
overflow: hidden;
|
||||
}
|
||||
.auto{
|
||||
overflow: auto;
|
||||
}
|
||||
.ai-c{
|
||||
align-items: center;
|
||||
}
|
||||
.ai-e{
|
||||
align-items: end;
|
||||
}
|
||||
.jc-se{
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.jc-sa{
|
||||
justify-content: space-around;
|
||||
}
|
||||
.jc-sb{
|
||||
justify-content: space-between;
|
||||
}
|
||||
.jc-c{
|
||||
justify-content: center;
|
||||
}
|
||||
.jc-e{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.mt-1{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mt-2{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mt-3{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.ml-1{
|
||||
margin-left: 10px;
|
||||
}
|
||||
.ml-2{
|
||||
margin-left: 20px;
|
||||
}
|
||||
.ml-3{
|
||||
margin-left: 30px;
|
||||
}
|
||||
.mb-1{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mb-2{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mb-3{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.mr-1{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.mr-2{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.mr-3{
|
||||
margin-right: 30px;
|
||||
}
|
||||
.ta-c{
|
||||
text-align: center;
|
||||
}
|
||||
.ta-l{
|
||||
text-align: left;
|
||||
}
|
||||
.cursor{
|
||||
cursor: pointer;
|
||||
}
|
||||
.pos-r{
|
||||
position: relative;
|
||||
}
|
||||
.pos-a{
|
||||
position: absolute;
|
||||
}
|
||||
.pos-f{
|
||||
position: fixed;
|
||||
}
|
||||
.max-w{
|
||||
width: 100%;
|
||||
}
|
||||
.max-h{
|
||||
height: 100%;
|
||||
}
|
||||
.fz-12{
|
||||
font-size: 12px;
|
||||
}
|
||||
.fz-14{
|
||||
font-size: 14px;
|
||||
}
|
||||
.fz-16{
|
||||
font-size: 16px;
|
||||
}
|
||||
.fz-18{
|
||||
font-size: 18px;
|
||||
}
|
||||
.fz-20{
|
||||
font-size: 20px;
|
||||
}
|
||||
.fz-22{
|
||||
font-size: 22px;
|
||||
}
|
||||
.fz-24{
|
||||
font-size: 24px;
|
||||
}
|
||||
.fz-26{
|
||||
font-size: 26px;
|
||||
}
|
||||
.fz-28{
|
||||
font-size: 28px;
|
||||
}
|
||||
.fc-w{
|
||||
color: white;
|
||||
}
|
||||
.fc-b{
|
||||
color: black;
|
||||
}
|
||||
.fc-r{
|
||||
color: red;
|
||||
}
|
||||
.fw-b{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,365 +1,365 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>preview_demo</title>
|
||||
<link href="./common.css" rel="stylesheet">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.camera-dia{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0);
|
||||
position:relative;
|
||||
}
|
||||
.camera-box{
|
||||
width: 720px;
|
||||
height: 360px;
|
||||
border-radius: 5px;
|
||||
position: fixed;
|
||||
left:100%;
|
||||
top:100%;
|
||||
transform:translate(-50%,-50%);
|
||||
z-index: 9999;
|
||||
}
|
||||
.camera-header{
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
.camera-header img{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.camera-body{
|
||||
|
||||
width: 90%;
|
||||
height: 230px;
|
||||
/* border: 1px solid #fff; */
|
||||
margin-left: 5%;
|
||||
}
|
||||
.camera-footer{
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
color: #4371ec;
|
||||
text-align: left;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.camera-footer span{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.playWnd {
|
||||
width: 360px; /*播放容器的宽和高设定*/
|
||||
height: 230px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="camera-dia">
|
||||
<div class="camera-box">
|
||||
<div class="camera-header ">
|
||||
<span class="fz-16" id="carmerName"></span>
|
||||
<img src="../img/close.png" class="cursor" id="closeBtn" />
|
||||
</div>
|
||||
<div class="camera-body">
|
||||
<!--视频窗口展示-->
|
||||
<div id="playWnd" class="playWnd"></div>
|
||||
</div>
|
||||
<div class="camera-footer mt-1" style="display: none;">
|
||||
设备编号：<span id="carmerCard"></span>
|
||||
</div>
|
||||
<div style="display: none;" id="carmerAppKey"></div>
|
||||
<div style="display: none;" id="carmerIp"></div>
|
||||
<div style="display: none;" id="carmerPort"></div>
|
||||
<div style="display: none;" id="appSecret"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<!--三个必要的js文件引入-->
|
||||
<script src="jquery-1.12.4.min.js"></script>
|
||||
<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
|
||||
<script src="jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
window.onload = () => {
|
||||
// 子页面接收消息
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.data) {
|
||||
console.log("play-data",e.data);
|
||||
$("#carmerName").text(e.data[0])
|
||||
$("#carmerCard").text(e.data[1])
|
||||
$("#carmerAppKey").text(e.data[2])
|
||||
$("#carmerIp").text(e.data[3])
|
||||
$("#carmerPort").text(e.data[4])
|
||||
$("#appSecret").text(e.data[5])
|
||||
}
|
||||
}, false)
|
||||
|
||||
initPlugin();
|
||||
}
|
||||
$("#closeBtn").click(function(){
|
||||
window.parent.postMessage(
|
||||
{
|
||||
cmd: 'close'
|
||||
}
|
||||
)
|
||||
})
|
||||
//页面加载时创建播放实例初始化
|
||||
$(window).load(function () {
|
||||
// initPlugin();
|
||||
});
|
||||
|
||||
//声明公用变量
|
||||
var initCount = 0;
|
||||
var pubKey = '';
|
||||
|
||||
// 创建播放实例
|
||||
function initPlugin () {
|
||||
oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnd", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15909,
|
||||
szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: function () { // 创建WebControl实例成功
|
||||
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
|
||||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||||
}).then(function () { // 启动插件服务成功
|
||||
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
|
||||
oWebControl.JS_CreateWnd("playWnd", 400, 265).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
}, function () { // 启动插件服务失败
|
||||
});
|
||||
},
|
||||
cbConnectError: function () { // 创建WebControl实例失败
|
||||
oWebControl = null;
|
||||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
initCount ++;
|
||||
if (initCount < 3) {
|
||||
setTimeout(function () {
|
||||
initPlugin();
|
||||
}, 3000)
|
||||
} else {
|
||||
window.parent.alertInstallVideoPlayer();
|
||||
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||||
}
|
||||
},
|
||||
cbConnectClose: function (bNormalClose) {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
oWebControl = null;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 设置窗口控制回调
|
||||
function setCallbacks() {
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
}
|
||||
|
||||
// 推送消息
|
||||
function cbIntegrationCallBack(oData) {
|
||||
// showCBInfo(JSON.stringify(oData.responseMsg));
|
||||
}
|
||||
|
||||
//初始化
|
||||
function init()
|
||||
{
|
||||
getPubKey(function () {
|
||||
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
// var appkey = "21274765"; //综合安防管理平台提供的appkey，必填
|
||||
// var ip = "223.99.16.253"; //综合安防管理平台IP地址，必填
|
||||
// var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
|
||||
var appkey = $("#carmerAppKey").text(); //综合安防管理平台提供的appkey，必填
|
||||
var ip = $("#carmerIp").text(); //综合安防管理平台IP地址，必填
|
||||
var port = Number($("#carmerPort").text());
|
||||
var appSecret = $("#appSecret").text();
|
||||
console.log(appkey,ip,port,appSecret)
|
||||
// var secret = setEncrypt("tGJdjmKxKxVWtzp1M6px"); //综合安防管理平台提供的secret，必填
|
||||
var secret = setEncrypt(appSecret); //综合安防管理平台提供的secret，必填
|
||||
|
||||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||||
var snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
var layout = "1x1"; //playMode指定模式的布局
|
||||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||||
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
|
||||
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs: buttonIDs //自定义工具条按钮
|
||||
})
|
||||
}).then(function (oData) {
|
||||
oWebControl.JS_Resize(400, 265); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
setWndCover();
|
||||
});
|
||||
// var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var cameraIndexCode = $("#carmerCard").text()
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//获取公钥
|
||||
function getPubKey (callback) {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
}).then(function (oData) {
|
||||
if (oData.responseMsg.data) {
|
||||
pubKey = oData.responseMsg.data;
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//RSA加密
|
||||
function setEncrypt (value) {
|
||||
var encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
}
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
$(window).resize(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(400, 265);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(400, 265);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
function setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
|
||||
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
|
||||
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
|
||||
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||||
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||||
|
||||
iCoverLeft = (iCoverLeft > 360) ? 360 : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > 230) ? 230 : iCoverTop;
|
||||
iCoverRight = (iCoverRight > 360) ? 360 : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > 230) ? 230 : iCoverBottom;
|
||||
|
||||
oWebControl.JS_RepairPartWindow(0, 0, 1001, 230); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 230);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(360 - iCoverRight, 0, iCoverRight, 230);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 230 - iCoverBottom, 360, iCoverBottom);
|
||||
}
|
||||
}
|
||||
|
||||
//视频预览功能
|
||||
$("#startPreview").click(function () {
|
||||
var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
//停止全部预览
|
||||
$("#stopAllPreview").click(function () {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "stopAllPreview"
|
||||
});
|
||||
});
|
||||
|
||||
// 标签关闭
|
||||
$(window).unload(function () {
|
||||
if (oWebControl != null){
|
||||
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
oWebControl.JS_Disconnect().then(function(){ // 断开与插件服务连接成功
|
||||
},
|
||||
function() { // 断开与插件服务连接失败
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>preview_demo</title>
|
||||
<link href="./common.css" rel="stylesheet">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.camera-dia{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0);
|
||||
position:relative;
|
||||
}
|
||||
.camera-box{
|
||||
width: 720px;
|
||||
height: 360px;
|
||||
border-radius: 5px;
|
||||
position: fixed;
|
||||
left:100%;
|
||||
top:100%;
|
||||
transform:translate(-50%,-50%);
|
||||
z-index: 9999;
|
||||
}
|
||||
.camera-header{
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
.camera-header img{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.camera-body{
|
||||
|
||||
width: 90%;
|
||||
height: 230px;
|
||||
/* border: 1px solid #fff; */
|
||||
margin-left: 5%;
|
||||
}
|
||||
.camera-footer{
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
color: #4371ec;
|
||||
text-align: left;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.camera-footer span{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.playWnd {
|
||||
width: 360px; /*播放容器的宽和高设定*/
|
||||
height: 230px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="camera-dia">
|
||||
<div class="camera-box">
|
||||
<div class="camera-header ">
|
||||
<span class="fz-16" id="carmerName"></span>
|
||||
<img src="../img/close.png" class="cursor" id="closeBtn" />
|
||||
</div>
|
||||
<div class="camera-body">
|
||||
<!--视频窗口展示-->
|
||||
<div id="playWnd" class="playWnd"></div>
|
||||
</div>
|
||||
<div class="camera-footer mt-1" style="display: none;">
|
||||
设备编号：<span id="carmerCard"></span>
|
||||
</div>
|
||||
<div style="display: none;" id="carmerAppKey"></div>
|
||||
<div style="display: none;" id="carmerIp"></div>
|
||||
<div style="display: none;" id="carmerPort"></div>
|
||||
<div style="display: none;" id="appSecret"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<!--三个必要的js文件引入-->
|
||||
<script src="jquery-1.12.4.min.js"></script>
|
||||
<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
|
||||
<script src="jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
window.onload = () => {
|
||||
// 子页面接收消息
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.data) {
|
||||
console.log("play-data",e.data);
|
||||
$("#carmerName").text(e.data[0])
|
||||
$("#carmerCard").text(e.data[1])
|
||||
$("#carmerAppKey").text(e.data[2])
|
||||
$("#carmerIp").text(e.data[3])
|
||||
$("#carmerPort").text(e.data[4])
|
||||
$("#appSecret").text(e.data[5])
|
||||
}
|
||||
}, false)
|
||||
|
||||
initPlugin();
|
||||
}
|
||||
$("#closeBtn").click(function(){
|
||||
window.parent.postMessage(
|
||||
{
|
||||
cmd: 'close'
|
||||
}
|
||||
)
|
||||
})
|
||||
//页面加载时创建播放实例初始化
|
||||
$(window).load(function () {
|
||||
// initPlugin();
|
||||
});
|
||||
|
||||
//声明公用变量
|
||||
var initCount = 0;
|
||||
var pubKey = '';
|
||||
|
||||
// 创建播放实例
|
||||
function initPlugin () {
|
||||
oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnd", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15909,
|
||||
szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: function () { // 创建WebControl实例成功
|
||||
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
|
||||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||||
}).then(function () { // 启动插件服务成功
|
||||
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
|
||||
oWebControl.JS_CreateWnd("playWnd", 400, 265).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
}, function () { // 启动插件服务失败
|
||||
});
|
||||
},
|
||||
cbConnectError: function () { // 创建WebControl实例失败
|
||||
oWebControl = null;
|
||||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
initCount ++;
|
||||
if (initCount < 3) {
|
||||
setTimeout(function () {
|
||||
initPlugin();
|
||||
}, 3000)
|
||||
} else {
|
||||
window.parent.alertInstallVideoPlayer();
|
||||
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||||
}
|
||||
},
|
||||
cbConnectClose: function (bNormalClose) {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
oWebControl = null;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 设置窗口控制回调
|
||||
function setCallbacks() {
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
}
|
||||
|
||||
// 推送消息
|
||||
function cbIntegrationCallBack(oData) {
|
||||
// showCBInfo(JSON.stringify(oData.responseMsg));
|
||||
}
|
||||
|
||||
//初始化
|
||||
function init()
|
||||
{
|
||||
getPubKey(function () {
|
||||
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
// var appkey = "21274765"; //综合安防管理平台提供的appkey，必填
|
||||
// var ip = "223.99.16.253"; //综合安防管理平台IP地址，必填
|
||||
// var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
|
||||
var appkey = $("#carmerAppKey").text(); //综合安防管理平台提供的appkey，必填
|
||||
var ip = $("#carmerIp").text(); //综合安防管理平台IP地址，必填
|
||||
var port = Number($("#carmerPort").text());
|
||||
var appSecret = $("#appSecret").text();
|
||||
console.log(appkey,ip,port,appSecret)
|
||||
// var secret = setEncrypt("tGJdjmKxKxVWtzp1M6px"); //综合安防管理平台提供的secret，必填
|
||||
var secret = setEncrypt(appSecret); //综合安防管理平台提供的secret，必填
|
||||
|
||||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||||
var snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
var layout = "1x1"; //playMode指定模式的布局
|
||||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||||
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
|
||||
var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
|
||||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs: buttonIDs //自定义工具条按钮
|
||||
})
|
||||
}).then(function (oData) {
|
||||
oWebControl.JS_Resize(400, 265); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
setWndCover();
|
||||
});
|
||||
// var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var cameraIndexCode = $("#carmerCard").text()
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//获取公钥
|
||||
function getPubKey (callback) {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
}).then(function (oData) {
|
||||
if (oData.responseMsg.data) {
|
||||
pubKey = oData.responseMsg.data;
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//RSA加密
|
||||
function setEncrypt (value) {
|
||||
var encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
}
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
$(window).resize(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(400, 265);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(400, 265);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
function setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
|
||||
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
|
||||
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
|
||||
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||||
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||||
|
||||
iCoverLeft = (iCoverLeft > 360) ? 360 : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > 230) ? 230 : iCoverTop;
|
||||
iCoverRight = (iCoverRight > 360) ? 360 : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > 230) ? 230 : iCoverBottom;
|
||||
|
||||
oWebControl.JS_RepairPartWindow(0, 0, 1001, 230); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 230);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(360 - iCoverRight, 0, iCoverRight, 230);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 230 - iCoverBottom, 360, iCoverBottom);
|
||||
}
|
||||
}
|
||||
|
||||
//视频预览功能
|
||||
$("#startPreview").click(function () {
|
||||
var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
//停止全部预览
|
||||
$("#stopAllPreview").click(function () {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "stopAllPreview"
|
||||
});
|
||||
});
|
||||
|
||||
// 标签关闭
|
||||
$(window).unload(function () {
|
||||
if (oWebControl != null){
|
||||
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
oWebControl.JS_Disconnect().then(function(){ // 断开与插件服务连接成功
|
||||
},
|
||||
function() { // 断开与插件服务连接失败
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,318 +1,318 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>preview_demo</title>
|
||||
<link href="../../common.css" rel="stylesheet">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.camera-dia{
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
}
|
||||
.camera-box{
|
||||
width: 180px;
|
||||
height: 115px;
|
||||
background: rgba(19,21,35,.9);
|
||||
box-shadow: 0 0 0.0625rem 0.3125rem hsl(0deg 0% 100% / 10%);
|
||||
border: 1px solid #386df5;
|
||||
border-radius: 5px;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 130px;
|
||||
z-index: 999;
|
||||
padding: 10px;
|
||||
}
|
||||
.camera-body{
|
||||
width: 100%;
|
||||
height: 115px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.playWnd {
|
||||
width: 180px; /*播放容器的宽和高设定*/
|
||||
height: 115px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="camera-dia">
|
||||
<div class="camera-box fc-w fz-14">
|
||||
<div class="camera-body pos-r">
|
||||
<!--视频窗口展示-->
|
||||
<div id="playWnd" class="playWnd"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="carmerCard" style="display: none;"></div>
|
||||
</body>
|
||||
|
||||
<!--三个必要的js文件引入-->
|
||||
<script src="jquery-1.12.4.min.js"></script>
|
||||
<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
|
||||
<script src="jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
window.onload = () => {
|
||||
// 子页面接收消息
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.data) {
|
||||
$("#carmerCard").text(e.data[0])
|
||||
}
|
||||
}, false)
|
||||
}
|
||||
$("#closeBtn").click(function(){
|
||||
window.parent.postMessage(
|
||||
{
|
||||
cmd: 'close'
|
||||
}
|
||||
)
|
||||
})
|
||||
//页面加载时创建播放实例初始化
|
||||
$(window).load(function () {
|
||||
initPlugin();
|
||||
});
|
||||
|
||||
//声明公用变量
|
||||
var initCount = 0;
|
||||
var pubKey = '';
|
||||
|
||||
// 创建播放实例
|
||||
function initPlugin () {
|
||||
oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnd", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15909,
|
||||
szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: function () { // 创建WebControl实例成功
|
||||
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
|
||||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||||
}).then(function () { // 启动插件服务成功
|
||||
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
|
||||
oWebControl.JS_CreateWnd("playWnd", 180, 115).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
}, function () { // 启动插件服务失败
|
||||
});
|
||||
},
|
||||
cbConnectError: function () { // 创建WebControl实例失败
|
||||
oWebControl = null;
|
||||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
initCount ++;
|
||||
if (initCount < 3) {
|
||||
setTimeout(function () {
|
||||
initPlugin();
|
||||
}, 3000)
|
||||
} else {
|
||||
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||||
}
|
||||
},
|
||||
cbConnectClose: function (bNormalClose) {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
oWebControl = null;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 设置窗口控制回调
|
||||
function setCallbacks() {
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
}
|
||||
|
||||
// 推送消息
|
||||
function cbIntegrationCallBack(oData) {
|
||||
// showCBInfo(JSON.stringify(oData.responseMsg));
|
||||
}
|
||||
|
||||
//初始化
|
||||
function init()
|
||||
{
|
||||
getPubKey(function () {
|
||||
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
var appkey = "21274765"; //综合安防管理平台提供的appkey，必填
|
||||
var secret = setEncrypt("CraRtGvpNB2xOcYSFTov"); //综合安防管理平台提供的secret，必填
|
||||
var ip = "223.99.16.253"; //综合安防管理平台IP地址，必填
|
||||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||||
var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
var snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
var layout = "1x1"; //playMode指定模式的布局
|
||||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||||
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
|
||||
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs: buttonIDs //自定义工具条按钮
|
||||
})
|
||||
}).then(function (oData) {
|
||||
oWebControl.JS_Resize(180, 115); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
setWndCover();
|
||||
});
|
||||
// var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var cameraIndexCode = $("#carmerCard").text()
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//获取公钥
|
||||
function getPubKey (callback) {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
}).then(function (oData) {
|
||||
if (oData.responseMsg.data) {
|
||||
pubKey = oData.responseMsg.data;
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//RSA加密
|
||||
function setEncrypt (value) {
|
||||
var encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
}
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
$(window).resize(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
function setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
|
||||
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
|
||||
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
|
||||
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||||
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||||
|
||||
iCoverLeft = (iCoverLeft > 180) ? 180 : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > 115) ? 115 : iCoverTop;
|
||||
iCoverRight = (iCoverRight > 180) ? 180 : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > 115) ? 115 : iCoverBottom;
|
||||
|
||||
oWebControl.JS_RepairPartWindow(0, 0, 1001, 115); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 115);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(180 - iCoverRight, 0, iCoverRight, 115);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 115 - iCoverBottom, 180, iCoverBottom);
|
||||
}
|
||||
}
|
||||
|
||||
//视频预览功能
|
||||
$("#startPreview").click(function () {
|
||||
var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
//停止全部预览
|
||||
$("#stopAllPreview").click(function () {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "stopAllPreview"
|
||||
});
|
||||
});
|
||||
|
||||
// 标签关闭
|
||||
$(window).unload(function () {
|
||||
if (oWebControl != null){
|
||||
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
oWebControl.JS_Disconnect().then(function(){ // 断开与插件服务连接成功
|
||||
},
|
||||
function() { // 断开与插件服务连接失败
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>preview_demo</title>
|
||||
<link href="../../common.css" rel="stylesheet">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.camera-dia{
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
}
|
||||
.camera-box{
|
||||
width: 180px;
|
||||
height: 115px;
|
||||
background: rgba(19,21,35,.9);
|
||||
box-shadow: 0 0 0.0625rem 0.3125rem hsl(0deg 0% 100% / 10%);
|
||||
border: 1px solid #386df5;
|
||||
border-radius: 5px;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 130px;
|
||||
z-index: 999;
|
||||
padding: 10px;
|
||||
}
|
||||
.camera-body{
|
||||
width: 100%;
|
||||
height: 115px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.playWnd {
|
||||
width: 180px; /*播放容器的宽和高设定*/
|
||||
height: 115px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="camera-dia">
|
||||
<div class="camera-box fc-w fz-14">
|
||||
<div class="camera-body pos-r">
|
||||
<!--视频窗口展示-->
|
||||
<div id="playWnd" class="playWnd"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="carmerCard" style="display: none;"></div>
|
||||
</body>
|
||||
|
||||
<!--三个必要的js文件引入-->
|
||||
<script src="jquery-1.12.4.min.js"></script>
|
||||
<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
|
||||
<script src="jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
window.onload = () => {
|
||||
// 子页面接收消息
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.data) {
|
||||
$("#carmerCard").text(e.data[0])
|
||||
}
|
||||
}, false)
|
||||
}
|
||||
$("#closeBtn").click(function(){
|
||||
window.parent.postMessage(
|
||||
{
|
||||
cmd: 'close'
|
||||
}
|
||||
)
|
||||
})
|
||||
//页面加载时创建播放实例初始化
|
||||
$(window).load(function () {
|
||||
initPlugin();
|
||||
});
|
||||
|
||||
//声明公用变量
|
||||
var initCount = 0;
|
||||
var pubKey = '';
|
||||
|
||||
// 创建播放实例
|
||||
function initPlugin () {
|
||||
oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnd", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15909,
|
||||
szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: function () { // 创建WebControl实例成功
|
||||
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
|
||||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||||
}).then(function () { // 启动插件服务成功
|
||||
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
|
||||
oWebControl.JS_CreateWnd("playWnd", 180, 115).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
}, function () { // 启动插件服务失败
|
||||
});
|
||||
},
|
||||
cbConnectError: function () { // 创建WebControl实例失败
|
||||
oWebControl = null;
|
||||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
initCount ++;
|
||||
if (initCount < 3) {
|
||||
setTimeout(function () {
|
||||
initPlugin();
|
||||
}, 3000)
|
||||
} else {
|
||||
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||||
}
|
||||
},
|
||||
cbConnectClose: function (bNormalClose) {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
oWebControl = null;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 设置窗口控制回调
|
||||
function setCallbacks() {
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
}
|
||||
|
||||
// 推送消息
|
||||
function cbIntegrationCallBack(oData) {
|
||||
// showCBInfo(JSON.stringify(oData.responseMsg));
|
||||
}
|
||||
|
||||
//初始化
|
||||
function init()
|
||||
{
|
||||
getPubKey(function () {
|
||||
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
var appkey = "21274765"; //综合安防管理平台提供的appkey，必填
|
||||
var secret = setEncrypt("CraRtGvpNB2xOcYSFTov"); //综合安防管理平台提供的secret，必填
|
||||
var ip = "223.99.16.253"; //综合安防管理平台IP地址，必填
|
||||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||||
var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
var snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
var layout = "1x1"; //playMode指定模式的布局
|
||||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||||
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
|
||||
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs: buttonIDs //自定义工具条按钮
|
||||
})
|
||||
}).then(function (oData) {
|
||||
oWebControl.JS_Resize(180, 115); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
setWndCover();
|
||||
});
|
||||
// var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var cameraIndexCode = $("#carmerCard").text()
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//获取公钥
|
||||
function getPubKey (callback) {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
}).then(function (oData) {
|
||||
if (oData.responseMsg.data) {
|
||||
pubKey = oData.responseMsg.data;
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//RSA加密
|
||||
function setEncrypt (value) {
|
||||
var encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
}
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
$(window).resize(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
function setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
|
||||
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
|
||||
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
|
||||
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||||
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||||
|
||||
iCoverLeft = (iCoverLeft > 180) ? 180 : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > 115) ? 115 : iCoverTop;
|
||||
iCoverRight = (iCoverRight > 180) ? 180 : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > 115) ? 115 : iCoverBottom;
|
||||
|
||||
oWebControl.JS_RepairPartWindow(0, 0, 1001, 115); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 115);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(180 - iCoverRight, 0, iCoverRight, 115);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 115 - iCoverBottom, 180, iCoverBottom);
|
||||
}
|
||||
}
|
||||
|
||||
//视频预览功能
|
||||
$("#startPreview").click(function () {
|
||||
var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
//停止全部预览
|
||||
$("#stopAllPreview").click(function () {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "stopAllPreview"
|
||||
});
|
||||
});
|
||||
|
||||
// 标签关闭
|
||||
$(window).unload(function () {
|
||||
if (oWebControl != null){
|
||||
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
oWebControl.JS_Disconnect().then(function(){ // 断开与插件服务连接成功
|
||||
},
|
||||
function() { // 断开与插件服务连接失败
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -1,318 +1,318 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>preview_demo</title>
|
||||
<link href="../../common.css" rel="stylesheet">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.camera-dia{
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
}
|
||||
.camera-box{
|
||||
width: 180px;
|
||||
height: 115px;
|
||||
background: rgba(19,21,35,.9);
|
||||
box-shadow: 0 0 0.0625rem 0.3125rem hsl(0deg 0% 100% / 10%);
|
||||
border: 1px solid #386df5;
|
||||
border-radius: 5px;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 10px;
|
||||
z-index: 999;
|
||||
padding: 10px;
|
||||
}
|
||||
.camera-body{
|
||||
width: 100%;
|
||||
height: 115px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.playWnd {
|
||||
width: 180px; /*播放容器的宽和高设定*/
|
||||
height: 115px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="camera-dia">
|
||||
<div class="camera-box fc-w fz-14">
|
||||
<div class="camera-body pos-r">
|
||||
<!--视频窗口展示-->
|
||||
<div id="playWnd" class="playWnd"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="carmerCard" style="display: none;"></div>
|
||||
</body>
|
||||
|
||||
<!--三个必要的js文件引入-->
|
||||
<script src="jquery-1.12.4.min.js"></script>
|
||||
<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
|
||||
<script src="jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
window.onload = () => {
|
||||
// 子页面接收消息
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.data) {
|
||||
$("#carmerCard").text(e.data[0])
|
||||
}
|
||||
}, false)
|
||||
}
|
||||
$("#closeBtn").click(function(){
|
||||
window.parent.postMessage(
|
||||
{
|
||||
cmd: 'close'
|
||||
}
|
||||
)
|
||||
})
|
||||
//页面加载时创建播放实例初始化
|
||||
$(window).load(function () {
|
||||
initPlugin();
|
||||
});
|
||||
|
||||
//声明公用变量
|
||||
var initCount = 0;
|
||||
var pubKey = '';
|
||||
|
||||
// 创建播放实例
|
||||
function initPlugin () {
|
||||
oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnd", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15909,
|
||||
szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: function () { // 创建WebControl实例成功
|
||||
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
|
||||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||||
}).then(function () { // 启动插件服务成功
|
||||
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
|
||||
oWebControl.JS_CreateWnd("playWnd", 180, 115).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
}, function () { // 启动插件服务失败
|
||||
});
|
||||
},
|
||||
cbConnectError: function () { // 创建WebControl实例失败
|
||||
oWebControl = null;
|
||||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
initCount ++;
|
||||
if (initCount < 3) {
|
||||
setTimeout(function () {
|
||||
initPlugin();
|
||||
}, 3000)
|
||||
} else {
|
||||
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||||
}
|
||||
},
|
||||
cbConnectClose: function (bNormalClose) {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
oWebControl = null;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 设置窗口控制回调
|
||||
function setCallbacks() {
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
}
|
||||
|
||||
// 推送消息
|
||||
function cbIntegrationCallBack(oData) {
|
||||
// showCBInfo(JSON.stringify(oData.responseMsg));
|
||||
}
|
||||
|
||||
//初始化
|
||||
function init()
|
||||
{
|
||||
getPubKey(function () {
|
||||
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
var appkey = "21274765"; //综合安防管理平台提供的appkey，必填
|
||||
var secret = setEncrypt("CraRtGvpNB2xOcYSFTov"); //综合安防管理平台提供的secret，必填
|
||||
var ip = "223.99.16.253"; //综合安防管理平台IP地址，必填
|
||||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||||
var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
var snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
var layout = "1x1"; //playMode指定模式的布局
|
||||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||||
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
|
||||
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs: buttonIDs //自定义工具条按钮
|
||||
})
|
||||
}).then(function (oData) {
|
||||
oWebControl.JS_Resize(180, 115); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
setWndCover();
|
||||
});
|
||||
// var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var cameraIndexCode = $("#carmerCard").text()
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//获取公钥
|
||||
function getPubKey (callback) {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
}).then(function (oData) {
|
||||
if (oData.responseMsg.data) {
|
||||
pubKey = oData.responseMsg.data;
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//RSA加密
|
||||
function setEncrypt (value) {
|
||||
var encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
}
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
$(window).resize(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
function setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
|
||||
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
|
||||
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
|
||||
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||||
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||||
|
||||
iCoverLeft = (iCoverLeft > 180) ? 180 : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > 115) ? 115 : iCoverTop;
|
||||
iCoverRight = (iCoverRight > 180) ? 180 : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > 115) ? 115 : iCoverBottom;
|
||||
|
||||
oWebControl.JS_RepairPartWindow(0, 0, 1001, 115); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 115);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(180 - iCoverRight, 0, iCoverRight, 115);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 115 - iCoverBottom, 180, iCoverBottom);
|
||||
}
|
||||
}
|
||||
|
||||
//视频预览功能
|
||||
$("#startPreview").click(function () {
|
||||
var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
//停止全部预览
|
||||
$("#stopAllPreview").click(function () {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "stopAllPreview"
|
||||
});
|
||||
});
|
||||
|
||||
// 标签关闭
|
||||
$(window).unload(function () {
|
||||
if (oWebControl != null){
|
||||
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
oWebControl.JS_Disconnect().then(function(){ // 断开与插件服务连接成功
|
||||
},
|
||||
function() { // 断开与插件服务连接失败
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>preview_demo</title>
|
||||
<link href="../../common.css" rel="stylesheet">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.camera-dia{
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
}
|
||||
.camera-box{
|
||||
width: 180px;
|
||||
height: 115px;
|
||||
background: rgba(19,21,35,.9);
|
||||
box-shadow: 0 0 0.0625rem 0.3125rem hsl(0deg 0% 100% / 10%);
|
||||
border: 1px solid #386df5;
|
||||
border-radius: 5px;
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
bottom: 10px;
|
||||
z-index: 999;
|
||||
padding: 10px;
|
||||
}
|
||||
.camera-body{
|
||||
width: 100%;
|
||||
height: 115px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.playWnd {
|
||||
width: 180px; /*播放容器的宽和高设定*/
|
||||
height: 115px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div class="camera-dia">
|
||||
<div class="camera-box fc-w fz-14">
|
||||
<div class="camera-body pos-r">
|
||||
<!--视频窗口展示-->
|
||||
<div id="playWnd" class="playWnd"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="carmerCard" style="display: none;"></div>
|
||||
</body>
|
||||
|
||||
<!--三个必要的js文件引入-->
|
||||
<script src="jquery-1.12.4.min.js"></script>
|
||||
<script src="jsencrypt.min.js"></script> <!-- 用于RSA加密 -->
|
||||
<script src="jsWebControl-1.0.0.min.js"></script> <!-- 用于前端与插件交互 -->
|
||||
|
||||
<script type="text/javascript">
|
||||
window.onload = () => {
|
||||
// 子页面接收消息
|
||||
window.addEventListener('message', function (e) {
|
||||
if (e.data) {
|
||||
$("#carmerCard").text(e.data[0])
|
||||
}
|
||||
}, false)
|
||||
}
|
||||
$("#closeBtn").click(function(){
|
||||
window.parent.postMessage(
|
||||
{
|
||||
cmd: 'close'
|
||||
}
|
||||
)
|
||||
})
|
||||
//页面加载时创建播放实例初始化
|
||||
$(window).load(function () {
|
||||
initPlugin();
|
||||
});
|
||||
|
||||
//声明公用变量
|
||||
var initCount = 0;
|
||||
var pubKey = '';
|
||||
|
||||
// 创建播放实例
|
||||
function initPlugin () {
|
||||
oWebControl = new WebControl({
|
||||
szPluginContainer: "playWnd", // 指定容器id
|
||||
iServicePortStart: 15900, // 指定起止端口号，建议使用该值
|
||||
iServicePortEnd: 15909,
|
||||
szClassId:"23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
|
||||
cbConnectSuccess: function () { // 创建WebControl实例成功
|
||||
oWebControl.JS_StartService("window", { // WebControl实例创建成功后需要启动服务
|
||||
dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
|
||||
}).then(function () { // 启动插件服务成功
|
||||
oWebControl.JS_SetWindowControlCallback({ // 设置消息回调
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
|
||||
oWebControl.JS_CreateWnd("playWnd", 180, 115).then(function () { //JS_CreateWnd创建视频播放窗口，宽高可设定
|
||||
init(); // 创建播放实例成功后初始化
|
||||
});
|
||||
}, function () { // 启动插件服务失败
|
||||
});
|
||||
},
|
||||
cbConnectError: function () { // 创建WebControl实例失败
|
||||
oWebControl = null;
|
||||
$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
|
||||
WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
|
||||
initCount ++;
|
||||
if (initCount < 3) {
|
||||
setTimeout(function () {
|
||||
initPlugin();
|
||||
}, 3000)
|
||||
} else {
|
||||
$("#playWnd").html("插件启动失败，请检查插件是否安装！");
|
||||
}
|
||||
},
|
||||
cbConnectClose: function (bNormalClose) {
|
||||
// 异常断开：bNormalClose = false
|
||||
// JS_Disconnect正常断开：bNormalClose = true
|
||||
oWebControl = null;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 设置窗口控制回调
|
||||
function setCallbacks() {
|
||||
oWebControl.JS_SetWindowControlCallback({
|
||||
cbIntegrationCallBack: cbIntegrationCallBack
|
||||
});
|
||||
}
|
||||
|
||||
// 推送消息
|
||||
function cbIntegrationCallBack(oData) {
|
||||
// showCBInfo(JSON.stringify(oData.responseMsg));
|
||||
}
|
||||
|
||||
//初始化
|
||||
function init()
|
||||
{
|
||||
getPubKey(function () {
|
||||
|
||||
////////////////////////////////// 请自行修改以下变量值 ////////////////////////////////////
|
||||
var appkey = "21274765"; //综合安防管理平台提供的appkey，必填
|
||||
var secret = setEncrypt("CraRtGvpNB2xOcYSFTov"); //综合安防管理平台提供的secret，必填
|
||||
var ip = "223.99.16.253"; //综合安防管理平台IP地址，必填
|
||||
var playMode = 0; //初始播放模式：0-预览，1-回放
|
||||
var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
|
||||
var snapDir = "D:\\SnapDir"; //抓图存储路径
|
||||
var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
|
||||
var layout = "1x1"; //playMode指定模式的布局
|
||||
var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
|
||||
var encryptedFields = 'secret'; //加密字段，默认加密领域为secret
|
||||
var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
|
||||
var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
|
||||
var buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
|
||||
////////////////////////////////// 请自行修改以上变量值 ////////////////////////////////////
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "init",
|
||||
argument: JSON.stringify({
|
||||
appkey: appkey, //API网关提供的appkey
|
||||
secret: secret, //API网关提供的secret
|
||||
ip: ip, //API网关IP地址
|
||||
playMode: playMode, //播放模式（决定显示预览还是回放界面）
|
||||
port: port, //端口
|
||||
snapDir: snapDir, //抓图存储路径
|
||||
videoDir: videoDir, //紧急录像或录像剪辑存储路径
|
||||
layout: layout, //布局
|
||||
enableHTTPS: enableHTTPS, //是否启用HTTPS协议
|
||||
encryptedFields: encryptedFields, //加密字段
|
||||
showToolbar: showToolbar, //是否显示工具栏
|
||||
showSmart: showSmart, //是否显示智能信息
|
||||
buttonIDs: buttonIDs //自定义工具条按钮
|
||||
})
|
||||
}).then(function (oData) {
|
||||
oWebControl.JS_Resize(180, 115); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
|
||||
setWndCover();
|
||||
});
|
||||
// var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var cameraIndexCode = $("#carmerCard").text()
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
//获取公钥
|
||||
function getPubKey (callback) {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "getRSAPubKey",
|
||||
argument: JSON.stringify({
|
||||
keyLength: 1024
|
||||
})
|
||||
}).then(function (oData) {
|
||||
if (oData.responseMsg.data) {
|
||||
pubKey = oData.responseMsg.data;
|
||||
callback()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//RSA加密
|
||||
function setEncrypt (value) {
|
||||
var encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(pubKey);
|
||||
return encrypt.encrypt(value);
|
||||
}
|
||||
|
||||
// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
|
||||
$(window).resize(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
// 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
|
||||
$(window).scroll(function () {
|
||||
if (oWebControl != null) {
|
||||
oWebControl.JS_Resize(180, 115);
|
||||
setWndCover();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
|
||||
function setWndCover() {
|
||||
var iWidth = $(window).width();
|
||||
var iHeight = $(window).height();
|
||||
var oDivRect = $("#playWnd").get(0).getBoundingClientRect();
|
||||
|
||||
var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
|
||||
var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
|
||||
var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
|
||||
var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
|
||||
|
||||
iCoverLeft = (iCoverLeft > 180) ? 180 : iCoverLeft;
|
||||
iCoverTop = (iCoverTop > 115) ? 115 : iCoverTop;
|
||||
iCoverRight = (iCoverRight > 180) ? 180 : iCoverRight;
|
||||
iCoverBottom = (iCoverBottom > 115) ? 115 : iCoverBottom;
|
||||
|
||||
oWebControl.JS_RepairPartWindow(0, 0, 1001, 115); // 多1个像素点防止还原后边界缺失一个像素条
|
||||
if (iCoverLeft != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 115);
|
||||
}
|
||||
if (iCoverTop != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 0, 1001, iCoverTop); // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
|
||||
}
|
||||
if (iCoverRight != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(180 - iCoverRight, 0, iCoverRight, 115);
|
||||
}
|
||||
if (iCoverBottom != 0) {
|
||||
oWebControl.JS_CuttingPartWindow(0, 115 - iCoverBottom, 180, iCoverBottom);
|
||||
}
|
||||
}
|
||||
|
||||
//视频预览功能
|
||||
$("#startPreview").click(function () {
|
||||
var cameraIndexCode = 'bbe9c64699174953828ce4fa8bb41b8f'; //获取输入的监控点编号值，必填
|
||||
var streamMode = 0; //主子码流标识：0-主码流，1-子码流
|
||||
var transMode = 1; //传输协议：0-UDP，1-TCP
|
||||
var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
|
||||
var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
|
||||
|
||||
cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
|
||||
cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
|
||||
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "startPreview",
|
||||
argument: JSON.stringify({
|
||||
cameraIndexCode:cameraIndexCode, //监控点编号
|
||||
streamMode: streamMode, //主子码流标识
|
||||
transMode: transMode, //传输协议
|
||||
gpuMode: gpuMode, //是否开启GPU硬解
|
||||
wndId:wndId //可指定播放窗口
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
//停止全部预览
|
||||
$("#stopAllPreview").click(function () {
|
||||
oWebControl.JS_RequestInterface({
|
||||
funcName: "stopAllPreview"
|
||||
});
|
||||
});
|
||||
|
||||
// 标签关闭
|
||||
$(window).unload(function () {
|
||||
if (oWebControl != null){
|
||||
oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
|
||||
oWebControl.JS_Disconnect().then(function(){ // 断开与插件服务连接成功
|
||||
},
|
||||
function() { // 断开与插件服务连接失败
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -16,11 +16,13 @@
|
|||
<link rel="icon" href="./favicon.ico">
|
||||
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css'
|
||||
type='text/css' />
|
||||
<link href="/mapboxgl/mapbox-gl.css" rel="stylesheet">
|
||||
<script src="/mapboxgl/mapbox-gl.js"></script>
|
||||
<script type="text/javascript" src="./lib/Cesium/Cesium.js"></script>
|
||||
<script type="text/javascript" src="./lib/mars3d/mars3d.js"></script>
|
||||
<link rel='stylesheet' type='text/css' href="./lib/mars3d/mars3d.css" />
|
||||
<link rel='stylesheet' type='text/css' href="./lib/Cesium/Widgets/widgets.css" />
|
||||
<title>平邑县森林防灭火数据管理系统</title>
|
||||
<title>费县森林防灭火数据管理系统</title>
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/shp.min.js"></script>
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,10 +1,10 @@
|
|||
const CONFIG = {
|
||||
// TITLE: (localStorage.getItem("areaCNName") || '平邑县') + "森林防灭火数据管理系统",
|
||||
TITLE:"平邑县森林防灭火数据管理系统",
|
||||
TITLE:"费县森林防灭火数据管理系统",
|
||||
LOGO_URL: "/images/img25.png",
|
||||
BASE_API: "127.0.0.1",
|
||||
MAPBOX_OPTIONS: {
|
||||
ACCESS_TOKEN: "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ",
|
||||
ACCESS_TOKEN: "pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg",
|
||||
CENTER: [118.11036, 35.17734]
|
||||
},
|
||||
TDT: {
|
||||
|
|
|
|||
|
|
@ -87,8 +87,6 @@ export const checkServerName = (name) => {
|
|||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 表名效验
|
||||
export const checkTableName = (name) => {
|
||||
return request({
|
||||
|
|
@ -96,7 +94,6 @@ export const checkTableName = (name) => {
|
|||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 文件上传
|
||||
export const uploadFile = (formData) => {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -24,6 +24,14 @@ export const login = (username, password) => {
|
|||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const checkAuth = () => {
|
||||
return request({
|
||||
url: '/api/Check/GetRoles',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// export const loginout = () => {
|
||||
// return request({
|
||||
// url: '/auth/logout',
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import QS from 'qs'
|
|||
|
||||
export const getMonitorList = (data) => {
|
||||
return request({
|
||||
url: '/api/CameraEvent/LoadAllRtu',
|
||||
url: '/api/CameraEvent/LoadAllRtuByLayer',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
export const globalApi = {
|
||||
// 本地测试
|
||||
// BASE_URL: "http://192.168.10.116:8909", //测试 卢国栋
|
||||
// GEOSERVER_URL: "http://192.168.10.116:8909",
|
||||
// netBASE_URL: "https://py.hopetrytech.com:7001", //测试.net
|
||||
// BASE_URL: "http://192.168.10.109:8909", //测试 卢国栋
|
||||
// GEOSERVER_URL: "http://192.168.10.109:8180",
|
||||
// netBASE_URL: "http://221.2.83.254:9001", //.net
|
||||
|
||||
// 测试服务器
|
||||
// BASE_URL: "http://123.132.248.154:9217", //测试 服务器
|
||||
|
|
@ -11,16 +11,19 @@ export const globalApi = {
|
|||
|
||||
|
||||
// 1240 测试服务器
|
||||
BASE_URL: "http://123.132.248.154:9236", //测试 服务器
|
||||
GEOSERVER_URL:"http://123.132.248.154:9235",
|
||||
netBASE_URL: "http://123.132.248.154:9231", //测试.net
|
||||
// BASE_URL: "http://123.132.248.154:9236", //测试 服务器
|
||||
// GEOSERVER_URL:"http://123.132.248.154:9235",
|
||||
// netBASE_URL: "http://123.132.248.154:9231", //测试.net
|
||||
|
||||
|
||||
//正式环境
|
||||
// BASE_URL: "http://223.99.16.253:9006", // java
|
||||
// GEOSERVER_URL:"http://223.99.16.253:9007", // geoserver
|
||||
// netBASE_URL: "http://223.99.16.253:9001", //.net
|
||||
//费县正式环境
|
||||
BASE_URL: "http://221.2.83.254:9006", // java
|
||||
// BASE_URL : "http://192.168.10.106:8909",
|
||||
GEOSERVER_URL:"http://221.2.83.254:9007", // geoserver
|
||||
netBASE_URL: "http://221.2.83.254:9001", //.net
|
||||
// netBASE_URL: "http://192.168.10.124:81", //.net
|
||||
|
||||
// 平邑县正式环境
|
||||
// BASE_URL: "https://fx.hopetrytech.com:7006/", // java
|
||||
// GEOSERVER_URL:"https://fx.hopetrytech.com:7005", // geoserver
|
||||
// netBASE_URL: "https://py.hopetrytech.com:7001", //.net
|
||||
|
|
|
|||
|
|
@ -35,13 +35,13 @@ export const constantRoutes = [
|
|||
show: false, //在导航栏是否显示
|
||||
component: () => import('@/views/data_draw/index'),
|
||||
meta: { name: "数据采集", iconfont: "/images/img6.png" },
|
||||
},{
|
||||
}, {
|
||||
path: "/excel_data_upload",
|
||||
name: "excel_data_upload",
|
||||
show: false, //在导航栏是否显示
|
||||
component: () => import('@/views/data_draw/excel_data_upload'),
|
||||
meta: { name: "Excel", iconfont: "/images/img6.png" },
|
||||
},{
|
||||
}, {
|
||||
path: "/shp_data_upload",
|
||||
name: "shp_data_upload",
|
||||
show: false, //在导航栏是否显示
|
||||
|
|
@ -54,19 +54,19 @@ export const constantRoutes = [
|
|||
show: false,//在导航栏是否显示
|
||||
component: () => import('@/views/big_scene/BigScene'),
|
||||
meta: { name: "监控中心", iconfont: "/images/img7.png" },
|
||||
},{
|
||||
}, {
|
||||
path: "/monitor",
|
||||
name: "monitor",
|
||||
show: false,//在导航栏是否显示
|
||||
component: () => import('@/views/monitor/index'),
|
||||
meta: { name: "监控中心", iconfont: "/images/img7.png" },
|
||||
},{
|
||||
}, {
|
||||
path: "/upload_type_selected",
|
||||
name: "upload_type_selected",
|
||||
show: true, //在导航栏是否显示
|
||||
component: () => import('@/views/data_manage/upload_type_selected'),
|
||||
meta: { name: "数据上传", iconfont: "/images/img6.png" },
|
||||
},{
|
||||
}, {
|
||||
path: "/layer_style_config",
|
||||
name: "layer_style_config",
|
||||
show: false, //在导航栏是否显示
|
||||
|
|
@ -76,7 +76,7 @@ export const constantRoutes = [
|
|||
{
|
||||
path: "/grid",
|
||||
name: "Grid",
|
||||
show: true,//在导航栏是否显示
|
||||
show: false,//在导航栏是否显示
|
||||
component: () => import('@/views/grid'),
|
||||
meta: { name: "网格员管理", iconfont: "/images/img9.png" },
|
||||
},
|
||||
|
|
@ -156,19 +156,30 @@ export function resetRouter() {
|
|||
}
|
||||
|
||||
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
|
||||
|
||||
// router.beforeEach((to, from, next) => {
|
||||
// // console.log(to);
|
||||
// if (to.path == '/') {
|
||||
// next();
|
||||
// } else {
|
||||
// let token = localStorage.getItem('X-Token');
|
||||
// // console.log(!token);
|
||||
// if (!token) {
|
||||
// next('/');
|
||||
// } else {
|
||||
// next();
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
router.beforeEach((to, from, next) => {
|
||||
// console.log(to);
|
||||
if (to.path == '/') {
|
||||
next();
|
||||
let token = localStorage.getItem('X-Token');
|
||||
let hrefIdx = window.location.href.indexOf('token='); // url中是否携带token
|
||||
if (hrefIdx > -1 && (token === '' || token === undefined || token === null)) { // 如果url携带token,并且没有登录后的用户信息
|
||||
let token = window.location.href.slice(hrefIdx + 3); // 截取token
|
||||
let defaultUrl = "/dashboard";
|
||||
next(defaultUrl);
|
||||
} else {
|
||||
let token = localStorage.getItem('X-Token');
|
||||
// console.log(!token);
|
||||
if (!token) {
|
||||
next('/');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
next()
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
|
|||
|
|
@ -380,7 +380,6 @@ export function getjq(yyyy, mm, dd) {
|
|||
*/
|
||||
export function exportJson(data, filename) {
|
||||
if (!data) {
|
||||
alert('保存的数据为空')
|
||||
return
|
||||
}
|
||||
if (!filename) {
|
||||
|
|
|
|||
|
|
@ -48,15 +48,21 @@
|
|||
element-loading-background="rgba(0, 0, 0, 0.8)" :cell-style="{ color: '#fff' }"
|
||||
:header-cell-style="{ color: '#fff' }" :data="tableData" @row-click="rowClick" height="47.125rem" border>
|
||||
<el-table-column prop="id" label="ID" align="center" width="50"></el-table-column>
|
||||
|
||||
<el-table-column prop="severName" label="服务名称" align="center"></el-table-column>
|
||||
|
||||
<el-table-column prop="spaceType" label="空间参考" align="center">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="severType" label="服务类型" align="center">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="storeType" label="存储类型" align="center">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="datasourceType" label="数据源类型" align="center">
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" align="center" width="400">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button size="mini" type="success" @click.stop="editd(row)">编辑
|
||||
|
|
@ -71,6 +77,7 @@
|
|||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
<el-pagination style="margin-top: 1.25rem" background layout="prev, pager, next" :page-size="page.size"
|
||||
:total="page.total" :current-page="page.current" @current-change="Currentchange">
|
||||
|
|
@ -86,8 +93,8 @@
|
|||
height: 48.125rem;
|
||||
border: 0.0625rem solid #10a2e1;
|
||||
">
|
||||
<DItu :row="rowdata" ref="dituevent" v-if="radio == '地图'"></DItu>
|
||||
<Fuwu :row="rowdata" ref="fuwuevent" v-if="radio == '服务'"></Fuwu>
|
||||
<DItu :row="rowdata" ref="dituevent" v-show="radio == '地图'"></DItu>
|
||||
<Fuwu :row="rowdata" ref="fuwuevent" v-show="radio == '服务'"></Fuwu>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -255,7 +262,7 @@
|
|||
import DItu from "./components/ditu.vue";
|
||||
import Fuwu from "./components/fuwu.vue";
|
||||
import { list, editsubmit, addLayer, downLoadShpZip } from "../../api/Datadetails";
|
||||
import { getDictone, getDicttwo, getLayerStyle, publishLayerPost, checkServerName } from "../../api/datamange";
|
||||
import { getDictone, getDicttwo, getLayerStyle, getLayerStyleAndType, publishLayerPost, checkServerName } from "../../api/datamange";
|
||||
import { getMethodCommon } from "../../api/Api";
|
||||
import { globalApi } from '../../api/urlPatterns.js';
|
||||
|
||||
|
|
@ -345,21 +352,35 @@
|
|||
getDicttwo().then((res) => {
|
||||
this.getDicttwo = res.data.data;
|
||||
});
|
||||
getLayerStyle().then((res) => {
|
||||
this.getDictthree = res.data.data.style.names;
|
||||
});
|
||||
// getLayerStyle().then((res) => {
|
||||
// this.getDictthree = res.data.data.style.names;
|
||||
// });
|
||||
|
||||
getLayerStyleAndType().then((res) => {
|
||||
let styles = res.data.data.data;
|
||||
this.getDictthree = [];
|
||||
|
||||
styles?.forEach((item,index)=>{
|
||||
this.getDictthree.push(item.styleName);
|
||||
})
|
||||
})
|
||||
|
||||
this.onLoad(this.page, this.form);
|
||||
},
|
||||
mounted() { },
|
||||
watch: {
|
||||
radio(val) {
|
||||
if (val == "地图") {
|
||||
|
||||
this.$nextTick(function () {
|
||||
this.$refs.dituevent.onLoad();
|
||||
});
|
||||
|
||||
} else {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.fuwuevent.onLoad();
|
||||
console.log('this.$refs.fuwuevent::: ', this.$refs.fuwuevent);
|
||||
this.$refs.fuwuevent && this.$refs.fuwuevent.onLoad();
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -464,11 +485,11 @@
|
|||
},
|
||||
//校验服务名
|
||||
servernameChange() {
|
||||
checkServerName(this.attributeform.serverName).then((res) => {
|
||||
checkServerName(this.addForm.serverName).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
if (res.data.data > 0) {
|
||||
this.$message.error("服务名称已存在,请重新输入");
|
||||
this.attributeform.serverName = "";
|
||||
this.addForm.serverName = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -484,10 +505,10 @@
|
|||
this.tableData = res.data.rows;
|
||||
this.rowdata = res.data.rows[0];
|
||||
this.$nextTick(function () {
|
||||
this.$refs.dituevent.onLoad();
|
||||
this.$refs.dituevent && this.$refs.dituevent.onLoad();
|
||||
});
|
||||
this.$nextTick(function () {
|
||||
this.$refs.fuwuevent.onLoad();
|
||||
this.$refs.fuwuevent && this.$refs.fuwuevent.onLoad();
|
||||
});
|
||||
this.loading = false;
|
||||
}
|
||||
|
|
@ -590,10 +611,10 @@
|
|||
// console.log(row);
|
||||
this.rowdata = row;
|
||||
this.$nextTick(function () {
|
||||
this.$refs.dituevent.onLoad();
|
||||
this.$refs.dituevent && this.$refs.dituevent.onLoad();
|
||||
});
|
||||
this.$nextTick(function () {
|
||||
this.$refs.fuwuevent.onLoad();
|
||||
this.$refs.fuwuevent && this.$refs.fuwuevent.onLoad();
|
||||
});
|
||||
},
|
||||
// 分页切换
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@
|
|||
import mapboxgl from "mapbox-gl";
|
||||
import { globalApi } from "../../../api/urlPatterns.js";
|
||||
import { getLayer, getGeomData } from "../../../api/Datadetails";
|
||||
mapboxgl.accessToken =
|
||||
"pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
// mapboxgl.accessToken ="pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg";
|
||||
export default {
|
||||
props: {
|
||||
row: {
|
||||
|
|
@ -23,9 +22,9 @@ export default {
|
|||
};
|
||||
},
|
||||
mounted() {
|
||||
// this.$nextTick(function () {
|
||||
// this.initMap();
|
||||
// });
|
||||
this.$nextTick(function () {
|
||||
this.initMap();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onLoad() {
|
||||
|
|
@ -33,6 +32,7 @@ export default {
|
|||
if(!this.row.tableRef){
|
||||
return;
|
||||
}
|
||||
|
||||
getLayer({
|
||||
spaceType: this.row.spaceType,
|
||||
tableName: this.row.tableRef,
|
||||
|
|
@ -42,10 +42,17 @@ export default {
|
|||
getGeomData(this.row.tableRef).then((el) => {
|
||||
// console.log(el);
|
||||
if (el.data.code == 200) {
|
||||
if(el.data.msg){
|
||||
let st = el.data.msg.slice(6, -1);
|
||||
st = st.split(" ");
|
||||
// console.log([Number(st[0]), Number(st[1])]);
|
||||
this.initMap(res.data.data.data[2].url, st);
|
||||
let _this = this;
|
||||
_this.initMap(res.data.data.data[2].url, st);
|
||||
}else{
|
||||
let st = [117.977325,35.265961];
|
||||
let _this = this;
|
||||
_this.initMap(res.data.data.data[2].url, st);
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -53,33 +60,88 @@ export default {
|
|||
},
|
||||
// 加载地图
|
||||
initMap(url, jwd) {
|
||||
// 先销毁地图
|
||||
if(this.map){
|
||||
this.map.remove();
|
||||
this.map = null;
|
||||
}
|
||||
// 创建地图
|
||||
let _this = this;
|
||||
this.map = new mapboxgl.Map({
|
||||
container: this.$refs.datamap,
|
||||
style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
|
||||
style: {
|
||||
"glyphs":"http://221.2.83.254:9010/font/{fontstack}/{range}.pbf",
|
||||
"version": 8,
|
||||
"sources": {
|
||||
"raster-tiles": {
|
||||
"type": "raster",
|
||||
"tiles": ['https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9'],
|
||||
"tileSize": 256,
|
||||
}
|
||||
},
|
||||
"layers": [
|
||||
{
|
||||
"id": "tdt-img-tiles",
|
||||
"type": "raster",
|
||||
"source": "raster-tiles",
|
||||
"minzoom": 0,
|
||||
"maxzoom": 22
|
||||
}]
|
||||
},
|
||||
center: [117.977325, 35.265961],
|
||||
zoom: 14,
|
||||
language: "zh-cmn",
|
||||
projection: "globe",
|
||||
});
|
||||
this.map.on("load", () => {
|
||||
// 高清影像
|
||||
_this.loadGaoQingLayer();
|
||||
// 注记图层
|
||||
_this.loadDianZiLayer();
|
||||
// 数据图层
|
||||
_this.addGeoJsonLayer(url, jwd);
|
||||
});
|
||||
},
|
||||
// 'http://localhost:8080/geoserver/wms?service=WMS&version=1.1.0&request=GetMap&layers=topp:states&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png'
|
||||
// http://123.132.248.154:9205/geoserver/gwc/service/tms/1.0.0/ksp:shp_1681969689@EPSG:4326@png
|
||||
loadDianZiLayer() {
|
||||
this.map.addLayer({
|
||||
id: "tiandituzhuji",
|
||||
type: "raster",
|
||||
source: {
|
||||
type: "raster",
|
||||
tiles: [
|
||||
"http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=b6585bc41ee16251dbe6b1af64f375d9",
|
||||
],
|
||||
tileSize: 256,
|
||||
},
|
||||
layout: {
|
||||
visibility: "visible",
|
||||
},
|
||||
});
|
||||
},
|
||||
// 高清影像
|
||||
loadGaoQingLayer() {
|
||||
this.map.addLayer({
|
||||
'id': 'gaoqingyingxiang',
|
||||
'type': 'raster',
|
||||
'source': {
|
||||
'type': 'raster',
|
||||
'tiles': ["http://221.2.83.254:9007/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:feixianyingxiang20250308&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"],
|
||||
'tileSize': 256
|
||||
},
|
||||
'layout': {
|
||||
'visibility': 'visible'
|
||||
},
|
||||
'paint': {
|
||||
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
addGeoJsonLayer(url, jwd) {
|
||||
// console.log(Object(url));
|
||||
this.map.addSource("wmsSource", {
|
||||
type: "raster",
|
||||
// tiles: [
|
||||
// "http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:zhenjie&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||||
// ],
|
||||
tiles: [
|
||||
globalApi.GEOSERVER_URL +
|
||||
"/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:" +
|
||||
this.row.tableRef +
|
||||
"&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE",
|
||||
globalApi.GEOSERVER_URL +"/geoserver/ksp/wms?service=WMS&version=1.1.0&request=GetMap&layers=ksp:"+this.row.tableRef +"&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE&cql_filter=is_del%20=0",
|
||||
],
|
||||
tileSize: 256,
|
||||
});
|
||||
|
|
@ -92,11 +154,13 @@ export default {
|
|||
visibility: "visible",
|
||||
},
|
||||
});
|
||||
this.map.flyTo({
|
||||
center: [Number(jwd[0]), Number(jwd[1])],
|
||||
zoom: 10,
|
||||
speed: 5,
|
||||
});
|
||||
if(jwd){
|
||||
this.map.flyTo({
|
||||
center: [Number(jwd[0]), Number(jwd[1])],
|
||||
zoom: 10,
|
||||
speed: 5,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ import Dian from "./dian.vue";
|
|||
import geoserve from "../../../assets/xianjie.json";
|
||||
import * as turf from "@turf/turf";
|
||||
mapboxgl.accessToken =
|
||||
"pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
"pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg";
|
||||
import { globalApi } from "../../../api/urlPatterns";
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -336,7 +336,7 @@ export default {
|
|||
let _this = this;
|
||||
this.map = new mapboxgl.Map({
|
||||
container: this.$refs.datamaps,
|
||||
style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
|
||||
style:"mapbox://styles/mapbox/satellite-v9",
|
||||
center: [117.922083055, 35.285659054999996],
|
||||
zoom: 14,
|
||||
language: "zh-cmn",
|
||||
|
|
|
|||
|
|
@ -62,6 +62,4 @@ export default {
|
|||
margin:0px auto;
|
||||
height: calc( 100% - 240px);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</style>
|
||||
|
|
@ -1,565 +0,0 @@
|
|||
<template>
|
||||
<div class="form-container">
|
||||
<div
|
||||
style="height:50px;margin-bottom:40px;font-size:18px;color:#fff;font-weight:bold;border-bottom:1px solid rgba(255,255,255,0.1);">
|
||||
<span style="font-weight:1000;font-size:20px;cursor:pointer;"
|
||||
@click="$router.push({'path':'/upload_type_selected'})"><i class="el-icon el-icon-back"></i></span>
|
||||
导入Excel数据
|
||||
</div>
|
||||
<div class="title">
|
||||
<el-steps :active="currentStep" align-center>
|
||||
<el-step title="文件上传" description="选择Excel格式模板文件并配置服务基础信息"></el-step>
|
||||
<el-step title="信息配置" description="根据中文字段名称配置英文注释用于服务发布"></el-step>
|
||||
<el-step title="创建完成" description="服务创建完成在服务列表中查看服务"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div class="first-step" v-if="currentStep == 1">
|
||||
<div class="upload-iocn-box">
|
||||
<div class="upload-icon-bg2"></div>
|
||||
<div class="upload-icon-bg">
|
||||
<p class="upload-iocn">
|
||||
<img src="/images/upload.png" alt="">
|
||||
</p>
|
||||
<p class="upload-icon-text">只能选择后缀（.xlsx）格式模板文件<br />（文件大小不能超过100MB）</p>
|
||||
<p>
|
||||
<el-upload class="upload-demo" :action="''" :on-preview="handlePreview"
|
||||
:before-upload="beforeUpload" multiple :limit="3" :on-exceed="handleExceed"
|
||||
:file-list="fileList">
|
||||
<el-button size="small" type="primary">选择文件</el-button>
|
||||
</el-upload>
|
||||
</p>
|
||||
<p style="margin-top:10px;color:#ccc;">{{file ? file.name : null}}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-box">
|
||||
<el-form ref="forms" :model="form" :rules="rules" label-width="120px" size="small">
|
||||
<el-form-item label="服务名称" prop="serverName">
|
||||
<el-input placeholder="请输入服务名称" style="width: 360px" v-model="form.serverName"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="空间参考" label-width="" prop="spaceType">
|
||||
<el-select style="width: 360px;" v-model="form.spaceType" placeholder="请选择空间参考">
|
||||
<el-option v-for="(item, index) in getDictone" :key="index" :label="item.dictlabel"
|
||||
:value="item.dictlabel"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-top:165px;text-align:right;">
|
||||
<el-button type="default" @click="$router.push({'path':'/upload_type_selected'})">取消</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-check" @click.native="onSubmit('form')">创建
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="second-step" v-if="currentStep == 2">
|
||||
<div class="btn-container">
|
||||
<el-button type="primary" size="large" icon="el-icon-download" @click.native="downloadTemplate"
|
||||
style="margin-right: 10px;">模板下载
|
||||
</el-button>
|
||||
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:file-list="fileListImport" :show-file-list="false" :before-upload="beforeUploadImport">
|
||||
<el-button type="primary" size="large" icon="el-icon-upload">导入
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<el-table :data="tableHeader" height="320" border size="mini" style="width: 100%">
|
||||
|
||||
<el-table-column prop="name" label="原始字段名称" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="数据类型" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="length" label="数据长度">
|
||||
</el-table-column>
|
||||
<el-table-column label="英文名称">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.en_name" size="mini"></el-input>
|
||||
<p style="color:#ff0000;font-size:12px;" v-if="!regExp.test(scope.row.en_name)">
|
||||
使用小写字母、数字、下划线的组合</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="中文注释">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.cn_name" size="mini"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="删除">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" icon="el-icon-delete" type="warning" @click="delColumn(scope)">
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div style="text-align:right;position:absolute;bottom:20px;width: calc( 100% - 160px);">
|
||||
<el-button type="default" size="large" @click="$router.push({'path':'/upload_type_selected'})">取消
|
||||
</el-button>
|
||||
<el-button type="primary" size="large" icon="el-icon-check" @click.native="createService">创建
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="third-step" v-if="currentStep == 3">
|
||||
<el-result icon="success" title="服务创建成功" subTitle="服务创建成功，请在服务列表中心查看服务">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium" @click="$router.push({'path':'/ServiceList'})">服务列表
|
||||
</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import { getMethodCommon, postMethodCommon } from '../../api/Api';
|
||||
import { globalApi } from '../../api/urlPatterns.js';
|
||||
export default {
|
||||
name: 'data_upload',
|
||||
data() {
|
||||
return {
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("X-Token") || "",
|
||||
},
|
||||
form: {
|
||||
serverName: null,
|
||||
|
||||
},
|
||||
getDictone: [
|
||||
{
|
||||
"dictvalue": "1",
|
||||
"dictlabel": "EPSG:4326"
|
||||
},
|
||||
{
|
||||
"dictvalue": "2",
|
||||
"dictlabel": "EPSG:3857"
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
serverName: [
|
||||
{ required: true, message: '请输入服务名称', trigger: 'blur' },
|
||||
],
|
||||
spaceType: [
|
||||
{ required: true, message: '请选择参考系', trigger: 'blur' },
|
||||
]
|
||||
},
|
||||
fileList: [],
|
||||
file: null,
|
||||
currentStep: 1,
|
||||
tableHeader: [],
|
||||
regExp: /^[a-z0-9_]+$/,
|
||||
fileListImport: [],
|
||||
fileImport: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 下载模板
|
||||
downloadTemplate() {
|
||||
window.location.href = globalApi.BASE_URL + '/geoserver/downloadColumn/' + this.tableName
|
||||
},
|
||||
delColumn(scope) {
|
||||
this.tableHeader.splice(scope.$index, 1);
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log("file222", file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
console.log("files", files);
|
||||
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
beforeUploadImport(file) {
|
||||
console.log(file)
|
||||
let formData = new FormData();
|
||||
formData.append("file", file);
|
||||
let _this = this;
|
||||
axios.post(globalApi.BASE_URL + '/geoserver/uploadModelData', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': localStorage.getItem("X-Token") || "",
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
console.log(res)
|
||||
var list = res.data.data.data
|
||||
console.log(list)
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
for (var j = 0; j < _this.tableHeader.length; j++) {
|
||||
if (list[i].name0 == _this.tableHeader[j].name) {
|
||||
_this.tableHeader[j].en_name = list[i].name1
|
||||
_this.tableHeader[j].cn_name = list[i].name2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
beforeUpload(file) {
|
||||
console.log(file);
|
||||
this.file = file;
|
||||
let extension = file.name.substring(file.name.lastIndexOf('.') + 1)
|
||||
let size = file.size / 1024 / 1024;
|
||||
if (extension !== 'xlsx') {
|
||||
this.$message.warning('只能上传后缀是.xlsx的文件')
|
||||
return false
|
||||
}
|
||||
if (size > 100) {
|
||||
this.$message.warning('文件大小不得超过100M')
|
||||
return false
|
||||
}
|
||||
return false
|
||||
},
|
||||
handleFileChange(file, fileList) {
|
||||
let f = { ...file }
|
||||
},
|
||||
|
||||
onSubmit() {
|
||||
if (this.file == null) {
|
||||
this.$message({ type: "warning", message: "请选择文件!" })
|
||||
return false;
|
||||
}
|
||||
|
||||
this.$refs['forms'].validate((valid) => {
|
||||
if (valid) {
|
||||
let formData = new FormData();
|
||||
formData.append("file", this.file);
|
||||
formData.append("serverName", this.form.serverName)
|
||||
formData.append("spaceType", this.form.spaceType)
|
||||
let _this = this;
|
||||
axios.post(globalApi.BASE_URL + '/geoserver/uploadExcelFile', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': localStorage.getItem("X-Token") || "",
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
|
||||
_this.tableName = res.data.data.tableName;
|
||||
let arr = res.data.data.heads;
|
||||
_this.tableHeader = [];
|
||||
var relation = res.data.data.relation
|
||||
arr.forEach((item, index) => {
|
||||
|
||||
let obj = {
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
length: item.length,
|
||||
en_name: item.name.toLowerCase(),
|
||||
cn_name: relation[item.name]
|
||||
}
|
||||
_this.tableHeader.push(obj);
|
||||
})
|
||||
_this.currentStep = 2;
|
||||
}
|
||||
})
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
createService() {
|
||||
// 英文字段验证
|
||||
let valid = [];
|
||||
this.tableHeader.forEach((item, index) => {
|
||||
let isEn = this.regExp.test(item.en_name);
|
||||
valid.push(isEn);
|
||||
})
|
||||
let isEn = valid.find((item, index) => {
|
||||
return item != true;
|
||||
})
|
||||
|
||||
if (isEn == false) {
|
||||
return;
|
||||
}
|
||||
|
||||
let _this = this;
|
||||
let headerJsonString = {};
|
||||
let newHeader = [];
|
||||
this.tableHeader.forEach((item, index) => {
|
||||
|
||||
|
||||
headerJsonString[item.en_name] = item.cn_name;
|
||||
let obj = {
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
length: item.length,
|
||||
refName: item.en_name,
|
||||
initName:item.cn_name
|
||||
}
|
||||
newHeader.push(obj);
|
||||
|
||||
})
|
||||
let formData = {
|
||||
dataType: "点",
|
||||
severType: "矢量",
|
||||
spaceType: this.form.spaceType,
|
||||
tableName: this.tableName,
|
||||
newHeads: newHeader,
|
||||
styleName: null,
|
||||
serverName: this.form.serverName,
|
||||
refRelation: JSON.stringify(headerJsonString),
|
||||
areaName: localStorage.getItem("areaName"),
|
||||
}
|
||||
|
||||
|
||||
postMethodCommon("/geoserver/saveData", formData).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
getMethodCommon("/geoserver/publishLayer/" + _this.tableName).then(response => {
|
||||
_this.$message({
|
||||
type: "success",
|
||||
message: "上传服务成功"
|
||||
})
|
||||
_this.currentStep = 3;
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
console.log("response", response);
|
||||
this.tableName = response.msg;
|
||||
},
|
||||
deleateColumn(scope) {
|
||||
console.log(scope);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-container {
|
||||
width: 1200px;
|
||||
padding: 20px 20px;
|
||||
height: 700px;
|
||||
background: #162258;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-indent: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-dragger {
|
||||
background: none;
|
||||
border: 1px solid #108eff;
|
||||
color: #fff;
|
||||
margin: 20px auto;
|
||||
width: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-dragger .el-upload__text {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-list__item-name {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: none;
|
||||
border-radius: 0px;
|
||||
border-color: #108eff;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
width: calc(50% - 100px);
|
||||
height: calc(100% - 280px);
|
||||
float: left;
|
||||
margin-left: 100px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 1040px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
width: 1040px;
|
||||
margin: 0px auto;
|
||||
text-align: right;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.upload-iocn-box {
|
||||
width: calc(50% - 280px);
|
||||
height: calc(100% - 380px);
|
||||
float: left;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background: #162258;
|
||||
margin-top: 25px;
|
||||
margin-left: 120px;
|
||||
}
|
||||
|
||||
.upload-icon-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #162258;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.upload-iocn-box::after {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #108eff;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
z-index: 1;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.upload-iocn-box::before {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #108eff;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
border-radius: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-icon-bg2::after {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #108eff;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: -3px;
|
||||
border-radius: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-icon-bg2::before {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #108eff;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
right: -3px;
|
||||
border-radius: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-iocn-box img {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.upload-iocn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.upload-icon-text {
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
margin: 20px 0px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.upload-iocn-file-name {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-step__icon-inner {
|
||||
text-align: center;
|
||||
text-indent: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-step__title.is-process {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-step__description.is-process {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
::v-deep .el-result__title p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-result__subtitle p {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {}
|
||||
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background: #162258;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-table tr {
|
||||
background: #162258;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-table .el-table__body tr:hover>td {
|
||||
background-color: rgba(255, 255, 255, .1) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__body tr.current-row>td {
|
||||
background-color: rgba(255, 255, 255, .1) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,625 +0,0 @@
|
|||
<template>
|
||||
<div class="form-container" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)">
|
||||
<div style="
|
||||
height: 50px;
|
||||
margin-bottom: 40px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
">
|
||||
<span style="font-weight: 1000; font-size: 20px; cursor: pointer"
|
||||
@click="$router.push({ path: '/upload_type_selected' })"><i class="el-icon el-icon-back"></i></span>
|
||||
导入ShpFile数据
|
||||
</div>
|
||||
<div class="title">
|
||||
<el-steps :active="currentStep" align-center>
|
||||
<el-step title="文件上传" description="选择ShpFile格式模板文件并配置服务基础信息"></el-step>
|
||||
<el-step title="信息配置" description="根据中文字段名称配置英文注释用于服务发布"></el-step>
|
||||
<el-step title="创建完成" description="服务创建完成在服务列表中查看服务"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div class="first-step" v-if="currentStep == 1">
|
||||
<div class="upload-iocn-box">
|
||||
<div class="upload-icon-bg2"></div>
|
||||
<div class="upload-icon-bg">
|
||||
<p class="upload-iocn">
|
||||
<img src="/images/upload.png" alt="" />
|
||||
</p>
|
||||
<p class="upload-icon-text">
|
||||
只能选择后缀（.zip）格式压缩文件<br />（文件大小不能超过50MB）
|
||||
</p>
|
||||
<p>
|
||||
<el-upload class="upload-demo" :action="''" :on-preview="handlePreview" :before-upload="beforeUpload"
|
||||
multiple :limit="3" :on-exceed="handleExceed" :file-list="fileList">
|
||||
<el-button size="small" type="primary">选择文件</el-button>
|
||||
</el-upload>
|
||||
</p>
|
||||
<p style="margin-top: 10px; color: #ccc">
|
||||
{{ file ? file.name : null }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-box">
|
||||
<el-form ref="forms" :model="form" :rules="rules" label-width="120px" size="small">
|
||||
<el-form-item label="服务名称" prop="serverName">
|
||||
<el-input placeholder="请输入服务名称" style="width: 360px" v-model="form.serverName" @change="servernameChange">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="空间参考" prop="spaceType">
|
||||
<el-select style="width: 360px" v-model="form.spaceType" placeholder="请选择空间参考">
|
||||
<el-option v-for="(item, index) in getDictone" :key="index" :label="item.dictlabel"
|
||||
:value="item.dictlabel"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="服务类型" prop="severType">
|
||||
<el-select style="width: 360px" v-model="form.severType" placeholder="请选择服务类型">
|
||||
<el-option v-for="(item, index) in getDicttwo" :key="index" :label="item.dictlabel"
|
||||
:value="item.dictlabel"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="图层样式">
|
||||
<el-select v-model="form.styleName" style="width: 280px" placeholder="请选择图层样式">
|
||||
<el-option v-for="(value, key) in getDictthree" :key="key" :label="value" :value="value"></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" @click="createStyle">创建样式</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="margin-top: 60px; text-align: right">
|
||||
<el-button type="default" @click="$router.push({ path: '/upload_type_selected' })">取消</el-button>
|
||||
<el-button type="primary" size="small" icon="el-icon-check" @click.native="onSubmit('form')">创建</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="second-step" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
|
||||
element-loading-background="rgba(0, 0, 0, 0.8)" v-if="currentStep == 2">
|
||||
<div class="btn-container">
|
||||
<el-button type="primary" size="large" icon="el-icon-download" @click.native="downloadTemplate" style="margin-right: 10px;">模板下载</el-button>
|
||||
<el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileListImport"
|
||||
:show-file-list="false" :before-upload="beforeUploadImport">
|
||||
<el-button type="primary" size="large" icon="el-icon-upload">导入
|
||||
</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<el-table :data="tableHeader" height="320" border size="mini" style="width: 100%">
|
||||
<el-table-column prop="name" label="原始字段名称" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="数据类型" width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="length" label="数据长度"> </el-table-column>
|
||||
<el-table-column label="英文名称">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.en_name" size="mini"></el-input>
|
||||
<p style="color: #ff0000; font-size: 12px" v-if="!regExp.test(scope.row.en_name)">
|
||||
使用小写字母、数字、下划线的组合
|
||||
</p>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="中文注释">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-model="scope.row.cn_name" size="mini"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="删除">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" icon="el-icon-delete" type="warning" @click="delColumn(scope)"></el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div style="
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
width: calc(100% - 160px);
|
||||
">
|
||||
<el-button type="default" size="large" @click="$router.push({ path: '/upload_type_selected' })">取消</el-button>
|
||||
<el-button type="primary" size="large" icon="el-icon-check" @click.native="createService">创建</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="third-step" v-if="currentStep == 3">
|
||||
<el-result icon="success" title="服务创建成功" subTitle="服务创建成功，请在服务列表中心查看服务">
|
||||
<template slot="extra">
|
||||
<el-button type="primary" size="medium" @click="$router.push({ path: '/ServiceList' })">服务列表</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
|
||||
<StyleConfig @yschange="styleUpdate" v-if="StyleConfigShow"></StyleConfig>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import { getMethodCommon, postMethodCommon } from "../../api/Api";
|
||||
import { globalApi } from "../../api/urlPatterns.js";
|
||||
import StyleConfig from "../data_manage/yangshi";
|
||||
import {
|
||||
getDictone,
|
||||
getDicttwo,
|
||||
getLayerStyle,
|
||||
checkServerName,
|
||||
uploadFile,
|
||||
} from "../../api/datamange";
|
||||
|
||||
export default {
|
||||
name: "data_upload",
|
||||
components: {
|
||||
StyleConfig,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
StyleConfigShow: false,
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("X-Token") || "",
|
||||
},
|
||||
form: {
|
||||
serverName: null,
|
||||
},
|
||||
rules: {
|
||||
serverName: [
|
||||
{ required: true, message: "请输入服务名称", trigger: "blur" },
|
||||
],
|
||||
spaceType: [
|
||||
{ required: true, message: "请选择参考系", trigger: "blur" },
|
||||
],
|
||||
severType: [
|
||||
{ required: true, message: "请输选择服务类型", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
getDictone: [],
|
||||
getDicttwo: [],
|
||||
getDictthree: [],
|
||||
fileList: [],
|
||||
file: null,
|
||||
currentStep: 1,
|
||||
tableHeader: [],
|
||||
regExp: /^[a-z0-9_]+$/,
|
||||
fileListImport: [],
|
||||
fileImport: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getDictone().then((res) => {
|
||||
this.getDictone = res.data.data;
|
||||
});
|
||||
getDicttwo().then((res) => {
|
||||
this.getDicttwo = res.data.data;
|
||||
});
|
||||
getLayerStyle().then((res) => {
|
||||
this.getDictthree = res.data.data.style.names;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 下载模板
|
||||
downloadTemplate() {
|
||||
window.location.href = globalApi.BASE_URL + '/geoserver/downloadColumn/' + this.tableName
|
||||
},
|
||||
//校验服务名
|
||||
servernameChange() {
|
||||
checkServerName(this.form.serverName).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
if (res.data.data > 0) {
|
||||
this.$message.error("服务名称已存在,请重新输入");
|
||||
this.form.serverName = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
delColumn(scope) {
|
||||
this.tableHeader.splice(scope.$index, 1);
|
||||
},
|
||||
styleUpdate() {
|
||||
getLayerStyle().then((res) => {
|
||||
this.getDictthree = res.data.data.style.names;
|
||||
});
|
||||
|
||||
this.StyleConfigShow = false;
|
||||
},
|
||||
handleRemove(file, fileList) {
|
||||
console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
|
||||
} 个文件`
|
||||
);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
beforeUploadImport(file) {
|
||||
console.log(file)
|
||||
let formData = new FormData();
|
||||
formData.append("file", file);
|
||||
let _this = this;
|
||||
axios.post(globalApi.BASE_URL + '/geoserver/uploadModelData', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
'Authorization': localStorage.getItem("X-Token") || "",
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.data.code == 200) {
|
||||
console.log(res)
|
||||
var list = res.data.data.data
|
||||
console.log(list)
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
for (var j = 0; j < _this.tableHeader.length; j++) {
|
||||
if (list[i].name0 == _this.tableHeader[j].name) {
|
||||
_this.tableHeader[j].en_name = list[i].name1
|
||||
_this.tableHeader[j].cn_name = list[i].name2
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
beforeUpload(file) {
|
||||
console.log(file);
|
||||
this.file = file;
|
||||
let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
|
||||
let size = file.size / 1024 / 1024;
|
||||
if (extension !== "zip") {
|
||||
this.$message.warning("只能上传后缀是.zip的文件");
|
||||
return false;
|
||||
}
|
||||
if (size > 100) {
|
||||
this.$message.warning("文件大小不得超过100M");
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
handleFileChange(file, fileList) {
|
||||
let f = { ...file };
|
||||
},
|
||||
|
||||
onSubmit() {
|
||||
this.loading = true;
|
||||
if (this.file == null) {
|
||||
this.$message({ type: "warning", message: "请选择文件!" });
|
||||
return false;
|
||||
}
|
||||
this.$refs["forms"].validate((valid) => {
|
||||
if (valid) {
|
||||
let formData = new FormData();
|
||||
formData.append("file", this.file);
|
||||
formData.append("serverName", this.form.serverName);
|
||||
formData.append("spaceType", this.form.spaceType);
|
||||
formData.append("severType", this.form.severType);
|
||||
let _this = this;
|
||||
// axios
|
||||
// .post(globalApi.BASE_URL + "/geoserver/uploadFile", formData, {
|
||||
// headers: {
|
||||
// "Content-Type": "multipart/form-data",
|
||||
// Authorization: localStorage.getItem("X-Token") || "",
|
||||
// },
|
||||
// })
|
||||
uploadFile(formData)
|
||||
.then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
this.loading = false;
|
||||
_this.tableName = res.data.data.tableName;
|
||||
_this.form.dataType = res.data.data.dataType;
|
||||
let arr = res.data.data.heads;
|
||||
_this.tableHeader = [];
|
||||
arr.forEach((item, index) => {
|
||||
let obj = {
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
length: item.length,
|
||||
en_name: item.name.toLowerCase(),
|
||||
cn_name: item.name,
|
||||
};
|
||||
_this.tableHeader.push(obj);
|
||||
});
|
||||
_this.currentStep = 2;
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
// 报错
|
||||
this.loading = false;
|
||||
// console.log(err);
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
createService() {
|
||||
this.loading = true;
|
||||
let valid = [];
|
||||
this.tableHeader.forEach((item, index) => {
|
||||
let isEn = this.regExp.test(item.en_name);
|
||||
valid.push(isEn);
|
||||
});
|
||||
let isEn = valid.find((item, index) => {
|
||||
return item != true;
|
||||
});
|
||||
|
||||
if (isEn == false) {
|
||||
return;
|
||||
}
|
||||
|
||||
let _this = this;
|
||||
let headerJsonString = {};
|
||||
let newHeader = [];
|
||||
this.tableHeader.forEach((item, index) => {
|
||||
headerJsonString[item.en_name.toLowerCase()] = item.cn_name;
|
||||
let obj = {
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
length: item.length,
|
||||
refName: item.en_name,
|
||||
initName:item.cn_name
|
||||
};
|
||||
newHeader.push(obj);
|
||||
});
|
||||
|
||||
let formData = {
|
||||
dataType: this.form.dataType,
|
||||
severType: this.form.severType,
|
||||
spaceType: this.form.spaceType,
|
||||
tableName: this.tableName,
|
||||
newHeads: newHeader,
|
||||
styleName: this.form.styleName,
|
||||
serverName: this.form.serverName,
|
||||
refRelation: JSON.stringify(headerJsonString),
|
||||
areaName: localStorage.getItem('areaName')
|
||||
};
|
||||
|
||||
postMethodCommon("/geoserver/saveData", formData)
|
||||
.then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
getMethodCommon("/geoserver/publishLayer/" + _this.tableName).then(
|
||||
(response) => {
|
||||
this.loading = false;
|
||||
_this.$message({
|
||||
type: "success",
|
||||
message: "上传服务成功",
|
||||
});
|
||||
_this.currentStep = 3;
|
||||
}
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
// console.log(err);
|
||||
// this.$message.error(err);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleSuccess(response, file, fileList) {
|
||||
console.log("response", response);
|
||||
this.tableName = response.msg;
|
||||
},
|
||||
createStyle() {
|
||||
this.StyleConfigShow = true;
|
||||
// this.$router.push({'path':'/layer_style_config'})
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-container {
|
||||
width: 1200px;
|
||||
padding: 20px 20px;
|
||||
height: 700px;
|
||||
background: #162258;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
text-indent: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-dragger {
|
||||
background: none;
|
||||
border: 1px solid #108eff;
|
||||
color: #fff;
|
||||
margin: 20px auto;
|
||||
width: 400px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-dragger .el-upload__text {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-upload-list__item-name {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
background: none;
|
||||
border-radius: 0px;
|
||||
border-color: #108eff;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.form-box {
|
||||
width: calc(50% - 100px);
|
||||
height: calc(100% - 280px);
|
||||
float: left;
|
||||
margin-left: 100px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
width: 1040px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
.btn-container {
|
||||
width: 1040px;
|
||||
margin: 0px auto;
|
||||
text-align: right;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.upload-iocn-box {
|
||||
width: calc(50% - 280px);
|
||||
height: calc(100% - 380px);
|
||||
float: left;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
background: #162258;
|
||||
margin-top: 25px;
|
||||
margin-left: 120px;
|
||||
}
|
||||
|
||||
.upload-icon-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #162258;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.upload-iocn-box::after {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #108eff;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
left: -3px;
|
||||
z-index: 1;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.upload-iocn-box::before {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #108eff;
|
||||
position: absolute;
|
||||
top: -3px;
|
||||
right: -3px;
|
||||
border-radius: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-icon-bg2::after {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #108eff;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: -3px;
|
||||
border-radius: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-icon-bg2::before {
|
||||
content: "";
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #108eff;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
right: -3px;
|
||||
border-radius: 1px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.upload-iocn-box img {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.upload-iocn {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.upload-icon-text {
|
||||
font-size: 14px;
|
||||
color: #ccc;
|
||||
margin: 20px 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-button {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-step__icon-inner {
|
||||
text-align: center;
|
||||
text-indent: 0px;
|
||||
}
|
||||
|
||||
::v-deep .el-step__title.is-process {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-step__description.is-process {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-table {
|
||||
background: none;
|
||||
}
|
||||
|
||||
::v-deep .el-form-item__label {}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
::v-deep .el-result__title p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-result__subtitle p {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
::v-deep .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {}
|
||||
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background: #162258;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-table tr {
|
||||
background: #162258;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__body tr:hover>td {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
::v-deep .el-table .el-table__body tr.current-row>td {
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -20,7 +20,7 @@ import * as MP from './lib/Mp.js';
|
|||
},
|
||||
methods:{
|
||||
initMap(){
|
||||
this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
// this.$mapboxgl.accessToken = "pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg";
|
||||
this.map = new this.$mapboxgl.Map({
|
||||
container:"drawMapContainer",
|
||||
center:[118.0075,35.42222222],
|
||||
|
|
|
|||
|
|
@ -125,7 +125,10 @@
|
|||
import axios from 'axios';
|
||||
import { getMethodCommon, postMethodCommon } from '../../api/Api';
|
||||
import { globalApi } from '../../api/urlPatterns.js';
|
||||
import { checkServerName,checkTableName } from "../../api/datamange";
|
||||
import {
|
||||
checkServerName,
|
||||
checkTableName
|
||||
} from "../../api/datamange";
|
||||
export default {
|
||||
name: 'data_upload',
|
||||
data() {
|
||||
|
|
@ -138,7 +141,7 @@
|
|||
} else {
|
||||
callback();
|
||||
}
|
||||
//
|
||||
|
||||
};
|
||||
var isAllUpperCase = (rule, value, callback) => {
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -319,7 +319,7 @@
|
|||
this.$message.warning("只能上传后缀是.zip的文件");
|
||||
return false;
|
||||
}
|
||||
if (size > 100) {
|
||||
if (size > 200) {
|
||||
this.$message.warning("文件大小不得超过100M");
|
||||
return false;
|
||||
}
|
||||
|
|
@ -344,7 +344,7 @@
|
|||
formData.append("spaceType", this.form.spaceType);
|
||||
formData.append("severType", this.form.severType);
|
||||
formData.append("tableName", this.form.tableName);
|
||||
formData.append("styleName",this.form.styleName);
|
||||
formData.append("styleName",this.form.styleName)
|
||||
let _this = this;
|
||||
uploadFile(formData)
|
||||
.then((res) => {
|
||||
|
|
|
|||
|
|
@ -250,7 +250,7 @@ export default {
|
|||
}
|
||||
},
|
||||
initMap(){
|
||||
this.$mapboxgl.accessToken = "pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
this.$mapboxgl.accessToken = "pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg";
|
||||
this.globalMap = new this.$mapboxgl.Map({
|
||||
container:"mapEditorContainer",
|
||||
center:[this.currentViewer.center.lng,this.currentViewer.center.lat],
|
||||
|
|
@ -392,7 +392,7 @@ export default {
|
|||
'type': 'raster',
|
||||
'source': {
|
||||
'type': 'raster',
|
||||
'tiles': ["http://60.213.14.14:8060/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:yingxiang&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"],
|
||||
'tiles': ["http://221.2.83.254:9007/geoserver/feixian/wms?service=WMS&version=1.1.0&request=GetMap&layers=feixian:feixianyingxiang20250308&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE"],
|
||||
'tileSize': 256
|
||||
},
|
||||
'layout':{
|
||||
|
|
|
|||
|
|
@ -157,8 +157,7 @@ import {
|
|||
publishLayer,
|
||||
getLayerStyle,
|
||||
} from "../../api/datamange";
|
||||
mapboxgl.accessToken =
|
||||
"pk.eyJ1Ijoic2hpY2hhbzEyMyIsImEiOiJja3FobnI1aDEwNGF6Mm9vOXVhNnBzZmFhIn0.2fZKiMqCQHxVY74QShMEGQ";
|
||||
// mapboxgl.accessToken = "pk.eyJ1IjoieHVqaW5nbGlhbmciLCJhIjoiY2w3bzFzZnZqMjdieTN1cG92N2I1d2huOSJ9.aQqMz4S-cTziUYizIH_gNg";
|
||||
|
||||
export default {
|
||||
name: "DataManage",
|
||||
|
|
@ -393,7 +392,7 @@ export default {
|
|||
let _this = this;
|
||||
this.map = new mapboxgl.Map({
|
||||
container: "mapbox-container",
|
||||
style: "mapbox://styles/shichao123/clf3b1bxk007801moo0nnl87k",
|
||||
style:"mapbox://styles/mapbox/satellite-v9",
|
||||
center: [118, 25],
|
||||
zoom: 14,
|
||||
language: "zh-cmn",
|
||||
|
|
|
|||
|
|
@ -1,28 +1,28 @@
|
|||
const validateMobile = function (rule, value, callback) {
|
||||
let newValue = value.replace(/[^0-9]/gi, '')
|
||||
if (value !== newValue) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else if (newValue.length !== 11) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validID = function(rule, value, callback) {
|
||||
// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
|
||||
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
||||
if (reg.test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("请输入正确的身份证号码"));
|
||||
}
|
||||
}
|
||||
var validateStock = (rule, value, callback) => {
|
||||
if (!value || value == 0) {
|
||||
callback(new Error("不能为空"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
const validateMobile = function (rule, value, callback) {
|
||||
let newValue = value.replace(/[^0-9]/gi, '')
|
||||
if (value !== newValue) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else if (newValue.length !== 11) {
|
||||
callback(new Error('请输入正确的手机号'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validID = function(rule, value, callback) {
|
||||
// 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
|
||||
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
|
||||
if (reg.test(value)) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("请输入正确的身份证号码"));
|
||||
}
|
||||
}
|
||||
var validateStock = (rule, value, callback) => {
|
||||
if (!value || value == 0) {
|
||||
callback(new Error("不能为空"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
export { validateMobile ,validID,validateStock}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -24,7 +24,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { login } from "../../api/login";
|
||||
import md5 from 'js-md5'
|
||||
import { login,checkAuth } from "../../api/login";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -35,19 +36,44 @@ export default {
|
|||
methods: {
|
||||
login() {
|
||||
this.loading = true
|
||||
login(this.form.account, this.form.password).then((res) => {
|
||||
|
||||
login(this.form.account,md5(this.form.password).toUpperCase()).then((res) => {
|
||||
if (res.data.code == 200) {
|
||||
// console.log(res);
|
||||
// localStorage.setItem("X-Token", res.data.msg);
|
||||
localStorage.setItem("areaName",res.data.userInfo.areaENName);
|
||||
localStorage.setItem("areaENName",res.data.userInfo.areaENName);
|
||||
localStorage.setItem("X-Token", res.data.token);
|
||||
this.$message.success("登录成功");
|
||||
this.loading = false
|
||||
this.$router.push("/layout");
|
||||
this.checkAuth();
|
||||
|
||||
// this.$message.success("登录成功");
|
||||
// this.loading = false
|
||||
// this.$router.push("/layout");
|
||||
}
|
||||
});
|
||||
},
|
||||
checkAuth(){
|
||||
checkAuth().then(res=>{
|
||||
if(res.data.code == 200){
|
||||
let checked = false
|
||||
res.data.result.forEach((item)=>{
|
||||
// if(item.name == '数据维护'){
|
||||
checked = true
|
||||
// }
|
||||
})
|
||||
|
||||
if(checked){
|
||||
this.$message.success("登录成功！");
|
||||
this.loading = false
|
||||
this.$router.push("/layout");
|
||||
}else{
|
||||
this.$message.error("没有权限！");
|
||||
localStorage.clear();
|
||||
this.$router.push("/");
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -152,6 +152,7 @@
|
|||
<el-radio style="color: #fff" label="样式三"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.popup" label="弹窗数据" class="popupDiv">
|
||||
<el-button @click="tableBtnadd" type="primary">添加行</el-button>
|
||||
<el-table :data="form.popup" border style="width: 600px; margin-top: 0.625rem;"
|
||||
|
|
@ -187,6 +188,23 @@
|
|||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type == 'geojson'" style="width:100%;" label-width="80px" label="显示名称" >
|
||||
<div>
|
||||
<el-input v-model="form.symbol.styleOptions.label.text" style="width:560px;"></el-input>
|
||||
<el-tooltip class="item" effect="dark" content="key：字段中文名称，value：字段英文名称
|
||||
* 1. key:value
|
||||
* 2. key:value@key:value
|
||||
* 3. key:value@,@key:value
|
||||
* 4. @value
|
||||
* 5. @value1@value2
|
||||
* 6. @value1@,@value2
|
||||
* 7. key:value1@value2" placement="top" style="position:absolute;right:-50px;top:12px;">
|
||||
<i class="el-icon-warning-outline" style="color:#fff;">提示 </i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<template v-if="dataType == '面' || dataType == '线' ">
|
||||
<el-form-item v-if="form.popup" label="匹配字段">
|
||||
<el-select style="width: 250px" v-model="columnName" placeholder="请选择匹配颜色字段"
|
||||
|
|
@ -246,6 +264,15 @@
|
|||
</el-table>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
|
||||
<el-form-item label="动态效果" v-if="dataType == '线'">
|
||||
<el-radio-group v-model="form.dynamic" style="margin-top: 12px">
|
||||
<el-radio style="color: #fff" :label="true">开启</el-radio>
|
||||
<el-radio style="color: #fff" :label="false">关闭</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<el-form v-else ref="form" :model="marsform" label-width="80px">
|
||||
<el-form-item label="经度值">
|
||||
|
|
@ -338,6 +365,7 @@
|
|||
|
||||
data() {
|
||||
return {
|
||||
dynamic:false,
|
||||
resource: "样式一",
|
||||
headers: {
|
||||
Authorization: localStorage.getItem("X-Token") || "",
|
||||
|
|
@ -355,7 +383,8 @@
|
|||
roll: "",
|
||||
},
|
||||
form: {
|
||||
styleField: ''
|
||||
styleField: '',
|
||||
dynamic:false,
|
||||
},
|
||||
tubiaourl: [],
|
||||
// 页面数据
|
||||
|
|
@ -746,7 +775,7 @@
|
|||
this.form.center = this.marsform;
|
||||
this.form.popupOptions = "";
|
||||
this.form.popup = this.multipleSelection
|
||||
console.log(this.form)
|
||||
console.log(this.form);
|
||||
update({
|
||||
id: this.tucengId,
|
||||
style: JSON.stringify(this.form),
|
||||
|
|
@ -905,19 +934,19 @@
|
|||
},
|
||||
//修改
|
||||
edit(node, data) {
|
||||
console.log("data:::",data);
|
||||
this.form = {};
|
||||
this.fenleiform = {};
|
||||
this.fenleiname = "";
|
||||
this.tucengId = "";
|
||||
getStyle(data.id).then((res) => {
|
||||
this.tucengId = res.data.data.id;
|
||||
console.log(res.data.data);
|
||||
const a = this.$refs.menuTree.getNode(data.serverName);
|
||||
if (a.data.children === undefined) {
|
||||
console.log("获取的样式", res.data.data);
|
||||
this.form = JSON.parse(res.data.data.attribute);
|
||||
console.log("attribute", this.form);
|
||||
var list
|
||||
if (this.form.popup) {
|
||||
if (this.form && this.form.popup) {
|
||||
list = JSON.parse(res.data.data.properties) || []
|
||||
}
|
||||
getTableName({ id: data.serverStoreId }).then((res) => {
|
||||
|
|
@ -1080,7 +1109,8 @@
|
|||
|
||||
.mars3dbox .bg-purple2 .tucshu {
|
||||
width: 400px;
|
||||
height: 706px;
|
||||
height: calc(100% - 120px);
|
||||
overflow-y:auto;
|
||||
border: 1px solid #777777;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -43,7 +43,7 @@
|
|||
"CraRtGvpNB2xOcYSFTov"
|
||||
]
|
||||
}
|
||||
|
||||
console.log('arr::::',arr)
|
||||
let _this = this;
|
||||
|
||||
this.$refs.fIframe.onload = function () {
|
||||
|
|
|
|||
Loading…
Reference in New Issue