chenyh
/
xiuos_IoT
forked from floraachy/xiuos_IoT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add ruleManage page

This commit is contained in:
龚祖望 2022-11-07 17:44:54 +08:00
parent a22dad62c7
commit 6fbd99292a
19 changed files with 884 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
xiuosiot-frontend/src/api/rule/ruleManage.js Normal file
View File

@ -0,0 +1,33 @@
import request from '@/utils/request'
export function getList(data) {
return request({
url: '/alarmRule/selectAll',
method: 'get',
data
})
}
export function remove(data) {
return request({
url: '/alarmRule/delete',
method: 'post',
data
})
}
export function add(data) {
return request({
url: '/alarmRule/add',
method: 'post',
data
})
}
export function update(data) {
return request({
url: '/alarmRule/update',
method: 'post',
data
})
}

BIN
xiuosiot-frontend/src/assets/images/add_border.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 B

BIN
xiuosiot-frontend/src/assets/images/bg_green.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 847 B

25
xiuosiot-frontend/src/icons/svg/alarm.svg Normal file
View File

@ -0,0 +1,25 @@
<svg xmlns="http://www.w3.org/2000/svg" width="47.879" height="50.463" viewBox="0 0 47.879 50.463">
<defs>
<style>
.cls-1, .cls-2 {
fill: currentColor;
}
.cls-2 {
stroke: currentColor;
stroke-width: 0.7px;
}
</style>
</defs>
<g id="组_32207" data-name="组 32207" transform="translate(-351.823 -252)">
<g id="组_32206" data-name="组 32206" transform="translate(351.823 252)">
<path id="路径_30893" data-name="路径 30893" class="cls-1" d="M172.887,128.542H128.992A1.992,1.992,0,0,0,127,130.534v37.293a1.992,1.992,0,0,0,1.992,1.992h19.986v7.193a1.992,1.992,0,0,0,3.985,0V169.82h19.924a1.992,1.992,0,0,0,1.992-1.992V130.534A1.992,1.992,0,0,0,172.887,128.542Zm-1.992,37.293h-39.91V132.527h39.91Z" transform="translate(-127 -128.542)"/>
</g>
<g id="组_32173" data-name="组 32173" transform="translate(331.5 228)">
<path id="路径_30991" data-name="路径 30991" class="cls-2" d="M98.471,177.294a.824.824,0,1,0,0,1.647h16.47a.824.824,0,0,0,0-1.647Zm0-1.647h16.47a2.471,2.471,0,0,1,0,4.941H98.471a2.471,2.471,0,1,1,0-4.941Zm14.823-14.412A1.235,1.235,0,1,0,114.529,160,1.235,1.235,0,0,0,113.294,161.235Zm-15.647,0A1.235,1.235,0,1,0,98.882,160,1.235,1.235,0,0,0,97.647,161.235Z" transform="translate(-62.353 -124.706)"/>
<path id="路径_30992" data-name="路径 30992" class="cls-2" d="M480,576.824a.824.824,0,1,1,1.647,0v4.118a.824.824,0,1,1-1.647,0Z" transform="translate(-436.471 -530)"/>
<path id="路径_30993" data-name="路径 30993" class="cls-2" d="M44.353,47.647a2.882,2.882,0,1,1,2.882-2.882A2.882,2.882,0,0,1,44.353,47.647Zm0-1.647a1.235,1.235,0,1,0-1.235-1.235A1.235,1.235,0,0,0,44.353,46Zm9.059-2.471a.824.824,0,0,1,0-1.647h2.471a.824.824,0,1,1,0,1.647Zm-20.588,0a.824.824,0,1,1,0-1.647h2.471a.824.824,0,1,1,0,1.647ZM43.529,32.824a.824.824,0,0,1,1.647,0v2.471a.824.824,0,0,1-1.647,0Z"/>
<path id="路径_30994" data-name="路径 30994" class="cls-2" d="M210.1,223.235h-1.647v-7.412a7.823,7.823,0,1,1,15.647,0v7.412h-1.647v-7.412a6.176,6.176,0,1,0-12.353,0Z" transform="translate(-171.907 -171.471)"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

10
xiuosiot-frontend/src/icons/svg/edit.svg Normal file
View File

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20.292" height="20.292" viewBox="0 0 20.292 20.292">
<defs>
<style>
.cls-1 {
fill: currentColor;
}
</style>
</defs>
<path id="路径_30984" data-name="路径 30984" class="cls-1" d="M147.892,67.212q-.2.225-.375.4l-.3.3a3.408,3.408,0,0,1-.275.25l-3.374-3.4q.2-.2.5-.475t.5-.425a1.471,1.471,0,0,1,1.075-.35,2.591,2.591,0,0,1,.925.225,3.394,3.394,0,0,1,.837.7,3.968,3.968,0,0,1,.712,1.05,3.213,3.213,0,0,1,.162.825A1.13,1.13,0,0,1,147.892,67.212Zm-9.546,2.774,3.873-3.873,3.374,3.374q-2.124,2.124-3.873,3.848-.75.725-1.462,1.437t-1.3,1.274q-.587.562-.962.937l-.45.45a4.283,4.283,0,0,1-.4.35,2.485,2.485,0,0,1-.5.3q-.275.125-.762.3t-1.012.337q-.525.162-1,.3a4.44,4.44,0,0,1-.725.162q-.475.05-.512-.087a1.906,1.906,0,0,1,.037-.612q.025-.25.125-.737t.2-.987q.1-.5.212-.937a4.8,4.8,0,0,1,.187-.612,3.113,3.113,0,0,1,.262-.475,3.327,3.327,0,0,1,.387-.45Zm8.472,3.624a2.117,2.117,0,0,1,1,.25,1.048,1.048,0,0,1,.475,1.025v5.673a3.119,3.119,0,0,1-.262,1.287,3.28,3.28,0,0,1-.712,1.025,3.222,3.222,0,0,1-1.025.675,3.05,3.05,0,0,1-1.175.237H131.174A2.8,2.8,0,0,1,130,83.518a3.324,3.324,0,0,1-1.012-.712,3.655,3.655,0,0,1-.712-1.062A3.166,3.166,0,0,1,128,80.431V66.512a2.274,2.274,0,0,1,.275-1.037,3.855,3.855,0,0,1,.712-.975,4.024,4.024,0,0,1,.987-.725,2.355,2.355,0,0,1,1.1-.287H136.9a1.037,1.037,0,0,1,.987.512,2.1,2.1,0,0,1,.287,1.037,1.966,1.966,0,0,1-.287,1.012,1.051,1.051,0,0,1-.987.487h-4.573a1.087,1.087,0,0,0-.85.362,1.281,1.281,0,0,0-.325.887V79.532a1.16,1.16,0,0,0,.325.837,1.126,1.126,0,0,0,.85.337h11.57a1.3,1.3,0,0,0,.9-.337,1.081,1.081,0,0,0,.375-.837V74.884a1.076,1.076,0,0,1,.162-.6,1.308,1.308,0,0,1,.4-.4,1.618,1.618,0,0,1,.525-.212,2.643,2.643,0,0,1,.562-.062Z" transform="translate(-128 -63.488)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

14
xiuosiot-frontend/src/icons/svg/more.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="26.201" height="5.095" viewBox="0 0 26.201 5.095">
<defs>
<style>
.cls-1 {
fill: currentColor;
}
</style>
</defs>
<g id="组_32205" data-name="组 32205" transform="translate(-585.399 -548.264)">
<circle id="椭圆_1254" data-name="椭圆 1254" class="cls-1" cx="2.547" cy="2.547" r="2.547" transform="translate(585.399 548.264)"/>
<circle id="椭圆_1255" data-name="椭圆 1255" class="cls-1" cx="2.547" cy="2.547" r="2.547" transform="translate(596.316 548.264)"/>
<circle id="椭圆_1256" data-name="椭圆 1256" class="cls-1" cx="2.547" cy="2.547" r="2.547" transform="translate(606.506 548.264)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 711 B

12
xiuosiot-frontend/src/icons/svg/remove.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.061" height="21.09" viewBox="0 0 19.061 21.09">
<defs>
<style>
.cls-1 {
fill: currentColor;
stroke: currentColor;
stroke-width: 0.8px;
}
</style>
</defs>
<path id="路径_30985" data-name="路径 30985" class="cls-1" d="M129.776,89.391h-1.015a.761.761,0,0,1,0-1.522H145.5a.761.761,0,1,1,0,1.522H131.3v13.442a1.268,1.268,0,0,0,1.268,1.268H141.7a1.268,1.268,0,0,0,1.268-1.268V91.674a.761.761,0,1,1,1.522,0v11.159a2.79,2.79,0,0,1-2.79,2.79h-9.131a2.79,2.79,0,0,1-2.79-2.79Zm5.326-2.536a.761.761,0,0,1,0-1.522h4.058a.761.761,0,0,1,0,1.522Zm-.761,6.848a.761.761,0,1,1,1.522,0V99.79a.761.761,0,1,1-1.522,0Zm4.058,0a.761.761,0,1,1,1.522,0V99.79a.761.761,0,1,1-1.522,0Z" transform="translate(-127.6 -84.933)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 810 B

14
xiuosiot-frontend/src/icons/svg/rule_msg_type.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.89" height="17.723" viewBox="0 0 16.89 17.723">
<defs>
<style>
.cls-1 {
fill: currentColor;
stroke: currentColor;
}
</style>
</defs>
<g id="组_32218" data-name="组 32218" transform="translate(-63.5 -63.5)">
<path id="路径_31000" data-name="路径 31000" class="cls-1" d="M78.187,64H65.7A1.7,1.7,0,0,0,64,65.7V76.485a1.7,1.7,0,0,0,1.7,1.7h1.1v2.185l3.936-2.185h7.451a1.7,1.7,0,0,0,1.7-1.7V65.7A1.7,1.7,0,0,0,78.187,64Zm.568,12.485a.567.567,0,0,1-.568.567H70.736a1.134,1.134,0,0,0-.551.143l-2.25,1.249v-.257A1.136,1.136,0,0,0,66.8,77.052H65.7a.568.568,0,0,1-.568-.567V65.7a.568.568,0,0,1,.568-.568H78.187a.568.568,0,0,1,.568.568Z"/>
<path id="路径_31001" data-name="路径 31001" class="cls-1" d="M230.236,301.079H224.48c-.265,0-.48.325-.48.726s.215.726.48.726h5.756c.265,0,.48-.325.48-.726S230.5,301.079,230.236,301.079ZM232.154,296H224.48c-.265,0-.48.325-.48.726s.215.726.48.726h7.675c.265,0,.48-.325.48-.726S232.419,296,232.154,296Z" transform="translate(-156.372 -228.405)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

20
xiuosiot-frontend/src/icons/svg/rule_name.svg Normal file
View File

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.885" height="15.885" viewBox="0 0 15.885 15.885">
<defs>
<style>
.cls-1, .cls-2 {
fill: currentColor;
}
.cls-1 {
fill-rule: evenodd;
}
</style>
</defs>
<g id="template" transform="translate(0)">
<path id="路径_1296" data-name="路径 1296" class="cls-1" d="M3,3V8.3H18.885V3ZM17.12,4.765H4.765V6.53H17.12Z" transform="translate(-3 -3)"/>
<path id="路径_1297" data-name="路径 1297" class="cls-1" d="M3,11v8.825h7.06V11Zm5.3,1.765H4.765v5.3H8.3Z" transform="translate(-3 -3.94)"/>
<path id="路径_1298" data-name="路径 1298" class="cls-2" d="M20.06,11H13v1.765h7.06Z" transform="translate(-4.175 -3.94)"/>
<path id="路径_1299" data-name="路径 1299" class="cls-2" d="M13,15h7.06v1.765H13Z" transform="translate(-4.175 -4.41)"/>
<path id="路径_1300" data-name="路径 1300" class="cls-2" d="M20.06,19H13v1.765h7.06Z" transform="translate(-4.175 -4.88)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1005 B

12
xiuosiot-frontend/src/icons/svg/rule_status.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="18.3" height="18.3" viewBox="0 0 18.3 18.3">
<defs>
<style>
.cls-1 {
fill: currentColor;
stroke: currentColor;
stroke-width: 0.3px;
}
</style>
</defs>
<path id="路径_30990" data-name="路径 30990" class="cls-1" d="M80.071,64H65.929A1.929,1.929,0,0,0,64,65.929V77.5a1.929,1.929,0,0,0,1.929,1.929h6.429v1.286h-4.5a.643.643,0,1,0,0,1.286H78.143a.643.643,0,1,0,0-1.286h-4.5V79.429h6.429A1.929,1.929,0,0,0,82,77.5V65.929A1.929,1.929,0,0,0,80.071,64ZM65.929,65.286H80.071a.643.643,0,0,1,.643.643v9H65.286v-9A.643.643,0,0,1,65.929,65.286ZM80.714,77.5a.643.643,0,0,1-.643.643H65.929a.643.643,0,0,1-.643-.643V76.214H80.714Z" transform="translate(-63.85 -63.85)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 762 B

21
xiuosiot-frontend/src/icons/svg/rule_terminal_no.svg Normal file
View File

@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18">
<defs>
<style>
.cls-1 {
fill: currentColor;
}
</style>
</defs>
<g id="dialpad" transform="translate(0)">
<path id="路径_378" data-name="路径 378" class="cls-1" d="M5.5,3h3V6h-3Z" transform="translate(-5.5 -3)"/>
<path id="路径_379" data-name="路径 379" class="cls-1" d="M5.5,8h3v3h-3Z" transform="translate(-5.5 -3)"/>
<path id="路径_380" data-name="路径 380" class="cls-1" d="M5.5,13v3h3V13Z" transform="translate(-5.5 -3)"/>
<path id="路径_381" data-name="路径 381" class="cls-1" d="M10.5,3h3V6h-3Z" transform="translate(-4 -3)"/>
<path id="路径_382" data-name="路径 382" class="cls-1" d="M10.5,8v3h3V8Z" transform="translate(-4 -3)"/>
<path id="路径_383" data-name="路径 383" class="cls-1" d="M10.5,13h3v3h-3Z" transform="translate(-4 -3)"/>
<path id="路径_384" data-name="路径 384" class="cls-1" d="M10.5,18v3h3V18Z" transform="translate(-4 -3)"/>
<path id="路径_385" data-name="路径 385" class="cls-1" d="M15.5,3h3V6h-3Z" transform="translate(-2.5 -3)"/>
<path id="路径_386" data-name="路径 386" class="cls-1" d="M15.5,8v3h3V8Z" transform="translate(-2.5 -3)"/>
<path id="路径_387" data-name="路径 387" class="cls-1" d="M15.5,13h3v3h-3Z" transform="translate(-2.5 -3)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

28
xiuosiot-frontend/src/icons/svg/start.svg Normal file
View File

@ -0,0 +1,28 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.963" height="19.963" viewBox="0 0 19.963 19.963">
<defs>
<style>
.cls-1, .cls-2 {
fill: currentColor;
}
.cls-1 {
stroke: currentColor;
}
.cls-3, .cls-4 {
stroke: none;
}
.cls-4 {
fill: currentColor;
}
</style>
</defs>
<g id="组_32219" data-name="组 32219" transform="translate(-571.239 -525)">
<path id="路径_30998" data-name="路径 30998" class="cls-1" d="M106.482,117.263a9.482,9.482,0,1,1,9.482-9.482A9.482,9.482,0,0,1,106.482,117.263Zm.009-1.771a7.7,7.7,0,1,0-7.7-7.7A7.705,7.705,0,0,0,106.491,115.493Z" transform="translate(474.739 427.2)"/>
<g id="多边形_25" data-name="多边形 25" class="cls-2" transform="translate(588.427 528.913) rotate(90)">
<path class="cls-3" d="M 10.41338157653809 10.11949157714844 L 1.723181128501892 10.11949157714844 C 1.463301181793213 10.11949157714844 1.334181189537048 9.945331573486328 1.290731191635132 9.870451927185059 C 1.247271180152893 9.795581817626953 1.160131216049194 9.597061157226563 1.289061188697815 9.371421813964844 L 5.634160995483398 1.767491459846497 C 5.764091014862061 1.540111541748047 5.981040954589844 1.515561461448669 6.068281173706055 1.515561461448669 C 6.155521392822266 1.515561461448669 6.372471332550049 1.540111541748047 6.502401351928711 1.767491459846497 L 10.84750080108643 9.371421813964844 C 10.97643089294434 9.597061157226563 10.88929080963135 9.795581817626953 10.8458309173584 9.870451927185059 C 10.80238151550293 9.945331573486328 10.67326164245605 10.11949157714844 10.41338157653809 10.11949157714844 Z"/>
<path class="cls-4" d="M 6.068281173706055 2.015561103820801 L 1.723180770874023 9.619491577148438 L 10.41338157653809 9.619491577148438 L 6.068281173706055 2.015561103820801 M 6.068281173706055 1.01556396484375 C 6.406428813934326 1.01556396484375 6.744575977325439 1.183516502380371 6.936521053314209 1.519421577453613 L 11.28162097930908 9.12335205078125 C 11.66257095336914 9.790011405944824 11.18120098114014 10.61949157714844 10.41338157653809 10.61949157714844 L 1.723180770874023 10.61949157714844 C 0.9553613662719727 10.61949157714844 0.4739913940429688 9.790011405944824 0.8549413681030273 9.12335205078125 L 5.2000412940979 1.519421577453613 C 5.39198637008667 1.183516502380371 5.730133533477783 1.01556396484375 6.068281173706055 1.01556396484375 Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

11
xiuosiot-frontend/src/icons/svg/stop.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.893" height="19.893" viewBox="0 0 19.893 19.893">
<defs>
<style>
.cls-1 {
fill: currentColor;
stroke: currentColor;
}
</style>
</defs>
<path id="路径_31002" data-name="路径 31002" class="cls-1" d="M106.447,117.193a9.447,9.447,0,1,1,9.447-9.447A9.446,9.446,0,0,1,106.447,117.193Zm.009-1.764a7.676,7.676,0,1,0-7.676-7.676A7.676,7.676,0,0,0,106.456,115.429ZM103.494,104.2h5.9a.59.59,0,0,1,.59.59V110.7a.59.59,0,0,1-.59.59h-5.9a.59.59,0,0,1-.59-.59v-5.9A.59.59,0,0,1,103.494,104.2Z" transform="translate(-96.5 -97.8)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 619 B

14
xiuosiot-frontend/src/icons/svg/view.svg Normal file
View File

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32.374" height="22.337" viewBox="0 0 32.374 22.337">
<defs>
<style>
.cls-1 {
fill: currentColor;
stroke: currentColor;
}
</style>
</defs>
<g id="组_32166" data-name="组 32166" transform="translate(-63.314 -208.594)">
<path id="路径_30982" data-name="路径 30982" class="cls-1" d="M95.1,219.352c-.041-.1-4.26-10.258-15.6-10.258s-15.557,10.155-15.6,10.258a1.1,1.1,0,0,0,.078.978c.248.413,6.177,10.1,15.521,10.1s15.273-9.689,15.521-10.1A1.1,1.1,0,0,0,95.1,219.352Zm-15.6,8.879c-7,0-12.058-6.7-13.325-8.563a14.789,14.789,0,0,1,26.651,0C91.558,221.529,86.5,228.231,79.5,228.231Z" transform="translate(0)"/>
<path id="路径_30983" data-name="路径 30983" class="cls-1" d="M318.974,308.626a7.151,7.151,0,1,0,7.151,7.151A7.159,7.159,0,0,0,318.974,308.626Zm0,12.1a4.951,4.951,0,1,1,4.951-4.951A4.957,4.957,0,0,1,318.974,320.728Z" transform="translate(-239.474 -96.11)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 980 B

8
xiuosiot-frontend/src/router/index.js
View File

@ -181,19 +181,19 @@ export const constantRoutes = [
path: '/rule',
component: Layout,
name: 'Rule',
meta: { title: '规则引擎', icon: 'rule', disabled: true },
meta: { title: '规则引擎', icon: 'rule' },
children: [
{
path: 'manage',
name: 'Manage',
// component: () => import(''),
meta: { title: '规则管理', disabled: true }
component: () => import('@/views/rule/ruleManage/index'),
meta: { title: '规则管理' }
},
{
path: 'message',
name: 'Message',
// component: () => import('@/views/terminal/add/index'),
meta: { title: '消息推送', disabled: true }
meta: { title: '数据转发', disabled: true }
}
]
},

1
xiuosiot-frontend/src/store/getters.js
View File

@ -4,6 +4,7 @@ const getters = {
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
org: state => state.user.org,
corpName: state => state.user.corpName,
abbrCorpName: state => state.user.abbrCorpName,
asyncRouters: state => state.user.asyncRouters,

6
xiuosiot-frontend/src/store/modules/user.js
View File

@ -2,7 +2,7 @@
* @Author: 龚祖望 573413756@qq.com
* @Date: 2022-05-16 09:16:41
* @LastEditors: 龚祖望 573413756@qq.com
* @LastEditTime: 2022-10-09 15:39:05
* @LastEditTime: 2022-11-07 15:47:20
* @FilePath: \dashengda\src\store\modules\user.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -64,6 +64,9 @@ const mutations = {
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ORG: (state, org) => {
state.org = org
},
SET_CORPNAME: (state, corpName) => {
state.corpName = corpName
},
@ -110,6 +113,7 @@ const actions = {
}
// const { name, avatar } = data
commit('SET_ORG', data.org)
commit('SET_CORPNAME', data.corpname)
commit('SET_ABBRCORPNAME', data.abbrcorpname)
commit('SET_PERMISSIONS', [data.permissions])

659
xiuosiot-frontend/src/views/rule/ruleManage/index.vue Normal file
View File

@ -0,0 +1,659 @@
<template>
<div class="app-container" style="min-height: calc(100vh - 50px)">
<el-row
type="flex"
justify="space-between"
style="align-items: baseline; margin-bottom: 30px"
>
<div class="header">
<h1 class="title">告警规则</h1>
<span class="date">{{ date }}</span>
</div>
<el-button
type="primary"
style="height: fit-content"
@click="add"
>新增规则</el-button>
</el-row>
<div v-for="(item,index) in ruleList" :key="index" class="content-box" :style="{'color':getColor(item.alarmLevel),'border-color':getColor(item.alarmLevel)}">
<div class="header">
<span>
<svg-icon icon-class="alarm" class="alarm_icon" />
{{ '告警级别 '+getLevelDesc(item.alarmLevel) }}
</span>
<div class="line" :style="{'background-image':getLineColor(item.alarmLevel)}" />
</div>
<div class="body" :style="{'border-color':getColor(item.alarmLevel)}">
<p class="body-content">
<span
class="content-item"
><svg-icon icon-class="rule_name" class="content-icon" /><span
class="font"
>告警名称</span></span>
<span class="content-item">{{ item.alarmName }}</span>
</p>
<p class="body-content">
<span
class="content-item"
><svg-icon
icon-class="rule_terminal_no"
class="content-icon"
/><span class="font">适用设备序列号</span></span>
<span class="content-item">{{ item.deviceNo }}</span>
</p>
<p class="body-content">
<span
class="content-item"
><svg-icon icon-class="rule_msg_type" class="content-icon" /><span
class="font"
>推送方式</span></span>
<span class="content-item">邮件</span>
</p>
<p class="body-content">
<span
class="content-item"
><svg-icon icon-class="rule_status" class="content-icon" /><span
class="font"
>生效状态</span></span>
<span class="content-item rule-status">{{ ruleStatusList[item.ruleStatus] }}</span>
</p>
</div>
<div class="footer">
<div class="footer_btn" :style="{'border-color':getColor(item.alarmLevel)}">
<span title="查看">
<svg-icon icon-class="view" class="footer-icon" @click="view(index)" />
</span>
</div>
<div class="footer_btn" :style="{'border-color':getColor(item.alarmLevel)}">
<span title="编辑">
<svg-icon icon-class="edit" class="footer-icon" @click="edit(index)" />
</span>
</div>
<div class="footer_btn" :style="{'border-color':getColor(item.alarmLevel)}">
<span title="删除">
<svg-icon icon-class="remove" class="footer-icon" @click="remove(item.id)" />
</span>
</div>
<div class="footer_btn">
<span title="启动">
<svg-icon
v-if="item.ruleStatus === 0"
icon-class="start"
class="footer-icon"
@click="start"
/>
<svg-icon
v-else
icon-class="stop"
class="footer-icon"
@click="stop"
/>
</span>
</div>
</div>
</div>
<!-- 详情弹窗 -->
<div v-show="visible" class="dialog_wrapper">
<div class="dialog-container">
<div class="dialog_header">
<p class="ip">{{ getTitle(type) }}</p>
<div class="remove_icon" @click="close">X</div>
</div>
<div class="dialog_content">
<el-form
ref="form"
:model="form"
class="form"
label-position="right"
label-width="160px"
>
<el-row>
<el-col :span="10">
<el-form-item label="告警名称：">
<el-input v-if="type === 0 || type === 1" v-model="form.alarmName" />
<span v-else>{{ form.alarmName }}</span>
</el-form-item>
</el-col>
<el-col :span="10" :offset="2">
<el-form-item label="告警级别：">
<el-select v-if="type === 0 || type === 1" v-model="form.alarmLevel">
<el-option
v-for="(item, index) in alarmLevelList"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
<span v-else>{{ getLevelDesc(form.alarmLevel) }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="适用设备序列号：">
<el-input v-if="type === 0 || type === 1" v-model="form.deviceNo" />
<span v-else>{{ form.deviceNo }}</span>
</el-form-item>
</el-col>
</el-row>
<div class="rule-container">
<div v-for="(triger,index) in form.triggerList" :key="index" class="rule">
<div class="header">
<span class="title">{{ '触发器'+(index+1) }}</span>
<span v-if="type === 0 || type === 1" class="remove_icon" @click="removeTrigger(index)">x</span>
</div>
<div class="body">
<el-row>
<el-col :span="10" style="margin-left: -20px">
<el-form-item label="触发参数：">
<el-select v-if="type === 0 || type === 1" v-model="triger.param">
<el-option
v-for="(item, index) in paramList"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
<span v-else>{{ getParamDesc(triger.param) }}</span>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="9" style="margin-left: -20px">
<el-form-item label="触发条件：">
<el-radio v-model="triger.condition" :disabled="type===2" label=">">大于</el-radio>
<el-radio v-model="triger.condition" :disabled="type===2" label="<">小于</el-radio>
</el-form-item>
</el-col>
<el-col :span="6">
<el-input v-if="type === 0 || type === 1" v-model="triger.value" />
<span v-else style="line-height:40px">{{ triger.value }}</span>
</el-col>
</el-row>
</div>
</div>
</div>
<div v-if="type === 0 || type === 1" class="add" @click="addParam">
<img src="@/assets/images/add_border.png">触发器
</div>
<el-row style="margin-top:20px">
<el-col :span="10">
<el-form-item label="消息推送地址：">
<el-input v-if="type === 0 || type === 1" v-model="form.noticeAddress">
<template slot="prepend">
邮件
</template>
</el-input>
<span v-else>{{ form.noticeAddress }}</span>
</el-form-item>
</el-col>
<el-col :span="10" :offset="2">
<el-form-item label="推送主题：">
<el-input v-if="type === 0 || type === 1" v-model="form.noticeContent" />
<span v-else>{{ form.noticeContent }}</span>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div v-if="type === 0 || type === 1" class="footer">
<el-button size="medium" class="cancel_btn" @click="close">取消</el-button>
<el-button size="medium" type="primary" @click="save">保存</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getList, remove, update, add } from '@/api/rule/ruleManage'
export default {
data() {
return {
date: '',
logList: [],
visible: false,
current: {},
ruleList: [],
form: {
alarmName: '',
alarmLevel: '',
deviceNo: '',
triggerList: [
{
param: '',
condition: '',
value: ''
}
],
noticeAddress: '',
noticeType: 'email',
noticeContent: ''
},
initForm: {
alarmName: '',
alarmLevel: '',
deviceNo: '',
triggerList: [
{
param: '',
condition: '',
value: ''
}
],
noticeAddress: '',
noticeType: 'email',
noticeContent: ''
},
paramList: [
{
value: 'temperature',
label: '温度'
},
{
value: 'humidity',
label: '湿度'
},
{
value: 'co2',
label: 'CO2'
},
{
value: 'so2',
label: 'SO2'
}
],
alarmLevelList: [
{
value: 0,
label: '紧急'
},
{
value: 1,
label: '重要'
},
{
value: 2,
label: '次要'
},
{
value: 3,
label: '提示'
}
],
ruleStatusList: ['未生效', '已生效'],
type: 0 // 0-新增，1-编辑，2-查看
}
},
computed: {
...mapGetters(['org'])
},
created() {
this.getList()
},
mounted() {
this.date = new Date().toLocaleDateString()
},
methods: {
getList() {
getList().then(res => {
this.ruleList = res.data
})
},
getTitle(type) {
switch (type) {
case 0:
return '告警规则新增'
case 1:
return '告警规则编辑'
case 2:
return '告警规则查看'
}
},
getColor(level) {
switch (level) {
case 0:
return '#FF4E00'
case 1:
return '#FFB300'
case 2:
return '#00CCF2'
case 3:
return '#20BE0B'
}
},
getLineColor(level) {
switch (level) {
case 0:
return 'linear-gradient(to right,#ff4e00 0%,#ff4e00 50%,transparent 50%)'
case 1:
return 'linear-gradient(to right,#FFB300 0%,#FFB300 50%,transparent 50%)'
case 2:
return 'linear-gradient(to right,#00CCF2 0%,#00CCF2 50%,transparent 50%)'
case 3:
return 'linear-gradient(to right,#20BE0B 0%,#20BE0B 50%,transparent 50%)'
}
},
getLevelDesc(level) {
switch (level) {
case 0:
return '紧急'
case 1:
return '重要'
case 2:
return '次要'
case 3:
return '提示'
}
},
getParamDesc(param) {
switch (param) {
case 'temperature':
return '温度'
case 'humidity':
return '湿度'
case 'co2':
return 'CO2'
case 'so2':
return 'SO2'
}
},
add() {
this.type = 0
this.visible = true
},
edit(index) {
this.type = 1
this.form = { ...this.ruleList[index], triggerList: JSON.parse(this.ruleList[index].alarmSql) }
this.visible = true
},
view(index) {
this.type = 2
this.form = this.ruleList[index]
this.form.triggerList = JSON.parse(this.form.alarmSql)
this.visible = true
},
remove(id) {
remove({ id }).then(res => {
if (res.code === '200000') {
this.$message.success('删除成功')
this.getList()
}
})
},
start() {},
stop() {},
removeTrigger(index) {
if (this.form.triggerList.length > 1) {
this.form.triggerList.splice(index, 1)
} else {
this.form.triggerList = [{ param: '',
condition: '',
value: '' }]
}
},
addParam() {
const tmp = { param: '',
condition: '',
value: '' }
this.form.triggerList.push(tmp)
},
close() {
this.form = { ...this.initForm }
this.visible = false
},
async save() {
this.form.alarmSql = JSON.stringify(this.form.triggerList)
const data = { ...this.form, ruleStatus: 0, org: this.org }
console.log('data', data)
let res
if (this.type === 0) {
res = await add(data)
}
if (this.type === 1) {
res = await update(data)
}
if (res.code === '200000') {
this.$message.success('操作成功')
this.form = { ...this.initForm }
this.getList()
this.visible = false
}
}
}
}
</script>
<style lang="scss" scoped>
.header {
font-family: Lato;
.title {
color: #174a84;
}
.date {
color: #a5c9ff;
}
}
.content-box {
float: left;
margin-right: 30px;
margin-bottom: 40px;
width: 380px;
height: 350px;
border: 3px solid #ff4e00;
background: rgba(251, 249, 247, 0.8);
box-shadow: 5px 12px 9px rgba(0, 0, 0, 0.16);
font-family: Microsoft YaHei;
padding: 10px 0;
.header {
text-align: center;
span {
.alarm_icon {
width: 40px;
height: 40px;
vertical-align: middle;
margin-right: 10px;
}
font-size: 24px;
font-weight: bold;
}
.line {
margin-top: 15px;
margin-left: 5%;
width: 90%;
height: 2px;
background-size: 18px 100%;
background-repeat: repeat-x;
}
}
.body {
border-bottom: 3px solid #ff4e00;
.body-content {
line-height: 2;
.content-item {
display: inline-block;
width: 50%;
text-align: center;
}
.rule-status::before{
content: '';
display: inline-block;
width: 7px;
height: 7px;
background-color: #FF4E00;
border-radius: 50%;
margin-right: 8px;
}
.font {
font-size: 17px;
color: #5f6874;
}
.content-icon {
margin-right: 10px;
}
}
}
.footer {
display: flex;
align-items: center;
height: 60px;
.footer_btn {
width: 25%;
text-align: center;
border-right: 1px solid #ff4e00;
span {
cursor: pointer;
}
&:last-child {
border-right: none;
}
.footer-icon {
width: 30px;
height: 20px;
}
}
}
}
.dialog_wrapper {
z-index: 2;
position: fixed;
left: 230px;
right: 0;
top: 0;
bottom: 0;
margin: 0;
&::before {
content: '';
position: absolute;
left: -230px;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 2;
}
.dialog-container {
z-index: 10;
width: 1100px;
transform: none;
margin: 10vh auto;
position: relative;
border-radius: 8px;
font-family: PingFangSC-Regular;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
.dialog_header {
background-color: #20be0b;
text-align: center;
color: #fff;
padding: 5px;
position: relative;
p {
font-size: 24px;
font-weight: bold;
margin: 5px auto;
}
.remove_icon {
position: absolute;
font-size: 18px;
right: 15px;
top: 10px;
cursor: pointer;
}
}
.dialog_content {
background-color: #fff;
border-radius: 0 0 8px 8px;
padding: 30px 50px;
.rule-container{
overflow: auto;
max-height: 320px;
}
.rule {
background-color: #f0ffee;
border-radius: 5px;
padding: 25px;
.header {
padding-bottom: 15px;
border-bottom: 1px solid #20be0b;
div {
display: inline-block;
}
.title {
font-size: 20px;
margin-left: 5px;
color: #20be0b;
}
.remove_icon {
font-size: 20px;
float: right;
margin-right: 10px;
cursor: pointer;
}
}
.body {
margin-top: 25px;
}
}
.add {
margin-top: 30px;
text-align: center;
width: 100%;
height: 53px;
line-height: 53px;
background: url('~@/assets/images/bg_green.png') no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 20px;
font-family: Montserrat;
font-weight: 600;
cursor: pointer;
img {
margin-right: 5px;
vertical-align: middle;
}
}
.footer{
text-align: center;
.el-button {
width: 80px;
}
.cancel_btn{
color: #1890FF;
border-color: #1890FF;
}
}
}
}
}
::v-deep .el-form-item {
margin-bottom: 20px;
.el-select {
width: 100%;
}
}
::v-deep .el-form-item__label {
font-size: 16px;
font-weight: normal;
font-family: PingFangSC-Regular;
color: rgba(0, 0, 0, 0.85);
}
::v-deep .el-radio__label {
font-size: 16px;
}
::v-deep .el-radio__inner {
width: 16px;
height: 16px;
}
::v-deep .el-button--primary {
background-color: #789AF3;
border-color: #789AF3;
}
.el-form-item{
span{
font-size: 16px;
}
}
</style>

2
xiuosiot-frontend/src/views/terminal/monitor/index.vue
View File

@ -79,7 +79,7 @@
</div>
</div></el-card>
<iframe v-else src="http://115.236.53.226:9898/home" width="100%" class="ifm" />
<iframe v-else src="http://115.238.53.59:9899/home" width="100%" class="ifm" />
<!-- 设备详情弹窗 -->
<el-dialog title="设备监控详情" :visible.sync="visible" :top="dialogTop">
<div class="card_detail">