diff --git a/xiuosiot-frontend/src/api/rule/ruleManage.js b/xiuosiot-frontend/src/api/rule/ruleManage.js
new file mode 100644
index 0000000..a14e772
--- /dev/null
+++ b/xiuosiot-frontend/src/api/rule/ruleManage.js
@@ -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
+  })
+}
diff --git a/xiuosiot-frontend/src/assets/images/add_border.png b/xiuosiot-frontend/src/assets/images/add_border.png
new file mode 100644
index 0000000..af08d82
Binary files /dev/null and b/xiuosiot-frontend/src/assets/images/add_border.png differ
diff --git a/xiuosiot-frontend/src/assets/images/bg_green.png b/xiuosiot-frontend/src/assets/images/bg_green.png
new file mode 100644
index 0000000..78f523f
Binary files /dev/null and b/xiuosiot-frontend/src/assets/images/bg_green.png differ
diff --git a/xiuosiot-frontend/src/icons/svg/alarm.svg b/xiuosiot-frontend/src/icons/svg/alarm.svg
new file mode 100644
index 0000000..f554887
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/alarm.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/icons/svg/edit.svg b/xiuosiot-frontend/src/icons/svg/edit.svg
new file mode 100644
index 0000000..7bc113d
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/edit.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/icons/svg/more.svg b/xiuosiot-frontend/src/icons/svg/more.svg
new file mode 100644
index 0000000..655e9ba
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/more.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/icons/svg/remove.svg b/xiuosiot-frontend/src/icons/svg/remove.svg
new file mode 100644
index 0000000..dfd4d36
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/remove.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/icons/svg/rule_msg_type.svg b/xiuosiot-frontend/src/icons/svg/rule_msg_type.svg
new file mode 100644
index 0000000..1066593
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/rule_msg_type.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/icons/svg/rule_name.svg b/xiuosiot-frontend/src/icons/svg/rule_name.svg
new file mode 100644
index 0000000..f1f7071
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/rule_name.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/icons/svg/rule_status.svg b/xiuosiot-frontend/src/icons/svg/rule_status.svg
new file mode 100644
index 0000000..0f746c5
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/rule_status.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/icons/svg/rule_terminal_no.svg b/xiuosiot-frontend/src/icons/svg/rule_terminal_no.svg
new file mode 100644
index 0000000..8980cd9
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/rule_terminal_no.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/icons/svg/start.svg b/xiuosiot-frontend/src/icons/svg/start.svg
new file mode 100644
index 0000000..3f9167e
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/start.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/icons/svg/stop.svg b/xiuosiot-frontend/src/icons/svg/stop.svg
new file mode 100644
index 0000000..98abbc2
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/stop.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/icons/svg/view.svg b/xiuosiot-frontend/src/icons/svg/view.svg
new file mode 100644
index 0000000..000c276
--- /dev/null
+++ b/xiuosiot-frontend/src/icons/svg/view.svg
@@ -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>
diff --git a/xiuosiot-frontend/src/router/index.js b/xiuosiot-frontend/src/router/index.js
index 4f97b0f..ec0a666 100644
--- a/xiuosiot-frontend/src/router/index.js
+++ b/xiuosiot-frontend/src/router/index.js
@@ -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 }
       }
     ]
   },
diff --git a/xiuosiot-frontend/src/store/getters.js b/xiuosiot-frontend/src/store/getters.js
index 1f42a78..bb8cbea 100644
--- a/xiuosiot-frontend/src/store/getters.js
+++ b/xiuosiot-frontend/src/store/getters.js
@@ -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,
diff --git a/xiuosiot-frontend/src/store/modules/user.js b/xiuosiot-frontend/src/store/modules/user.js
index b9de07a..701f421 100644
--- a/xiuosiot-frontend/src/store/modules/user.js
+++ b/xiuosiot-frontend/src/store/modules/user.js
@@ -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])
diff --git a/xiuosiot-frontend/src/views/rule/ruleManage/index.vue b/xiuosiot-frontend/src/views/rule/ruleManage/index.vue
new file mode 100644
index 0000000..58a6cc4
--- /dev/null
+++ b/xiuosiot-frontend/src/views/rule/ruleManage/index.vue
@@ -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>
diff --git a/xiuosiot-frontend/src/views/terminal/monitor/index.vue b/xiuosiot-frontend/src/views/terminal/monitor/index.vue
index 05c1a2f..34f5617 100644
--- a/xiuosiot-frontend/src/views/terminal/monitor/index.vue
+++ b/xiuosiot-frontend/src/views/terminal/monitor/index.vue
@@ -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">