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

告警弹窗完成

wangqin
hui 7 months ago
parent
0f2dce1e9f
commit
9e41958a80
9 changed files with 511 additions and 52 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. 305
      ruoyi-ui/src/assets/iconfont/demo_index.html
  2. 58
      ruoyi-ui/src/assets/iconfont/iconfont.css
  3. 2
      ruoyi-ui/src/assets/iconfont/iconfont.js
  4. 91
      ruoyi-ui/src/assets/iconfont/iconfont.json
  5. BIN
      ruoyi-ui/src/assets/iconfont/iconfont.ttf
  6. BIN
      ruoyi-ui/src/assets/iconfont/iconfont.woff
  7. BIN
      ruoyi-ui/src/assets/iconfont/iconfont.woff2
  8. 13
      ruoyi-ui/src/views/JiHeExpressway/components/WarningNotify.vue
  9. 94
      ruoyi-ui/src/views/websocket.vue

305
ruoyi-ui/src/assets/iconfont/demo_index.html
View File

@ -54,6 +54,84 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe833;</span>
<div class="name">感应</div>
<div class="code-name">&amp;#xe833;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">异常天气</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">施工建设</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">路障清除</div>
<div class="code-name">&amp;#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe607;</span>
<div class="name">车辆故障</div>
<div class="code-name">&amp;#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe608;</span>
<div class="name">服务区异常</div>
<div class="code-name">&amp;#xe608;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe609;</span>
<div class="name">设施设备隐患</div>
<div class="code-name">&amp;#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60a;</span>
<div class="name">交通管制</div>
<div class="code-name">&amp;#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60b;</span>
<div class="name">交通事故</div>
<div class="code-name">&amp;#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60c;</span>
<div class="name">交通拥堵</div>
<div class="code-name">&amp;#xe60c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60e;</span>
<div class="name">非法上路</div>
<div class="code-name">&amp;#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">非机动车</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">其他事件</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7ef;</span>
<div class="name">汽车</div>
@ -120,9 +198,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1715072390653') format('woff2'),
url('iconfont.woff?t=1715072390653') format('woff'),
url('iconfont.ttf?t=1715072390653') format('truetype');
src: url('iconfont.woff2?t=1715240266347') format('woff2'),
url('iconfont.woff?t=1715240266347') format('woff'),
url('iconfont.ttf?t=1715240266347') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -148,6 +226,123 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-signal"></span>
<div class="name">
感应
</div>
<div class="code-name">.icon-signal
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-abnormalWeather"></span>
<div class="name">
异常天气
</div>
<div class="code-name">.icon-abnormalWeather
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-construction"></span>
<div class="name">
施工建设
</div>
<div class="code-name">.icon-construction
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-barrierClear"></span>
<div class="name">
路障清除
</div>
<div class="code-name">.icon-barrierClear
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-vehicleBroken"></span>
<div class="name">
车辆故障
</div>
<div class="code-name">.icon-vehicleBroken
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-serviceAreaAbnormal"></span>
<div class="name">
服务区异常
</div>
<div class="code-name">.icon-serviceAreaAbnormal
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-equipmentTrouble"></span>
<div class="name">
设施设备隐患
</div>
<div class="code-name">.icon-equipmentTrouble
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-trafficControl"></span>
<div class="name">
交通管制
</div>
<div class="code-name">.icon-trafficControl
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-trafficAccident"></span>
<div class="name">
交通事故
</div>
<div class="code-name">.icon-trafficAccident
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-trafficJam"></span>
<div class="name">
交通拥堵
</div>
<div class="code-name">.icon-trafficJam
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-illegalVehicle"></span>
<div class="name">
非法上路
</div>
<div class="code-name">.icon-illegalVehicle
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-nonMotor"></span>
<div class="name">
非机动车
</div>
<div class="code-name">.icon-nonMotor
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-otherEvent"></span>
<div class="name">
其他事件
</div>
<div class="code-name">.icon-otherEvent
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-car"></span>
<div class="name">
@ -247,6 +442,110 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-signal"></use>
</svg>
<div class="name">感应</div>
<div class="code-name">#icon-signal</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-abnormalWeather"></use>
</svg>
<div class="name">异常天气</div>
<div class="code-name">#icon-abnormalWeather</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-construction"></use>
</svg>
<div class="name">施工建设</div>
<div class="code-name">#icon-construction</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-barrierClear"></use>
</svg>
<div class="name">路障清除</div>
<div class="code-name">#icon-barrierClear</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-vehicleBroken"></use>
</svg>
<div class="name">车辆故障</div>
<div class="code-name">#icon-vehicleBroken</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-serviceAreaAbnormal"></use>
</svg>
<div class="name">服务区异常</div>
<div class="code-name">#icon-serviceAreaAbnormal</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-equipmentTrouble"></use>
</svg>
<div class="name">设施设备隐患</div>
<div class="code-name">#icon-equipmentTrouble</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-trafficControl"></use>
</svg>
<div class="name">交通管制</div>
<div class="code-name">#icon-trafficControl</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-trafficAccident"></use>
</svg>
<div class="name">交通事故</div>
<div class="code-name">#icon-trafficAccident</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-trafficJam"></use>
</svg>
<div class="name">交通拥堵</div>
<div class="code-name">#icon-trafficJam</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-illegalVehicle"></use>
</svg>
<div class="name">非法上路</div>
<div class="code-name">#icon-illegalVehicle</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-nonMotor"></use>
</svg>
<div class="name">非机动车</div>
<div class="code-name">#icon-nonMotor</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-otherEvent"></use>
</svg>
<div class="name">其他事件</div>
<div class="code-name">#icon-otherEvent</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-car"></use>

58
ruoyi-ui/src/assets/iconfont/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4466169 */
src: url('iconfont.woff2?t=1715072390653') format('woff2'),
url('iconfont.woff?t=1715072390653') format('woff'),
url('iconfont.ttf?t=1715072390653') format('truetype');
src: url('iconfont.woff2?t=1715240266347') format('woff2'),
url('iconfont.woff?t=1715240266347') format('woff'),
url('iconfont.ttf?t=1715240266347') format('truetype');
}
.iconfont {
@ -13,6 +13,58 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-signal:before {
content: "\e833";
}
.icon-abnormalWeather:before {
content: "\e603";
}
.icon-construction:before {
content: "\e604";
}
.icon-barrierClear:before {
content: "\e605";
}
.icon-vehicleBroken:before {
content: "\e607";
}
.icon-serviceAreaAbnormal:before {
content: "\e608";
}
.icon-equipmentTrouble:before {
content: "\e609";
}
.icon-trafficControl:before {
content: "\e60a";
}
.icon-trafficAccident:before {
content: "\e60b";
}
.icon-trafficJam:before {
content: "\e60c";
}
.icon-illegalVehicle:before {
content: "\e60e";
}
.icon-nonMotor:before {
content: "\e60f";
}
.icon-otherEvent:before {
content: "\e610";
}
.icon-car:before {
content: "\e7ef";
}

2
ruoyi-ui/src/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

91
ruoyi-ui/src/assets/iconfont/iconfont.json
View File

@ -5,6 +5,97 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "30712929",
"name": "感应",
"font_class": "signal",
"unicode": "e833",
"unicode_decimal": 59443
},
{
"icon_id": "40248866",
"name": "异常天气",
"font_class": "abnormalWeather",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "40248865",
"name": "施工建设",
"font_class": "construction",
"unicode": "e604",
"unicode_decimal": 58884
},
{
"icon_id": "40248864",
"name": "路障清除",
"font_class": "barrierClear",
"unicode": "e605",
"unicode_decimal": 58885
},
{
"icon_id": "40248855",
"name": "车辆故障",
"font_class": "vehicleBroken",
"unicode": "e607",
"unicode_decimal": 58887
},
{
"icon_id": "40248862",
"name": "服务区异常",
"font_class": "serviceAreaAbnormal",
"unicode": "e608",
"unicode_decimal": 58888
},
{
"icon_id": "40248861",
"name": "设施设备隐患",
"font_class": "equipmentTrouble",
"unicode": "e609",
"unicode_decimal": 58889
},
{
"icon_id": "40248854",
"name": "交通管制",
"font_class": "trafficControl",
"unicode": "e60a",
"unicode_decimal": 58890
},
{
"icon_id": "40248860",
"name": "交通事故",
"font_class": "trafficAccident",
"unicode": "e60b",
"unicode_decimal": 58891
},
{
"icon_id": "40248857",
"name": "交通拥堵",
"font_class": "trafficJam",
"unicode": "e60c",
"unicode_decimal": 58892
},
{
"icon_id": "40248859",
"name": "非法上路",
"font_class": "illegalVehicle",
"unicode": "e60e",
"unicode_decimal": 58894
},
{
"icon_id": "40248858",
"name": "非机动车",
"font_class": "nonMotor",
"unicode": "e60f",
"unicode_decimal": 58895
},
{
"icon_id": "40248856",
"name": "其他事件",
"font_class": "otherEvent",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "7791021",
"name": "汽车",

BIN
ruoyi-ui/src/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
ruoyi-ui/src/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
ruoyi-ui/src/assets/iconfont/iconfont.woff2
View File

Binary file not shown.

13
ruoyi-ui/src/views/JiHeExpressway/components/WarningNotify.vue
View File

@ -34,12 +34,14 @@ export default {
},
showNotify(para){
let _this = this;
let eventType = ["trafficAccident", "vehicleBroken", "trafficControl", "trafficJam", "illegalVehicle", "barrierClear", "construction", "serviceAreaAbnormal", "equipmentTrouble", "abnormalWeather", "otherEvent"];
let obj = {
content: "这里是从websocket收到的告警内容，最少一行，最多三行，多了就隐藏掉，这是演示的三行的效果。",
time: moment().format("yyyy-MM-DD hh:mm"),
type: ["pedestrian", "car", "pedestrian"][_this.notifyIndex % 3],
level: ["info", "danger"][_this.notifyIndex % 2],
duration: 0
content: para.content.content,
time: para.subEvent == "0" ? para.content.event.occurrenceTime : para.content.event.warning_time,
// moment().format("yyyy-MM-DD hh:mm"),
type: para.subEvent == '1' ? "signal" : eventType[para.content.event.eventType*1-1],
level: ["danger", "info"][para.subEvent*1],
duration: para.subEvent == "0" ? 0 : 4000
}
_this.notifications[_this.notifyIndex] = _this.$notify({
@ -202,6 +204,7 @@ export default {
.iconfont {
font-size: 48px;
&.icon-illegalVehicle{ font-size: 30px;}
}
}

94
ruoyi-ui/src/views/websocket.vue
View File

@ -31,8 +31,8 @@ export default {
// 建立 websocket 连接
this.socket.initialize({
// url: 'ws://' + location.hostname + ':' + port + path,
// url: 'wss://' + location.hostname + ':' + window.location.port + '/ws' || 80 + '/ws',
url: 'ws://10.168.77.128:7789/ws',
url: 'wss://' + location.hostname + ':' + window.location.port + '/ws' || 80 + '/ws',
// url: 'ws://10.168.77.128:7789/ws',
// url: "ws://10.7.179.15" + ":" + port + path,
// url: "ws://10.168.64.171" + ":" + port + path,
// url: 'ws://10.168.78.127'+ ':' + port + path,
@ -113,45 +113,59 @@ export default {
methods: {},
mounted(){
let _this = this;
document.onkeydown = function (e) {
if (e.code == 'Space') {
let params = {
"subEvent": "0",
"content": {
"event": {
"id": "1555c6599eb14e3fb68d04e512182ee7",
"deptId": 103,
"stakeMark": "K059+289",
"endStakeMark": "",
"direction": "1",
"userId": 1,
"estimatedEndTime": "2024-04-11 00:00:00",
"eventType": 3,
"eventSubclass": "3-2",
"eventState": 0,
"eventSource": 1,
"inTunnel": 0,
"roadId": 1,
"occurrenceTime": "2024-04-10 16:56:02",
"lang": "",
"dcEventTrafficControl": {
"controlType": 1,
"controlCause": 1,
"exitsInlets": 2,
"facilityId": 11,
"measure": 1,
"classify": 1,
"facilityIds": [
11
]
},
"createTime": "2024-05-08 18:02:40"
},
"content": "菏泽方向 K059+289 发生收费站封闭和限行事件"
if (process.env.NODE_ENV == "development"){
let et = 1;
document.onkeydown = function (e) {
let tp = _.sample(["0", "1", "0", "1", "0", "0", "0", "1", "0"]);
if (e.code == 'Space') {
let params = {
"subEvent": tp,
"content": {
"event": {
"id": "1555c6599eb14e3fb68d04e512182ee7",
"deptId": 103,
"stakeMark": "K059+289",
"endStakeMark": "",
"direction": "1",
"userId": 1,
"estimatedEndTime": "2024-04-11 00:00:00",
"eventType": et,
"eventSubclass": "3-2",
"eventState": 0,
"eventSource": 1,
"inTunnel": 0,
"roadId": 1,
"occurrenceTime": "2024-04-10 16:56:02",
"warning_time": "2024-04-10 16:56:02",
"lang": "",
"dcEventTrafficControl": {
"controlType": 1,
"controlCause": 1,
"exitsInlets": 2,
"facilityId": 11,
"measure": 1,
"classify": 1,
"facilityIds": [
11
]
},
"createTime": "2024-05-08 18:02:40"
},
"content": "菏泽方向 K059+289 发生收费站封闭和限行事件"
}
};
_this.$emit("newEvent", params);
}
if(tp == "0"){
et++;
if (et >= 12) {
et = 1;
}
}
};
_this.$emit("newEvent", params);
}}
}
}
}
};
</script>

Write Preview
Loading…
Cancel
Save