mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'develop' of http://39.106.31.193:9211/xiepufeng/jihe-hs into develop

wangqin
hui 1 year ago
parent
7427642488 e498147220
commit
35e8d43c06
18 changed files with 925 additions and 336 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      package.json
  2. 2
      ruoyi-ui/src/views/JiHeExpressway/components/Teleport.vue
  3. 36
      ruoyi-ui/src/views/JiHeExpressway/index.vue
  4. 545
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/lcz.json
  5. 6
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue
  6. 31
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/loadAMap.js
  7. 24
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/Descriptions.vue
  8. 16
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
  9. 66
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/index.vue
  10. 11
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/mixin.js
  11. 126
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
  12. 140
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
  13. 60
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
  14. 56
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
  15. 47
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/videoStream.js
  16. 35
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
  17. 3
      ruoyi-ui/src/views/JiHeExpressway/utils/common.js
  18. 52
      ruoyi-ui/src/views/JiHeExpressway/utils/enum.js

5
package.json
View File

@ -0,0 +1,5 @@
{
"dependencies": {
"flv.js": "^1.6.2"
}
}

2
ruoyi-ui/src/views/JiHeExpressway/components/Teleport.vue
View File

@ -21,7 +21,7 @@ export default {
this.queryParentDom.appendChild(this.addDom = this.$el);
},
beforeDestroy() {
if (!this.queryParentDom) return;
if (!this.queryParentDom || !this.queryParentDom.contains(this.addDom)) return;
this.queryParentDom.removeChild(this.addDom);
},

36
ruoyi-ui/src/views/JiHeExpressway/index.vue
View File

@ -32,6 +32,41 @@ export default {
};
</script>
<style lang="less">
body {
div {
/* 滚动条整体部分 */
&::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
padding: 15px;
}
/* 滚动条的轨道 */
&::-webkit-scrollbar-track {
background: rgba(17, 72, 90, .4);
border-radius: 4px;
}
/* 滚动条的滑块按钮 */
&::-webkit-scrollbar-thumb {
background: #3785A0;
border-radius: 4px;
}
/* 上下箭头 */
&::-webkit-scrollbar-button {
display: none;
}
/* 滚动条角 */
&::-webkit-scrollbar-corner {
display: none;
}
}
}
</style>
<style scoped lang="less">
.pageBox {
background: #13272F;
@ -69,6 +104,7 @@ export default {
top: -6px;
z-index: -1;
pointer-events: auto;
height: calc(100% + 6px);
}
}

545
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/data/lcz.json
View File

@ -1,161 +1,384 @@
[
{"code":"K54","lng":116.864504,"lat":36.580292},
{"code":"K55","lng":116.857721,"lat":36.580915},
{"code":"K56","lng":116.84603,"lat":36.582315},
{"code":"K57","lng":116.835372,"lat":36.583456},
{"code":"K58","lng":116.823809,"lat":36.582523},
{"code":"K59","lng":116.813668,"lat":36.578892},
{"code":"K60","lng":116.805077,"lat":36.57303},
{"code":"K61","lng":116.798876,"lat":36.565715},
{"code":"K62","lng":116.794871,"lat":36.55731},
{"code":"K63","lng":116.791447,"lat":36.5488},
{"code":"K64","lng":116.786995,"lat":36.540406},
{"code":"K65","lng":116.781607,"lat":36.532641},
{"code":"K66","lng":116.774733,"lat":36.525493},
{"code":"K67","lng":116.767455,"lat":36.51867},
{"code":"K68","lng":116.760581,"lat":36.511521},
{"code":"K69","lng":116.754112,"lat":36.504046},
{"code":"K70","lng":116.747238,"lat":36.497221},
{"code":"K71","lng":116.739556,"lat":36.49072},
{"code":"K72","lng":116.731874,"lat":36.483893},
{"code":"K73","lng":116.725809,"lat":36.476416},
{"code":"K74","lng":116.71934,"lat":36.469262},
{"code":"K75","lng":116.714648,"lat":36.460906},
{"code":"K76","lng":116.709238,"lat":36.453097},
{"code":"K77","lng":116.704245,"lat":36.444952},
{"code":"K78","lng":116.699945,"lat":36.436583},
{"code":"K78","lng":116.696894,"lat":36.428437},
{"code":"K80","lng":116.694674,"lat":36.419397},
{"code":"K81","lng":116.691207,"lat":36.410914},
{"code":"K82","lng":116.683856,"lat":36.403992},
{"code":"K83","lng":116.674701,"lat":36.398969},
{"code":"K84","lng":116.664021,"lat":36.396401},
{"code":"K85","lng":116.653895,"lat":36.392381},
{"code":"K86","lng":116.644645,"lat":36.38743},
{"code":"K87","lng":116.634658,"lat":36.383633},
{"code":"K88","lng":116.623839,"lat":36.381065},
{"code":"K89","lng":116.613991,"lat":36.37738},
{"code":"K90","lng":116.604421,"lat":36.372466},
{"code":"K91","lng":116.596376,"lat":36.366212},
{"code":"K92","lng":116.588952,"lat":36.359622},
{"code":"K93","lng":116.58166,"lat":36.35263},
{"code":"K94","lng":116.572283,"lat":36.348155},
{"code":"K95","lng":116.561518,"lat":36.345358},
{"code":"K96","lng":116.5511,"lat":36.342001},
{"code":"K97","lng":116.543113,"lat":36.335847},
{"code":"K98","lng":116.535473,"lat":36.329413},
{"code":"K99","lng":116.530959,"lat":36.321019},
{"code":"K100","lng":116.524816,"lat":36.313313},
{"code":"K101","lng":116.517853,"lat":36.30658},
{"code":"K102","lng":116.50741,"lat":36.303214},
{"code":"K103","lng":116.498011,"lat":36.298164},
{"code":"K104","lng":116.492789,"lat":36.290588},
{"code":"K105","lng":116.487915,"lat":36.282451},
{"code":"K106","lng":116.48513,"lat":36.273751},
{"code":"K107","lng":116.484434,"lat":36.26477},
{"code":"K108","lng":116.482346,"lat":36.256068},
{"code":"K109","lng":116.479909,"lat":36.247085},
{"code":"K110","lng":116.480953,"lat":36.238381},
{"code":"K111","lng":116.474687,"lat":36.220971},
{"code":"K112","lng":116.474687,"lat":36.220971},
{"code":"K113","lng":116.468073,"lat":36.213388},
{"code":"K114","lng":116.462155,"lat":36.206085},
{"code":"K1150","lng":116.456585,"lat":36.198501},
{"code":"K116","lng":116.454844,"lat":36.189511},
{"code":"K117","lng":116.454322,"lat":36.18052},
{"code":"K118","lng":116.453278,"lat":36.171489},
{"code":"K119","lng":116.450073,"lat":36.163385},
{"code":"K120","lng":116.447643,"lat":36.154871},
{"code":"K121","lng":116.442917,"lat":36.146339},
{"code":"K122","lng":116.441756,"lat":36.137402},
{"code":"K123","lng":116.440466,"lat":36.128509},
{"code":"K124","lng":116.438119,"lat":36.119675},
{"code":"K125","lng":116.43906,"lat":36.110446},
{"code":"K126","lng":116.441559,"lat":36.10191},
{"code":"K127","lng":116.442922,"lat":36.093098},
{"code":"K128","lng":116.4419,"lat":36.084075},
{"code":"K129","lng":116.440991,"lat":36.075077},
{"code":"K130","lng":116.441446,"lat":36.065987},
{"code":"K131","lng":116.444513,"lat":36.057446},
{"code":"K132","lng":116.445182,"lat":36.048615},
{"code":"K133","lng":116.443483,"lat":36.039641},
{"code":"K134","lng":116.439746,"lat":36.031215},
{"code":"K135","lng":116.433857,"lat":36.023613},
{"code":"K136","lng":116.431252,"lat":36.014834},
{"code":"K137","lng":116.431365,"lat":36.014834},
{"code":"K138","lng":116.431139,"lat":36.015009},
{"code":"K139","lng":116.431139,"lat":36.005848},
{"code":"K140","lng":116.428873,"lat":35.996948},
{"code":"K141","lng":116.42302,"lat":35.989299},
{"code":"K142","lng":116.416678,"lat":35.981876},
{"code":"K143","lng":116.412148,"lat":35.973628},
{"code":"K144","lng":116.40875,"lat":35.96492},
{"code":"K145","lng":116.407618,"lat":35.955936},
{"code":"K146","lng":116.406938,"lat":35.946886},
{"code":"K147","lng":116.409203,"lat":35.937992},
{"code":"K148","lng":116.412261,"lat":35.929188},
{"code":"K149","lng":116.415192,"lat":35.920454},
{"code":"K150","lng":116.416236,"lat":35.911326},
{"code":"K151","lng":116.415818,"lat":35.902197},
{"code":"K152","lng":116.413314,"lat":35.893405},
{"code":"K153","lng":116.409974,"lat":35.884612},
{"code":"K154","lng":116.403712,"lat":35.877171},
{"code":"K155","lng":116.397451,"lat":35.869729},
{"code":"K156","lng":116.390771,"lat":35.862527},
{"code":"K157","lng":116.384802,"lat":35.854733},
{"code":"K158","lng":116.381264,"lat":35.846193},
{"code":"K159","lng":116.375815,"lat":35.838318},
{"code":"K160","lng":116.370209,"lat":35.830526},
{"code":"K161","lng":116.366206,"lat":35.822089},
{"code":"K162","lng":116.361747,"lat":35.814167},
{"code":"K163","lng":116.356086,"lat":35.806346},
{"code":"K164","lng":116.348957,"lat":35.799374},
{"code":"K165","lng":116.341619,"lat":35.792402},
{"code":"K166","lng":116.3347,"lat":35.785089},
{"code":"K167","lng":116.326943,"lat":35.778456},
{"code":"K168","lng":116.317299,"lat":35.773863},
{"code":"K169","lng":116.309751,"lat":35.767229},
{"code":"K170","lng":116.30388,"lat":35.759573},
{"code":"K171","lng":116.298219,"lat":35.751746},
{"code":"K172","lng":116.290881,"lat":35.74494},
{"code":"K173","lng":116.282076,"lat":35.739154},
{"code":"K174","lng":116.272431,"lat":35.734389},
{"code":"K175","lng":116.264045,"lat":35.728432},
{"code":"K176","lng":116.257545,"lat":35.720943},
{"code":"K177","lng":116.252886,"lat":35.71273},
{"code":"K178","lng":116.247407,"lat":35.704879},
{"code":"K179","lng":116.241238,"lat":35.697371},
{"code":"K180","lng":116.234196,"lat":35.6904},
{"code":"K181","lng":116.226049,"lat":35.684243},
{"code":"K182","lng":116.217362,"lat":35.678514},
{"code":"K183","lng":116.208758,"lat":35.672627},
{"code":"K184","lng":116.200902,"lat":35.666283},
{"code":"K185","lng":116.194434,"lat":35.658863},
{"code":"K186","lng":116.189724,"lat":35.650712},
{"code":"K187","lng":116.183941,"lat":35.642973},
{"code":"K188","lng":116.176385,"lat":35.636248},
{"code":"K189","lng":116.167679,"lat":35.63058},
{"code":"K190","lng":116.158725,"lat":35.625216},
{"code":"K191","lng":116.151916,"lat":35.617975},
{"code":"K192","lng":116.1452,"lat":35.610178},
{"code":"K193","lng":116.140303,"lat":35.602095},
{"code":"K194","lng":116.137598,"lat":35.593248},
{"code":"K195","lng":116.136944,"lat":35.584263},
{"code":"K196","lng":116.137909,"lat":35.575207},
{"code":"K197","lng":116.139862,"lat":35.566291},
{"code":"K198","lng":116.140001,"lat":35.557251},
{"code":"K199","lng":116.139095,"lat":35.548242},
{"code":"K200","lng":116.136445,"lat":35.539503},
{"code":"K201","lng":116.132262,"lat":35.531164},
{"code":"K202","lng":116.126964,"lat":35.523226},
{"code":"K203","lng":116.120062,"lat":35.516206},
{"code":"K204","lng":116.112765,"lat":35.509378},
{"code":"K205","lng":116.106769,"lat":35.501773},
{"code":"K206","lng":116.101471,"lat":35.493727},
{"code":"K207","lng":116.096033,"lat":35.485894},
{"code":"K208","lng":116.088962,"lat":35.478935},
{"code":"K209","lng":116.08151,"lat":35.472134},
{"code":"K210","lng":116.074572,"lat":35.465123}
]
{
"K55+0": { "lng": 116.858085, "lat": 36.580743 },
"K55+565": { "lng": 116.851819, "lat": 36.581497 },
"K56+0": { "lng": 116.847046, "lat": 36.582167 },
"K56+582": { "lng": 116.840587, "lat": 36.582971 },
"K56+806": { "lng": 116.838086, "lat": 36.583243 },
"K56+994": { "lng": 116.835986, "lat": 36.583361 },
"K57+216": { "lng": 116.833504, "lat": 36.583385 },
"K57+403": { "lng": 116.831414, "lat": 36.583329 },
"K57+595": { "lng": 116.829275, "lat": 36.583156 },
"K57+851": { "lng": 116.826456, "lat": 36.582761 },
"K58+9": { "lng": 116.82473, "lat": 36.582464 },
"K58+221": { "lng": 116.822455, "lat": 36.581941 },
"K58+524": { "lng": 116.819274, "lat": 36.580994 },
"K58+789": { "lng": 116.816579, "lat": 36.580005 },
"K59+98": { "lng": 116.813566, "lat": 36.57864 },
"K59+210": { "lng": 116.812525, "lat": 36.578087 },
"K59+500": { "lng": 116.809892, "lat": 36.576563 },
"K59+778": { "lng": 116.807565, "lat": 36.574903 },
"K60+52": { "lng": 116.805422, "lat": 36.573145 },
"K60+440": { "lng": 116.802665, "lat": 36.570453 },
"K60+823": { "lng": 116.800326, "lat": 36.56757 },
"K61+44": { "lng": 116.799218, "lat": 36.565796 },
"K61+176": { "lng": 116.798531, "lat": 36.564745 },
"K62+36": { "lng": 116.795234, "lat": 36.557483 },
"K63+40": { "lng": 116.791494, "lat": 36.54898 },
"K63+582": { "lng": 116.789466, "lat": 36.544392 },
"K63+985": { "lng": 116.787646, "lat": 36.541076 },
"K64+300": { "lng": 116.78605, "lat": 36.538554 },
"K64+894": { "lng": 116.782863, "lat": 36.533872 },
"K65+300": { "lng": 116.780402, "lat": 36.530811 },
"K65+843": { "lng": 116.776858, "lat": 36.52685 },
"K66+270": { "lng": 116.773773, "lat": 36.523927 },
"K66+825": { "lng": 116.769683, "lat": 36.520233 },
"K67+240": { "lng": 116.766404, "lat": 36.517598 },
"K67+803": { "lng": 116.76247, "lat": 36.513646 },
"K68+148": { "lng": 116.76024, "lat": 36.511116 },
"K68+300": { "lng": 116.759303, "lat": 36.509981 },
"K68+994": { "lng": 116.755204, "lat": 36.504684 },
"K69+330": { "lng": 116.753116, "lat": 36.502173 },
"K69+867": { "lng": 116.749683, "lat": 36.498211 },
"K70+330": { "lng": 116.746341, "lat": 36.495033 },
"K71+16": { "lng": 116.741174, "lat": 36.490483 },
"K71+330": { "lng": 116.738695, "lat": 36.488489 },
"K72+330": { "lng": 116.731022, "lat": 36.481963 },
"K73+112": { "lng": 116.725641, "lat": 36.476429 },
"K73+500": { "lng": 116.723391, "lat": 36.473447 },
"K74+565": { "lng": 116.717441, "lat": 36.465165 },
"K75+500": { "lng": 116.712405, "lat": 36.4578 },
"K77+260": { "lng": 116.70341, "lat": 36.443765 },
"K78+300": { "lng": 116.699772, "lat": 36.434892 },
"K78+900": { "lng": 116.698353, "lat": 36.429623 },
"K79+912": { "lng": 116.695347, "lat": 36.420863 },
"K80+360": { "lng": 116.694128, "lat": 36.41696 },
"K80+777": { "lng": 116.692337, "lat": 36.413506 },
"K81+17": { "lng": 116.691115, "lat": 36.411586 },
"K81+350": { "lng": 116.689137, "lat": 36.409058 },
"K81+687": { "lng": 116.686751, "lat": 36.406717 },
"K82+35": { "lng": 116.684006, "lat": 36.404501 },
"K82+464": { "lng": 116.680347, "lat": 36.402012 },
"K82+849": { "lng": 116.676666, "lat": 36.400222 },
"K83+32": { "lng": 116.674849, "lat": 36.399466 },
"K83+391": { "lng": 116.671145, "lat": 36.398242 },
"K83+889": { "lng": 116.665886, "lat": 36.396791 },
"K84+30": { "lng": 116.664403, "lat": 36.396359 },
"K84+239": { "lng": 116.662229, "lat": 36.395677 },
"K84+508": { "lng": 116.659487, "lat": 36.394693 },
"K84+640": { "lng": 116.658165, "lat": 36.394165 },
"K85+133": { "lng": 116.653361, "lat": 36.392006 },
"K85+815": { "lng": 116.647178, "lat": 36.388439 },
"K86+183": { "lng": 116.643702, "lat": 36.386687 },
"K86+520": { "lng": 116.640386, "lat": 36.385256 },
"K86+680": { "lng": 116.638794, "lat": 36.384615 },
"K87+139": { "lng": 116.634003, "lat": 36.383166 },
"K87+695": { "lng": 116.628006, "lat": 36.381894 },
"K88+251": { "lng": 116.622072, "lat": 36.38045 },
"K88+680": { "lng": 116.617665, "lat": 36.378947 },
"K88+974": { "lng": 116.614735, "lat": 36.377777 },
"K89+279": { "lng": 116.61178, "lat": 36.376424 },
"K89+680": { "lng": 116.607975, "lat": 36.374521 },
"K90+29": { "lng": 116.604872, "lat": 36.372632 },
"K90+600": { "lng": 116.6001, "lat": 36.369228 },
"K91+14": { "lng": 116.596889, "lat": 36.366561 },
"K91+480": { "lng": 116.593544, "lat": 36.363356 },
"K91+964": { "lng": 116.590299, "lat": 36.359881 },
"K92+266": { "lng": 116.588125, "lat": 36.357807 },
"K92+430": { "lng": 116.586921, "lat": 36.356703 },
"K92+862": { "lng": 116.583435, "lat": 36.354029 },
"K93+266": { "lng": 116.579921, "lat": 36.351764 },
"K93+480": { "lng": 116.577871, "lat": 36.350779 },
"K93+832": { "lng": 116.57444, "lat": 36.349234 },
"K94+64": { "lng": 116.572087, "lat": 36.34836 },
"K94+370": { "lng": 116.568887, "lat": 36.347408 },
"K95+155": { "lng": 116.560609, "lat": 36.345114 },
"K95+682": { "lng": 116.555179, "lat": 36.343298 },
"K96+77": { "lng": 116.551328, "lat": 36.341575 },
"K96+426": { "lng": 116.548083, "lat": 36.339838 },
"K96+930": { "lng": 116.54372, "lat": 36.33699 },
"K97+430": { "lng": 116.539829, "lat": 36.333767 },
"K97+930": { "lng": 116.536371, "lat": 36.330245 },
"K98+471": { "lng": 116.533253, "lat": 36.326084 },
"K99+20": { "lng": 116.530339, "lat": 36.32175 },
"K100+240": { "lng": 116.523922, "lat": 36.312082 },
"K100+310": { "lng": 116.523458, "lat": 36.311577 },
"K100+590": { "lng": 116.521715, "lat": 36.309494 },
"K100+871": { "lng": 116.519489, "lat": 36.307724 },
"K101+58": { "lng": 116.517924, "lat": 36.306609 },
"K101+300": { "lng": 116.515728, "lat": 36.305348 },
"K101+662": { "lng": 116.51211, "lat": 36.303898 },
"K102+18": { "lng": 116.508405, "lat": 36.30275 },
"K102+287": { "lng": 116.505682, "lat": 36.30174 },
"K102+681": { "lng": 116.50197, "lat": 36.299851 },
"K103+9": { "lng": 116.499248, "lat": 36.297883 },
"K103+320": { "lng": 116.497006, "lat": 36.295754 },
"K103+520": { "lng": 116.495805, "lat": 36.294237 },
"K103+854": { "lng": 116.494124, "lat": 36.291559 },
"K104+140": { "lng": 116.492843, "lat": 36.289204 },
"K105+82": { "lng": 116.48852, "lat": 36.281492 },
"K105+410": { "lng": 116.487053, "lat": 36.278795 },
"K105+711": { "lng": 116.485989, "lat": 36.276228 },
"K105+840": { "lng": 116.485657, "lat": 36.275116 },
"K106+119": { "lng": 116.485103, "lat": 36.272652 },
"K106+540": { "lng": 116.484732, "lat": 36.268883 },
"K107+7": { "lng": 116.484467, "lat": 36.264695 },
"K107+565": { "lng": 116.483309, "lat": 36.259766 },
"K108+477": { "lng": 116.480606, "lat": 36.251867 },
"K108+874": { "lng": 116.479842, "lat": 36.248351 },
"K109+149": { "lng": 116.479733, "lat": 36.245886 },
"K109+480": { "lng": 116.480228, "lat": 36.24294 },
"K109+753": { "lng": 116.48087, "lat": 36.240542 },
"K110+64": { "lng": 116.48155, "lat": 36.237799 },
"K110+300": { "lng": 116.481872, "lat": 36.235691 },
"K110+583": { "lng": 116.481836, "lat": 36.23315 },
"K110+911": { "lng": 116.481327, "lat": 36.23023 },
"K111+107": { "lng": 116.480723, "lat": 36.228542 },
"K111+394": { "lng": 116.479561, "lat": 36.226142 },
"K111+641": { "lng": 116.478259, "lat": 36.224192 },
"K112+57": { "lng": 116.475562, "lat": 36.221153 },
"K112+980": { "lng": 116.469395, "lat": 36.21452 },
"K113+760": { "lng": 116.46422, "lat": 36.208894 },
"K114+427": { "lng": 116.4598, "lat": 36.204074 },
"K114+582": { "lng": 116.458863, "lat": 36.202905 },
"K114+931": { "lng": 116.457118, "lat": 36.200103 },
"K115+30": { "lng": 116.456694, "lat": 36.199286 },
"K115+391": { "lng": 116.455378, "lat": 36.196218 },
"K115+815": { "lng": 116.45465, "lat": 36.192457 },
"K116+837": { "lng": 116.454353, "lat": 36.183281 },
"K117+770": { "lng": 116.454315, "lat": 36.174901 },
"K118+249": { "lng": 116.454215, "lat": 36.1706 },
"K118+581": { "lng": 116.453775, "lat": 36.167636 },
"K118+866": { "lng": 116.453188, "lat": 36.165118 },
"K119+377": { "lng": 116.451681, "lat": 36.160688 },
"K119+855": { "lng": 116.449634, "lat": 36.156722 },
"K120+181": { "lng": 116.447906, "lat": 36.154151 },
"K120+553": { "lng": 116.445768, "lat": 36.151286 },
"K120+855": { "lng": 116.444221, "lat": 36.148876 },
"K121+117": { "lng": 116.443192, "lat": 36.146676 },
"K121+401": { "lng": 116.442376, "lat": 36.144211 },
"K121+615": { "lng": 116.442009, "lat": 36.14231 },
"K122+33": { "lng": 116.441769, "lat": 36.138558 },
"K122+324": { "lng": 116.441823, "lat": 36.135945 },
"K122+515": { "lng": 116.441686, "lat": 36.134233 },
"K122+843": { "lng": 116.441286, "lat": 36.131307 },
"K123+304": { "lng": 116.440083, "lat": 36.127281 },
"K123+574": { "lng": 116.439241, "lat": 36.124951 },
"K123+947": { "lng": 116.438387, "lat": 36.121671 },
"K124+129": { "lng": 116.438184, "lat": 36.12004 },
"K124+349": { "lng": 116.437997, "lat": 36.118065 },
"K124+505": { "lng": 116.43798, "lat": 36.116666 },
"K124+832": { "lng": 116.438151, "lat": 36.11373 },
"K125+64": { "lng": 116.438532, "lat": 36.111672 },
"K125+296": { "lng": 116.439045, "lat": 36.109629 },
"K125+440": { "lng": 116.439406, "lat": 36.10837 },
"K126+33": { "lng": 116.441175, "lat": 36.103239 },
"K126+335": { "lng": 116.441821, "lat": 36.100581 },
"K126+690": { "lng": 116.442366, "lat": 36.097421 },
"K127+237": { "lng": 116.442782, "lat": 36.092516 },
"K127+730": { "lng": 116.442605, "lat": 36.08809 },
"K128+180": { "lng": 116.442109, "lat": 36.084072 },
"K128+730": { "lng": 116.441173, "lat": 36.079187 },
"K129+512": { "lng": 116.44081, "lat": 36.072169 },
"K129+710": { "lng": 116.441053, "lat": 36.070404 },
"K129+948": { "lng": 116.441215, "lat": 36.068272 },
"K130+341": { "lng": 116.441892, "lat": 36.064784 },
"K130+550": { "lng": 116.442369, "lat": 36.062951 },
"K131+140": { "lng": 116.44386, "lat": 36.05779 },
"K131+587": { "lng": 116.444699, "lat": 36.053834 },
"K131+868": { "lng": 116.444946, "lat": 36.051321 },
"K132+136": { "lng": 116.445025, "lat": 36.048914 },
"K132+557": { "lng": 116.444729, "lat": 36.045142 },
"K132+880": { "lng": 116.44423, "lat": 36.042271 },
"K133+268": { "lng": 116.44323, "lat": 36.038883 },
"K133+461": { "lng": 116.442121, "lat": 36.0374 },
"K133+528": { "lng": 116.441679, "lat": 36.036915 },
"K133+961": { "lng": 116.440131, "lat": 36.033228 },
"K134+380": { "lng": 116.438225, "lat": 36.029792 },
"K134+453": { "lng": 116.437925, "lat": 36.029179 },
"K134+975": { "lng": 116.435073, "lat": 36.025093 },
"K135+160": { "lng": 116.434155, "lat": 36.023607 },
"K135+353": { "lng": 116.433359, "lat": 36.02201 },
"K135+515": { "lng": 116.432763, "lat": 36.020636 },
"K135+773": { "lng": 116.432007, "lat": 36.018402 },
"K136+82": { "lng": 116.431394, "lat": 36.015675 },
"K136+255": { "lng": 116.431198, "lat": 36.014131 },
"K136+583": { "lng": 116.431108, "lat": 36.011183 },
"K136+984": { "lng": 116.431371, "lat": 36.007589 },
"K137+190": { "lng": 116.431371, "lat": 36.005739 },
"K137+424": { "lng": 116.431127, "lat": 36.003647 },
"K137+698": { "lng": 116.430659, "lat": 36.001214 },
"K138+203": { "lng": 116.428788, "lat": 35.996934 },
"K138+513": { "lng": 116.427265, "lat": 35.994433 },
"K139+230": { "lng": 116.422837, "lat": 35.989076 },
"K139+784": { "lng": 116.419435, "lat": 35.984939 },
"K140+253": { "lng": 116.41674, "lat": 35.981333 },
"K140+420": { "lng": 116.41581, "lat": 35.980034 },
"K141+120": { "lng": 116.412642, "lat": 35.974296 },
"K141+980": { "lng": 116.40972, "lat": 35.966937 },
"K143+0": { "lng": 116.407667, "lat": 35.957925 },
"K143+763": { "lng": 116.407351, "lat": 35.95108 },
"K144+280": { "lng": 116.40757, "lat": 35.946438 },
"K144+454": { "lng": 116.407745, "lat": 35.94488 },
"K144+980": { "lng": 116.408522, "lat": 35.940193 },
"K145+290": { "lng": 116.409185, "lat": 35.937461 },
"K146+450": { "lng": 116.412368, "lat": 35.927365 },
"K147+247": { "lng": 116.414646, "lat": 35.920443 },
"K147+450": { "lng": 116.415195, "lat": 35.918667 },
"K147+715": { "lng": 116.415759, "lat": 35.916342 },
"K148+135": { "lng": 116.416438, "lat": 35.912608 },
"K148+390": { "lng": 116.416647, "lat": 35.910321 },
"K148+862": { "lng": 116.416647, "lat": 35.906085 },
"K149+246.8": { "lng": 116.416403, "lat": 35.902639 },
"K149+707": { "lng": 116.415671, "lat": 35.898544 },
"K150+400": { "lng": 116.413826, "lat": 35.892499 },
"K150+845": { "lng": 116.41214, "lat": 35.888746 },
"K151+273": { "lng": 116.410209, "lat": 35.885233 },
"K151+665": { "lng": 116.408183, "lat": 35.882115 },
"K152+79": { "lng": 116.405688, "lat": 35.878998 },
"K152+680": { "lng": 116.401724, "lat": 35.874657 },
"K153+620": { "lng": 116.395359, "lat": 35.867971 },
"K154+670": { "lng": 116.388606, "lat": 35.860293 },
"K154+869": { "lng": 116.387499, "lat": 35.858745 },
"K155+231": { "lng": 116.385733, "lat": 35.855828 },
"K155+600": { "lng": 116.384172, "lat": 35.852764 },
"K156+223": { "lng": 116.381659, "lat": 35.847554 },
"K156+688": { "lng": 116.379778, "lat": 35.843662 },
"K157+445": { "lng": 116.375531, "lat": 35.837797 },
"K158+192": { "lng": 116.371476, "lat": 35.83195 },
"K158+650": { "lng": 116.369466, "lat": 35.828168 },
"K159+420": { "lng": 116.366228, "lat": 35.821773 },
"K159+675": { "lng": 116.365176, "lat": 35.819648 },
"K160+360": { "lng": 116.361809, "lat": 35.813956 },
"K160+888": { "lng": 116.358905, "lat": 35.809836 },
"K161+390": { "lng": 116.35578, "lat": 35.806107 },
"K161+788": { "lng": 116.353142, "lat": 35.80324 },
"K162+390": { "lng": 116.348823, "lat": 35.799117 },
"K163+423": { "lng": 116.341069, "lat": 35.792296 },
"K163+640": { "lng": 116.339577, "lat": 35.790773 },
"K164+47": { "lng": 116.336928, "lat": 35.787813 },
"K164+279": { "lng": 116.335527, "lat": 35.786069 },
"K164+504": { "lng": 116.334118, "lat": 35.784398 },
"K164+640": { "lng": 116.333187, "lat": 35.783435 },
"K164+920": { "lng": 116.331153, "lat": 35.781534 },
"K165+210": { "lng": 116.328834, "lat": 35.77973 },
"K165+467": { "lng": 116.326623, "lat": 35.77828 },
"K165+635": { "lng": 116.325107, "lat": 35.777407 },
"K166+297": { "lng": 116.318904, "lat": 35.774246 },
"K166+650": { "lng": 116.315829, "lat": 35.772284 },
"K166+965": { "lng": 116.313253, "lat": 35.770377 },
"K167+280": { "lng": 116.310939, "lat": 35.768261 },
"K167+674": { "lng": 116.30834, "lat": 35.765423 },
"K167+978": { "lng": 116.306609, "lat": 35.763079 },
"K168+500": { "lng": 116.303998, "lat": 35.758894 },
"K169+13": { "lng": 116.30124, "lat": 35.754863 },
"K169+530": { "lng": 116.297954, "lat": 35.751061 },
"K169+892": { "lng": 116.295425, "lat": 35.748552 },
"K170+300": { "lng": 116.29233, "lat": 35.745881 },
"K170+587": { "lng": 116.290025, "lat": 35.744112 },
"K170+955": { "lng": 116.286888, "lat": 35.742003 },
"K171+265": { "lng": 116.284116, "lat": 35.740356 },
"K171+962": { "lng": 116.277628, "lat": 35.736966 },
"K172+330": { "lng": 116.274297, "lat": 35.735067 },
"K172+680": { "lng": 116.271262, "lat": 35.733114 },
"K173+7": { "lng": 116.268564, "lat": 35.73115 },
"K173+330": { "lng": 116.266041, "lat": 35.729097 },
"K173+916": { "lng": 116.261767, "lat": 35.72514 },
"K174+480": { "lng": 116.258178, "lat": 35.720996 },
"K174+952": { "lng": 116.255542, "lat": 35.717335 },
"K175+480": { "lng": 116.252883, "lat": 35.713114 },
"K176+167": { "lng": 116.249416, "lat": 35.707627 },
"K176+350": { "lng": 116.248436, "lat": 35.706184 },
"K176+824": { "lng": 116.245759, "lat": 35.702527 },
"K177+285": { "lng": 116.2429, "lat": 35.699099 },
"K177+785": { "lng": 116.239541, "lat": 35.695528 },
"K178+200": { "lng": 116.236583, "lat": 35.692679 },
"K178+696": { "lng": 116.23289, "lat": 35.689381 },
"K178+950": { "lng": 116.230875, "lat": 35.687792 },
"K179+263": { "lng": 116.228354, "lat": 35.685869 },
"K179+534": { "lng": 116.226088, "lat": 35.684279 },
"K179+626": { "lng": 116.225306, "lat": 35.683756 },
"K180+627": { "lng": 116.21678, "lat": 35.678024 },
"K181+605": { "lng": 116.208457, "lat": 35.67242 },
"K181+838": { "lng": 116.206501, "lat": 35.671057 },
"K182+102": { "lng": 116.204428, "lat": 35.669383 },
"K182+378": { "lng": 116.202332, "lat": 35.667578 },
"K182+641": { "lng": 116.20042, "lat": 35.665792 },
"K182+765": { "lng": 116.199574, "lat": 35.664916 },
"K183+23": { "lng": 116.197869, "lat": 35.663054 },
"K183+353": { "lng": 116.195871, "lat": 35.660571 },
"K183+548": { "lng": 116.19476, "lat": 35.659074 },
"K183+800": { "lng": 116.193445, "lat": 35.657076 },
"K184+67": { "lng": 116.192156, "lat": 35.654922 },
"K184+477": { "lng": 116.190325, "lat": 35.651555 },
"K184+750": { "lng": 116.188981, "lat": 35.649362 },
"K185+134": { "lng": 116.186866, "lat": 35.646375 },
"K185+436": { "lng": 116.185049, "lat": 35.6441 },
"K185+858": { "lng": 116.182232, "lat": 35.641081 },
"K186+168": { "lng": 116.179999, "lat": 35.638974 },
"K186+446": { "lng": 116.177848, "lat": 35.637186 },
"K186+617": { "lng": 116.176491, "lat": 35.636111 },
"K186+768": { "lng": 116.175258, "lat": 35.635205 },
"K187+89": { "lng": 116.172528, "lat": 35.633363 },
"K187+300": { "lng": 116.17067, "lat": 35.632216 },
"K187+908": { "lng": 116.165049, "lat": 35.629223 },
"K188+206": { "lng": 116.162375, "lat": 35.627656 },
"K188+486": { "lng": 116.160021, "lat": 35.626017 },
"K188+694": { "lng": 116.158368, "lat": 35.624714 },
"K188+842": { "lng": 116.15725, "lat": 35.623739 },
"K188+995": { "lng": 116.156155, "lat": 35.622691 },
"K189+707": { "lng": 116.151438, "lat": 35.617576 },
"K190+20": { "lng": 116.149379, "lat": 35.615315 },
"K190+360": { "lng": 116.147183, "lat": 35.612834 },
"K190+740": { "lng": 116.144994, "lat": 35.609919 },
"K190+911": { "lng": 116.144064, "lat": 35.608581 },
"K191+246": { "lng": 116.142408, "lat": 35.605893 },
"K191+484": { "lng": 116.141405, "lat": 35.603921 },
"K191+735": { "lng": 116.140418, "lat": 35.601813 },
"K192+83": { "lng": 116.139228, "lat": 35.598845 },
"K192+376": { "lng": 116.138422, "lat": 35.596298 },
"K192+740": { "lng": 116.137651, "lat": 35.593086 },
"K193+164": { "lng": 116.13704, "lat": 35.589307 },
"K193+656": { "lng": 116.136812, "lat": 35.584889 },
"K193+740": { "lng": 116.136839, "lat": 35.584141 },
"K193+966": { "lng": 116.136931, "lat": 35.582102 },
"K194+215": { "lng": 116.137129, "lat": 35.579875 },
"K194+579": { "lng": 116.137654, "lat": 35.576637 },
"K194+980": { "lng": 116.138418, "lat": 35.57309 },
"K195+447": { "lng": 116.139262, "lat": 35.568951 },
"K195+691": { "lng": 116.139599, "lat": 35.566774 },
"K195+735": { "lng": 116.139629, "lat": 35.566379 },
"K196+56": { "lng": 116.139919, "lat": 35.563509 },
"K196+214": { "lng": 116.139996, "lat": 35.56209 },
"K196+589": { "lng": 116.140037, "lat": 35.558719 },
"K196+970": { "lng": 116.13991, "lat": 35.5553 },
"K197+467": { "lng": 116.139347, "lat": 35.550857 },
"K197+900": { "lng": 116.138555, "lat": 35.547024 },
"K198+460": { "lng": 116.137181, "lat": 35.542123 },
"K198+900": { "lng": 116.135736, "lat": 35.538348 },
"K199+495": { "lng": 116.13342, "lat": 35.533345 },
"K199+800": { "lng": 116.131944, "lat": 35.530886 },
"K200+56": { "lng": 116.130753, "lat": 35.528796 },
"K200+382": { "lng": 116.128974, "lat": 35.526253 },
"K200+700": { "lng": 116.127123, "lat": 35.523828 },
"K200+981": { "lng": 116.125406, "lat": 35.521723 },
"K201+289": { "lng": 116.123419, "lat": 35.519481 },
"K201+497": { "lng": 116.122015, "lat": 35.518007 },
"K201+735": { "lng": 116.120279, "lat": 35.516407 },
"K202+533": { "lng": 116.114505, "lat": 35.510996 },
"K202+630": { "lng": 116.113855, "lat": 35.510307 },
"K202+976": { "lng": 116.111552, "lat": 35.50783 },
"K203+536": { "lng": 116.108064, "lat": 35.503676 },
"K203+705": { "lng": 116.1071, "lat": 35.502374 },
"K204+121": { "lng": 116.10487, "lat": 35.499111 },
"K204+619": { "lng": 116.102413, "lat": 35.495111 },
"K204+780": { "lng": 116.101693, "lat": 35.493792 },
"K205+383": { "lng": 116.098413, "lat": 35.489082 },
"K205+770": { "lng": 116.096012, "lat": 35.486209 },
"K206+145": { "lng": 116.093558, "lat": 35.483499 },
"K206+694": { "lng": 116.08973, "lat": 35.479674 },
"K207+196": { "lng": 116.086239, "lat": 35.47617 },
"K207+950": { "lng": 116.080978, "lat": 35.470926 },
"K208+194": { "lng": 116.079281, "lat": 35.469224 },
"K208+622": { "lng": 116.076293, "lat": 35.466252 },
"K209+147": { "lng": 116.072668, "lat": 35.462576 }
}

6
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/index.vue
View File

@ -9,7 +9,7 @@ import { onceObserver } from "@screen/utils/resizeObserver";
import { loadAMap } from "./loadAMap";
const acData = require("./data/ac.json");
const lczData = require("./data/lcz.json");
const lcz = require("./data/lcz.json");
export default {
name: "AMapContainer",
@ -84,8 +84,8 @@ export default {
//济菏高速
let lczDatas = [];
for (let i = 0; i < lczData.length; i++) {
lczDatas.push([lczData[i].lng, lczData[i].lat]);
for (let key in lcz) {
lczDatas.push([lcz[key].lng, lcz[key].lat]);
}
let jhgsPl = drawingLine(this.AMap, lczDatas, 3);

31
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/AMapContainer/loadAMap.js
View File

@ -1,4 +1,5 @@
import AMapLoader from "@amap/amap-jsapi-loader";
// import { delay } from "@screen/utils/common";
let LoadAMap;
@ -6,20 +7,26 @@ export function loadAMap() {
if (LoadAMap) return LoadAMap;
try {
return AMapLoader.load({
key: "3b5479d9ad9f01d138fef5e70daed7bd", // 申请好的Web端开发者Key，首次调用 load 时必填
// key: "b8053e4abb974f8a4346209ff5af93e9", // 申请好的Web端开发者Key，首次调用 load 时必填
// version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.then((AMap) => {
console.log("地图加载成功");
return new Promise(async (resolve, reject) => {
// await delay(1500);
return (LoadAMap = AMap);
AMapLoader.load({
key: "3b5479d9ad9f01d138fef5e70daed7bd", // 申请好的Web端开发者Key，首次调用 load 时必填
// key: "b8053e4abb974f8a4346209ff5af93e9", // 申请好的Web端开发者Key，首次调用 load 时必填
// version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
// plugins: ["AMap.MarkerCluster"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
plugins: ["AMap.MarkerClusterer"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
})
.catch((e) => {
console.log("地图加载失败", e);
});
.then((AMap) => {
console.log("地图加载成功");
resolve((LoadAMap = AMap));
})
.catch((e) => {
reject();
console.log("地图加载失败", e);
});
});
} catch (error) {
console.log(
"%c [ try catch 地图加载失败 ]-27-「loadAMap.js」",

24
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/Descriptions.vue
View File

@ -3,21 +3,21 @@
<p class="desc-item">
<span>设备类型：</span>
<span>
球机
{{ cameraType || '-' }}
<img src="@screen/images/dialog/icon-control.png">
</span>
</p>
<p class="desc-item">
<span>道路名称：</span>
<span>G35济菏高速</span>
<span>{{ data.road || '-' }}</span>
</p>
<p class="desc-item">
<span>所属机构：</span>
<span>山东高速济南发展公司</span>
<span>{{ data.deptName || '-' }}</span>
</p>
<p class="desc-item">
<span>设备桩号：</span>
<span>K094+079</span>
<span>{{ data.pileNum || '-' }}</span>
</p>
<p class="desc-item">
<span>上行相机：</span>
@ -35,7 +35,7 @@
</p>
<p class="desc-item singleline">
<span>设备状态：</span>
<span :style="{ color: '#19E1B1' }">在线</span>
<span :style="{ color: statusEnum.color || '#19E1B1' }">{{ statusEnum.text }}</span>
</p>
<p class="desc-item singleline">
<span>状态更新时间:</span>
@ -45,8 +45,22 @@
</template>
<script>
import { CameraStatusEnum, CameraControlTypeEnum } from "@screen/utils/enum.js"
export default {
name: 'Descriptions',
props: {
data: {
type: Object,
default: () => ({})
}
},
data() {
return {
statusEnum: CameraStatusEnum[this.data.status] || {},
cameraType: CameraControlTypeEnum[this.data.ptzCtrl]?.text
}
}
}
</script>

16
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/Camera/index.vue
View File

@ -1,16 +1,16 @@
<template>
<Dialog v-model="obverseVisible" title="摄像机 G35 K094+079 下行（可控）">
<Dialog v-model="obverseVisible" :title="dialogData.camName">
<div class="Camera">
<div class="icon-content">
<img src="@screen/images/dialog/icon-photo.png" />
<img src="@screen/images/dialog/icon-video.png" />
</div>
<div class="video-presentation"></div>
<video controls class="video-stream" ref="videoContainerRef" />
<ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs">
<ElTabPane label="详细设计" name="first">
<Descriptions />
<Descriptions :data="dialogData" />
</ElTabPane>
<ElTabPane label="摄相机参数" name="second">摄相机参数</ElTabPane>
</ElTabs>
@ -26,6 +26,7 @@
<script>
import Dialog from "@screen/components/Dialog/index.vue";
import Button from "@screen/components/Buttons/Button.vue"
import { openVideoStream } from "@screen/pages/Home/components/RoadAndEvents/utils/videoStream.js"
import Descriptions from "./Descriptions.vue"
import { dialogDelayVisible } from "./../mixin"
@ -43,6 +44,11 @@ export default {
activeName: 'first'
}
},
mounted() {
this.$nextTick(() => {
openVideoStream(this.dialogData.camId, this.$refs.videoContainerRef)
})
},
methods: {
handleClickTabs() { }
}
@ -67,11 +73,11 @@ export default {
}
}
.video-presentation {
.video-stream {
width: 100%;
height: 216px;
margin-top: 10px;
background: #00ebc1;
// background: #00ebc1;
img {
width: 100%;

66
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/ControlCamera/index.vue
View File

@ -14,13 +14,14 @@
<div class="btn">全屏</div>
</div>
</div>
<video controls class="videoStream" ref="videoContainerRef" />
</div>
<div class="content">
<div class="left">
<p class="desc-item">
<span>设备名称: </span>
<span>疲劳唤醒设备1</span>
<span>{{ dialogData.camName || '-' }}</span>
</p>
<p class="desc-item">
<span>设备编号: </span>
@ -29,42 +30,42 @@
<div>
<p class="desc-item">
<span>设备桩号: </span>
<span>k097+900</span>
<span>{{ dialogData.pileNum || '-' }}</span>
</p>
<p class="desc-item">
<span>方向: </span>
<span class="color1">菏泽</span>
<span class="color1">{{ cameraDirection || '-' }}</span>
</p>
</div>
<p class="desc-item">
<span>经/纬度: </span>
<span>117.071152 / 35.910659</span>
<span>{{ dialogData.camLong || '-' }} / {{ dialogData.camLat || '-' }}</span>
</p>
<p class="desc-item">
<span>道路名称: </span>
<span>G35济菏告诉</span>
<span>{{ dialogData.road }}</span>
</p>
<p class="desc-item">
<span>道路名称: </span>
<span class="color1">正常</span>
<span>设备状态: </span>
<span class="color1">{{ statusEnum.text || '-' }}</span>
</p>
</div>
<div class="dash-line"></div>
<div class="right">
<div class="direction">
<img class="top" src="./images/top.svg">
<img class="right" src="./images/right.svg">
<img class="top" src="./images/top.svg" @click="controlClick(21)">
<img class="right" src="./images/right.svg" @click="controlClick(24)">
<div class="center"></div>
<img class="bottom" src="./images/bottom.svg">
<img class="left" src="./images/left.svg">
<img class="bottom" src="./images/bottom.svg" @click="controlClick(22)">
<img class="left" src="./images/left.svg" @click="controlClick(23)">
</div>
<div class="options">
<div v-for="item in options" :key="item.key">
<img src="./images/sub.svg">
<img src="./images/sub.svg" @click="controlClick(item.sub)">
<span>{{ item.label }}</span>
<img src="./images/add.svg">
<img src="./images/add.svg" @click="controlClick(item.add)">
</div>
</div>
</div>
@ -81,6 +82,10 @@
import Dialog from "@screen/components/Dialog/index.vue"
import Button from "@screen/components/Buttons/Button.vue"
import { dialogDelayVisible } from "./../mixin"
import { CameraStatusEnum, CameraDirectionEnum } from "@screen/utils/enum.js"
import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"
import { throttle } from "lodash"
import { openVideoStream } from "@screen/pages/Home/components/RoadAndEvents/utils/videoStream.js"
export default {
name: 'ControlCamera',
@ -91,22 +96,40 @@ export default {
},
data() {
return {
statusEnum: CameraStatusEnum[this.dialogData.status] || {},
cameraDirection: CameraDirectionEnum[this.dialogData.camOrientation]?.text,
options: [
{
label: "变倍",
key: "zoom"
key: "zoom",
add: "12",
sub: "11"
},
{
label: "光圈",
key: "aperture"
key: "aperture",
add: "15",
sub: "16"
},
{
label: "聚焦",
key: "focus"
key: "focus",
add: "13",
sub: "14"
},
]
}
},
mounted() {
this.$nextTick(() => {
openVideoStream(this.dialogData.camId, this.$refs.videoContainerRef)
})
},
methods: {
controlClick: throttle(function (type) {
controlCamera(this.dialogData.camId, type)
}, 360)
}
}
</script>
@ -126,9 +149,18 @@ export default {
.camera-video {
position: relative;
flex: 1;
background-color: #19E1B1;
// background-color: #19E1B1;
.videoStream {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.control-btns {
z-index: 1;
position: absolute;
padding: 6px 9px;
width: 100%;

11
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/mixin.js
View File

@ -1,9 +1,10 @@
export const dialogDelayVisible = {
// props: {
// visible: {
// default: false,
// },
// },
props: {
dialogData: {
type: Object,
default: () => ({}),
},
},
data() {
return {
visibleData: false,

126
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/index.vue
View File

@ -6,38 +6,36 @@
{{ layer.title }}
</div>
</div>
<!-- <div class="tabs-content"> -->
<!-- <TransitionGroup name="fade-group" tag="div" class="absoluteBody"> -->
<!-- group -->
<TransitionGroup name="fade-group" tag="div" class="tabs-content">
<div class="device-item" v-for="(item, index) in tabContentData" :key="item.id" @click="handleDevice(item)"
:style="getStart(index)">
<Transition name="fade">
<img v-if="!item.status" class="device-icon" key="normal"
:src="require(`@screen/images/layer/${active}/${item.title}.svg`)" />
<img v-else class="device-icon" key="fault"
:src="require(`@screen/images/layer/${active}/${item.title}${item.status}.svg`)" />
</Transition>
<div class="device-icon"
:style="{ backgroundImage: `url(${require(`@screen/images/layer/${active}/${item.title}${item.status}.svg`)})` }" />
<span>{{ item.title }}</span>
</div>
</TransitionGroup>
<!-- </div> -->
<div class="cleared-btn" @click="handleCleared">
<img src="@screen/images/icon/icon_006.png" />
<span>清空图层</span>
<div class="bottom">
<div class="cleared-btn" @click="handleCleared">
<img src="@screen/images/icon/icon_006.png" />
<span>清空图层</span>
</div>
</div>
<!-- 摄像机设备 控制 弹窗 球机 可打开-->
<!-- <ControlCamera :data="cameraDialogConfig.data" :visible="cameraDialogConfig.visibleType === 0" /> -->
<!-- 摄像机 G35 K094+079 下行（可控） 枪机 可打开-->
<!-- <Camera :data="cameraDialogConfig.data" :visible="cameraDialogConfig.visibleType === 1" /> -->
<component :data="cameraDialogConfig.data" :is="cameraDialogConfig.component" @change="handleCameraChange" />
<component :dialogData="cameraDialogConfig.data" :is="cameraDialogConfig.component" @change="handleCameraChange" />
</div>
</template>
<script>
import { getLayerData } from "./utils/layerImages";
import { debounce } from "lodash";
import { eventMap } from "./utils/buttonEvent";
import { eventMap, cacheRemoveFunc } from "./utils/buttonEvent";
import ControlCamera from "./../Dialogs/ControlCamera/index.vue"
import Camera from "./../Dialogs/Camera/index.vue";
@ -56,15 +54,19 @@ export default {
// 路测设备-摄像机
cameraDialogConfig: {
// 0 有 可控（球机）ControlCamera | 1 ⽆ 不可控（枪机）Camera
component: null,
data: null
// 0 有 可控（球机） ControlCamera | 1 ⽆ 不可控（枪机） Camera
component: void 0,
data: void 0,
// component: ControlCamera,
// data: {
// camId: "57937",
// }
}
}
},
inject: ['getMap'],
created() {
const defaultActive = 2;
const defaultActive = 0;
const layerData = getLayerData();
this.layerData = layerData;
@ -86,10 +88,18 @@ export default {
handleCleared() {
const { mapIns } = this.getMap();
this.layerData.forEach(({ children }) => {
children.forEach(item => item.status = "")
});
if (!mapIns) return;
mapIns.clearMap();
mapIns.getLayers().forEach((layer, index) => index && mapIns.remove(layer))
for (const key in cacheRemoveFunc) {
cacheRemoveFunc[key]?.();
}
// mapIns.clearMap();
mapIns.getLayers().forEach((layer, index) => index > 1 && mapIns.remove(layer))
},
// 摄像机 可控 不可控 弹窗 回调
@ -115,7 +125,7 @@ export default {
<style lang='scss' scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity .36s;
transition: opacity .24s;
}
.fade-enter,
@ -125,7 +135,7 @@ export default {
.fade-group-enter-active,
.fade-group-leave-active {
transition: all 0.36s ease;
transition: all 0.24s ease;
}
.fade-group-enter-from,
@ -136,11 +146,13 @@ export default {
.fade-group-leave-active {
// transform: translateY(24px);
position: absolute !important;
overflow: hidden;
}
.RoadAndEvents {
width: 100%;
background: url("~@screen/images/bg/box_bg_002.png") no-repeat;
// clip-path: polygon(13% 0, 87% 0, 100% 14%, 100% 85%, 85% 100%, 11% 100%, 0 87%, 0 15%);
background-size: 100% 100%;
position: relative;
display: flex;
@ -148,34 +160,53 @@ export default {
padding: 24px 18px;
padding-bottom: 15px;
overflow: hidden;
max-height: min-content;
.tabs-content {
display: grid;
margin-top: 15px;
margin-bottom: 6px;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 66px);
// grid-template-rows: repeat(3, 1fr);
flex: 1;
max-height: 100%;
overflow: auto;
position: relative;
gap: 6px;
.device-item {
position: absolute;
// position: absolute;
position: relative;
width: 70px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
--height-svg: 24px;
--gap: 9px;
--gap: 12px;
padding-top: calc(var(--height-svg) + var(--gap));
.device-icon {
display: block;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
height: 24px;
height: 33px;
width: 100%;
background-repeat: no-repeat;
background-size: auto;
background-position: center;
transition: all .18s linear;
&::before {
content: "";
position: absolute;
width: 33px;
height: 33px;
border: 1px solid rgba(0, 209, 255, .5);
border-radius: 50%;
}
}
span {
@ -220,25 +251,30 @@ export default {
}
}
.cleared-btn {
// position: absolute;
cursor: pointer;
width: 98px;
height: 31px;
border-radius: 20px;
border: 1px solid #25d8ff;
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff;
.bottom {
display: flex;
align-items: center;
justify-content: end;
img {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 10px;
.cleared-btn {
// position: absolute;
cursor: pointer;
width: 98px;
height: 31px;
border-radius: 20px;
border: 1px solid #25d8ff;
font-size: 12px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #ffffff;
display: flex;
align-items: center;
img {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 10px;
}
}
}
}

140
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/buttonEvent.js
View File

@ -1,14 +1,18 @@
import { axiosIns } from "@screen/utils/axios/auth.js";
import { Message } from "element-ui";
const PilePointJSON = require(`@screen/pages/Home/components/AMapContainer/data/lcz.json`);
import { setMarkerCluster } from "./map";
// 0 有 可控（球机）ControlCamera | 1 ⽆ 不可控（枪机）Camera
const cameraCtrlMap = {
0: "ControlCamera",
1: "Camera",
};
const cacheData = {
DriveTestEquipment_Camera: null,
export const cacheRemoveFunc = {
DriveTestEquipment_Camera_Remove: null,
};
export const eventMap = {
@ -18,15 +22,32 @@ export const eventMap = {
if (!mapIns) return Message.error("地图加载失败!");
// const { code, data } = await axiosIns
// .get("/system/camera/camList")
// // .get("/system/dept/camTreeselect")
// .catch(() => ({}));
const { code, data } = { code: 200 };
// {
// camId: "57937",
// camLat: "0",
// camLong: "0",
// camName: "G35 K055+565 (可控)",
// camOrientation: "2",
// camStatus: "0",
// camType: "1",
// deptId: "1751",
// deptName: "G35济菏改扩建",
// firmType: "2",
// pileNum: "K055+565",
// ptzCtrl: "0",
// road: "G35",
// status: "0",
// };
const { code, data } = await axiosIns
.get("/system/camera/camList")
// .get("/system/dept/camTreeselect")
.catch(() => ({}));
// const { code, data } = { code: 200 };
if (code != 200) return Message.error("摄像机加载失败!");
// cacheData.DriveTestEquipment_Camera?.clear();
cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
const normal = require(`@screen/images/layer${item.id.replace(".", "")}`);
const fault = require(`@screen/images/layer${item.id.replace(
@ -34,81 +55,52 @@ export const eventMap = {
(data) => (data === "." ? "" : `${data}_fault`)
)}`);
const size = 42;
const markers = [];
const markerClick = (e) => {
const {
target: {
w: { extData },
},
} = e;
this.cameraDialogConfig = {
// 0 有（球机） 1 ⽆（枪机）
component: cameraCtrlMap[extData.ptzCtrl],
data: extData,
};
const iconOption = {
type: "image",
size: [size, size],
anchor: "center",
console.log(this.cameraDialogConfig);
};
const layer =
cacheData.DriveTestEquipment_Camera ||
(cacheData.DriveTestEquipment_Camera = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
collision: false,
}));
mapIns.add(layer);
[
{
camLong: 116.471814,
camLat: 39.995856,
status: 0,
camName: "名称1",
camId: "666",
ptzCtrl: 0,
},
{
camLong: 116.456474,
camLat: 39.991563,
status: 1,
camName: "名称2",
camId: "333",
ptzCtrl: 1,
},
].forEach((item) => {
iconOption.image = item.status ? fault : normal;
const labelMarker = new AMap.LabelMarker({
position: [item.camLong, item.camLat],
icon: { ...iconOption },
name: item.camId,
zooms: [3, 20],
zIndex: 36,
opacity: 1,
text: {
content: item.camName,
direction: "right",
offset: [(size / 2 + 18) * -1, (size / 2 + 12) * -1],
style: {
fontSize: 12,
fontWeight: "normal",
fillColor: "#fff",
strokeColor: "#fff",
strokeWidth: 1,
fold: true,
padding: "3, 6",
},
},
});
data.forEach((item) => {
const { lng, lat } = PilePointJSON[item.pileNum] || {};
if (!lat || !lng) return;
labelMarker.on("click", (e) => {
this.cameraDialogConfig = {
// 0 有（球机） 1 ⽆（枪机）
component: cameraCtrlMap[item.ptzCtrl],
data: item,
};
const marker = new AMap.Marker({
position: [lng, lat],
content: `<img style="width: 36px; height: 36px" src='${
item.status !== "0" ? fault : normal
}'>`,
offset: new AMap.Pixel(-15, -15),
extData: item,
clickable: true,
});
layer.add(labelMarker);
marker.on("click", markerClick);
markers.push(marker);
});
mapIns.setFitView();
const markerCluster = await setMarkerCluster(mapIns, markers);
cacheRemoveFunc.DriveTestEquipment_Camera_Remove = () =>
markerCluster.clearMarkers();
mapIns.setFitView(markers, false, [360, 360, 360, 360]);
},
async "路测设备/摄像机_close"() {
cacheData.DriveTestEquipment_Camera?.clear();
cacheRemoveFunc.DriveTestEquipment_Camera_Remove?.();
},
};

60
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/httpList.js
View File

@ -0,0 +1,60 @@
import { Message } from "element-ui";
import { axiosIns } from "@screen/utils/axios/auth.js";
/**
*
* @param {string} camId 相机 ID
* @param {1 | 2 | 3} media 参数说明: 1: http+flv; 2: rtmp; 3: hls
* @returns
*/
export function getCameraStream(camId, media = 1) {
return axiosIns.post("/videoInfo/api/externalVideoStreaming", {
type: 1,
camId,
media,
});
}
/**
* 球机进行控制
* @param {string} camId 相机 ID
* @param {number} cmdType 12 /焦距变⼤(倍率变⼤)/
11 /焦距变⼩(倍率变⼩)/
13 /焦点前调/
14 /焦点后调/
15 /光圈扩⼤/
16 /光圈缩⼩/
21 /云台向上/
22 /云台向下/
23 /云台左转/
24 /云台右转/
50 /云台左上转/
51 /云台左下转/
52 /云台右上转/
53 /云台右下转/
8 /设置预置位/
39 /调⽤预置位/
49 /辅助开关开、如⾬刷/
48 /辅助开关关、如⾬刷/
51 /设置巡航起始点/
52 /设置巡航结束点/
53 /开始巡航/
54 /停⽌巡航/
(-1) /⾃动⾬刷/
99 /各⽅向动作停⽌/
* @returns
*/
export function controlCamera(camId, cmdType) {
return axiosIns
.post("/videoInfo/api/PTZControl", {
msgType: 3,
camId,
cmdType,
})
.then((result) => {
if (result.code != 200) Message.error(`相机操作失败!`);
})
.catch((err) => {
Message.error(`相机操作失败!`);
});
}

56
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/map.js
View File

@ -0,0 +1,56 @@
import { loadAMap } from "@screen/pages/Home/components/AMapContainer/loadAMap.js";
/**
* @typedef {Object} Point
* @property {number} weight - The weight of the item.
* @property {number[]} lngLat - The longitude and latitude coordinates.
* @property {string} name - The name of the item.
* @property {string} icon - The icon of the item.
* @property {Object} extData - The icon of the item.
* @property {*} [x] - Additional properties of the item.
*/
/**
* https://lbs.amap.com/api/javascript-api-v2/documentation#markercluster 2.x
* https://lbs.amap.com/demo/javascript-api/example/marker/markerclusterer 1.x
* @param {*} map
* @param {Point[]} points
* @param {Marker[]} markers
* @param {*} options
* @returns
*/
export async function setMarkerCluster(map, markers, options) {
const AMap = await loadAMap();
return new AMap.MarkerClusterer(map, markers, {
// gridSize: 15,
maxZoom: 15,
...options,
// 自定义聚合点样式
renderClusterMarker(context) {
// 聚合中点个数
const clusterCount = context.count;
const div = document.createElement("div");
let bgColor = "204,235,197";
div.style.backgroundColor = `rgba(${bgColor}, .5)`;
const size = Math.round(
25 + Math.pow(clusterCount / markers.length, 1 / 5) * 36
);
div.style.borderRadius =
div.style.lineHeight =
div.style.width =
div.style.height =
`${size}px`;
div.style.border = `solid 1px rgba(${bgColor}, 1)`;
div.innerHTML = context.count;
div.style.color = "#ffffff";
div.style.fontSize = "24px";
div.style.textAlign = "center";
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div);
},
});
}

47
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/RoadAndEvents/utils/videoStream.js
View File

@ -0,0 +1,47 @@
import flvJs from "flv.js";
import { getCameraStream } from "./httpList";
/**
*
* @param {string} camId 相机ID
* @param {HTMLElement} container 容器
* @param {DPlayerOptions?} options 配置项
* @returns
*/
export async function openVideoStream(camId, container) {
const { code, data } = await getCameraStream(camId).catch(() => ({}));
if (code != 200) return;
const flvPlayer = flvJs.createPlayer({
type: "flv",
url: data.liveUrl,
isLive: true,
hasVideo: true,
hasAudio: true,
});
console.log(
"%c [ flvPlayer ]-26-「videoStream.js」",
"font-size:15px; background:#b2b540; color:#f6f984;",
flvPlayer
);
flvPlayer.attachMediaElement(container);
flvPlayer.load();
flvPlayer.play();
return flvPlayer;
// return new DPlayer({
// container,
// autoplay: true,
// ...options,
// hotkey: false,
// video: {
// url: data.liveUrl,
// type: "hls",
// // type: "flv",
// },
// });
}

35
ruoyi-ui/src/views/JiHeExpressway/pages/Home/index.vue
View File

@ -20,7 +20,8 @@
<footer class="footer card-menu">
<div class="footer-title">
<span>济菏高速缩略图</span>
<img src="@screen/images/icon/icon-vector.png" @click.stop="handleShrink" />
<i class="el-icon-s-fold" style="color: #2AD9FD; transform: rotate(-90deg);" @click.stop="handleShrink" />
<!-- <img src="@screen/images/icon/icon-vector.png" @click.stop="handleShrink" /> -->
</div>
<div class="footer-content">
<Thumbnail />
@ -57,6 +58,10 @@ export default {
handleShrink(e) {
const translateXElement = e.target.parentElement.parentElement;
const result = (e.target.style.transform.match(/[-0-9]+/)?.[0] || -90) * -1
e.target.style.transform = `rotate(${result}deg)`;
// translateXElement.style.transform = translateXElement.style.transform ? "" : `translateY(calc(100% - 36px))`
translateXElement.style.height = translateXElement.style.height != "36px" ? "36px" : `100%`
}
@ -70,12 +75,12 @@ export default {
z-index: 6;
display: flex;
flex-direction: column;
gap: 24px;
gap: 30px;
padding: 19px 31px 0 25px;
justify-content: space-between;
.card-menu {
transition: all .6s linear;
transition: all .24s linear;
}
.content {
@ -97,6 +102,8 @@ export default {
display: flex;
flex-direction: column;
gap: 24px;
overflow: hidden;
height: 100%;
>div {
pointer-events: all;
@ -105,6 +112,7 @@ export default {
.content-l-b {
height: 332px;
max-height: 332px;
flex: 0.81;
}
}
@ -120,6 +128,8 @@ export default {
pointer-events: none;
overflow: hidden;
height: 100%;
// height: fit-content;
will-change: height;
>div {
pointer-events: all;
@ -137,6 +147,10 @@ export default {
justify-content: center;
align-items: center;
overflow: hidden;
display: flex;
align-items: center;
gap: 15px;
span {
font-size: 16px;
@ -145,13 +159,18 @@ export default {
color: #2ad9fd;
}
img {
display: inline-block;
margin-left: 11px;
width: 16px;
height: 13px;
i {
transition: all .24s linear;
cursor: pointer;
}
// img {
// display: inline-block;
// margin-left: 11px;
// width: 16px;
// height: 13px;
// cursor: pointer;
// }
}
.footer-content {

3
ruoyi-ui/src/views/JiHeExpressway/utils/common.js
View File

@ -0,0 +1,3 @@
export function delay(ms = 240) {
return new Promise((resolve) => setTimeout(() => resolve(void 0), ms));
}

52
ruoyi-ui/src/views/JiHeExpressway/utils/enum.js
View File

@ -0,0 +1,52 @@
/**
* color: 颜色
* text: 文字
* icon: 展示的图标
*/
// 相机的状态
export const CameraStatusEnum = {
"-1": {
color: "",
text: "未启用",
},
0: {
color: "",
text: "正常",
},
1: {
color: "",
text: "网络中断",
},
2: {
color: "",
text: "网络正常无图像",
},
3: {
color: "",
text: "有图像, 图像存在问题",
},
};
// 摄像机方向
export const CameraDirectionEnum = {
0: {
text: "上行",
},
1: {
text: "下行",
},
2: {
text: "上下行 (双向)",
},
};
// 摄像 是否可控 是否有云台控制 0 有（球机） 1 ⽆（枪机）
export const CameraControlTypeEnum = {
0: {
text: "球机",
},
1: {
text: "枪机",
},
};
Write Preview
Loading…
Cancel
Save