modify ruleManage page

xiuosiot-frontend/src/views/rule/ruleManage/index.vue

@@ -55,7 +55,7 @@
           ><svg-icon icon-class="rule_status" class="content-icon" /><span
             class="font"
           >生效状态</span></span>
-          <span class="content-item rule-status">{{ ruleStatusList[item.ruleStatus] }}</span>
+          <span class="content-item rule-status" :class="item.ruleStatus === 1? 'green' : 'red'">{{ ruleStatusList[item.ruleStatus] }}</span>
         </p>
       </div>
       <div class="footer">
@@ -75,18 +75,18 @@
           </span>
         </div>
         <div class="footer_btn">
-          <span title="启动">
+          <span :title="item.ruleStatus === 1 ? '停止' : '启动'">
             <svg-icon
               v-if="item.ruleStatus === 0"
               icon-class="start"
               class="footer-icon"
-              @click="start"
+              @click="execute(item.id,1)"
             />
             <svg-icon
               v-else
               icon-class="stop"
               class="footer-icon"
-              @click="stop"
+              @click="execute(item.id,0)"
             />
           </span>
         </div>
@@ -198,7 +198,7 @@
           </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>
+            <el-button style="border-radius:4px" size="medium" type="primary" @click="save">保存</el-button>
           </div>
         </div>
       </div>
@@ -384,8 +384,15 @@ export default {
         }
       })
     },
-    start() {},
-    stop() {},
+    execute(id, ruleStatus) {
+      update({ id, ruleStatus }).then(res => {
+        if (res.code === '200000') {
+          const msg = ruleStatus === 1 ? '启动成功' : '停止成功'
+          this.$message.success(msg)
+          this.getList()
+        }
+      })
+    },
     removeTrigger(index) {
       if (this.form.triggerList.length > 1) {
         this.form.triggerList.splice(index, 1)
@@ -483,9 +490,16 @@ export default {
         display: inline-block;
         width: 7px;
         height: 7px;
-        background-color: #FF4E00;
         border-radius: 50%;
         margin-right: 8px;
+        margin-bottom: 2px;
+        vertical-align: middle;
+      }
+      .green::before{
+        background-color: #20BE0B;
+      }
+      .red::before{
+        background-color: #FF4E00;
       }
       .font {
         font-size: 17px;