server 模块增加创建规则的弹窗及逻辑

src/views/abnormalAlarm/serverMonitor/instances/cpu.vue

@@ -9,6 +9,7 @@
             placeholder="select..."
             :filter-option="filterOption"
             show-arrow 
+            labelInValue
             :options="serverOptions" 
             @change="onServerChange"
           >
@@ -36,7 +37,7 @@
         </a-col>
       </a-row>
       <div class="cpu-search-btns">
-        <a-button class="cpu-search-btns-ant">Create Alert Rules</a-button>
+        <a-button class="cpu-search-btns-ant" @click="createAlertRules">Create Alert Rules</a-button>
       </div>
     </div>
     <div class="cpu-content">
@@ -115,12 +116,20 @@
     </div>
     <a-modal 
       :title="modalTitle" 
-      :width="1000" 
+      :width="1200" 
       v-model="visible" 
       @cancel="onCancel"
     >
       <div class="modal-content" id="common"></div>
     </a-modal>
+    <CreateRules
+      :visible="visible_rule"
+      :serverList="serverOptions"
+      :currServer="currId"
+      :serverLabel="currLabel"
+      @onCancel="handleCancel"
+      @onOk="handleOk"
+    ></CreateRules>
   </div>
 </template>
 
@@ -129,18 +138,23 @@ import moment from 'moment';
 import * as echarts from 'echarts'
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
 import BoxTitle from '../../components/boxTitle.vue';
+import CreateRules from './createRules.vue';
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 export default {
   components: {
     BoxTitle,
+    CreateRules
   },
   data() {
     return {
+      currId:"",
+      visible_rule: false,
+      currLabel:"",
       queryParams: {
         server: undefined,
         timer: "1h",
-        startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
+        startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
-        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
+        endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
       },
       serverOptions: [],
       timerOptions: [
@@ -165,7 +179,8 @@ export default {
       modalTitle: "",
     }
   },
-  mounted () {
+  mounted() {
+    this.getServerList()
     this.$nextTick(() => {
       setTimeout(() => {
         this.drawChart1()
@@ -176,6 +191,22 @@ export default {
     })
   },
   methods: {
+    createAlertRules() {
+      this.visible_rule = true
+    },
+    handleCancel() {
+      this.visible_rule = false
+    },
+    handleOk(params) {
+      postAction("/alarmRule/create", params).then(res => {
+        if (res.success) {
+          this.visible_rule = false
+          this.$message.success("success")
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
     moment,
     filterOption(input, option) {
       return (
@@ -191,14 +222,31 @@ export default {
               value: item.sourceId
             }
           })
-          this.queryParams.server = this.$route.query.serverId || res.result[0].sourceId
+          this.currId = this.$route.query.serverId || res.result[0].sourceId
+          if (this.$route.query.serverId) {
+            let currOption = this.serverOptions.find(item => {
+              return item.value === this.$route.query.serverId
+            })
+            this.currLabel = currOption.label
+            this.queryParams.server = {
+              key: this.$route.query.serverId,
+              label:this.currLabel
+            }
+          } else {
+            this.currLabel = res.result[0].sourceName
+            this.queryParams.server = {
+              key: res.result[0].sourceId,
+              label:this.currLabel
+            }
+          }
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
         }
       })
     },
     onServerChange(val) {
-      console.log(val);
+      this.currId = val.key
+      this.currLabel = val.label
     },
     onTimeChange(val) {
       console.log(val);

src/views/abnormalAlarm/serverMonitor/instances/createRules.vue

@@ -0,0 +1,351 @@
+<template>
+  <div>
+    <a-modal 
+      title='Add Rule'
+      :width="845" 
+      v-model="visible" 
+      @cancel="onCancel"
+    >
+      <a-form-model
+        ref="al_ruleForm"
+        :model="form"
+        :rules="rules"
+        layout="vertical"
+      >
+        <a-row :gutter="[15,0]">
+          <a-col :span="12">
+            <a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
+              <a-select 
+                v-model="form.sourceType" 
+                :options="typeOptions" 
+                show-arrow 
+                allowClear
+                disabled
+                placeholder="select..." 
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item ref="sourceId" label="Source" prop="sourceId">
+              <a-select 
+                v-model="form.sourceId" 
+                :options="serverList" 
+                show-arrow 
+                allowClear
+                disabled
+                placeholder="select..." 
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="[15,0]">
+          <a-col :span="12">
+            <a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name">
+              <a-input v-model="form.name" placeholder="Pleace enter the alarm rule name" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item ref="monitorItem" label="Monitor Item" prop="itemId">
+              <a-select 
+                v-model="form.itemId" 
+                :options="itemOptions" 
+                show-arrow 
+                allowClear
+                labelInValue
+                placeholder="select..." 
+                @change="onItemChange"
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="[15,0]">
+          <a-col :span="12">
+            <a-form-model-item ref="monitorItem" label="Logic Symbol" prop="operator">
+              <a-select 
+                v-model="form.operator" 
+                :options="operatorOptions" 
+                show-arrow 
+                allowClear
+                placeholder="select..." 
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item ref="threshold" label="Threshold" prop="threshold">
+              <a-input v-model="form.threshold" :suffix="units" placeholder="Pleace enter the threshold value" />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+        <a-row :gutter="[15,0]">
+          <a-col :span="12">
+            <a-form-model-item ref="silenceCycle" label="Silence Cycle" prop="silenceCycle">
+              <a-select 
+                v-model="form.silenceCycle" 
+                :options="silenceCyclerOptions" 
+                show-arrow 
+                allowClear
+                placeholder="select..." 
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="12">
+            <a-form-model-item ref="contactGroup" label="Contact Group" prop="contactId">
+              <a-select 
+                v-model="form.contactId" 
+                :options="contactGroupOptions" 
+                show-arrow 
+                allowClear
+                placeholder="select..." 
+                >
+                <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </a-form-model>
+      <template slot="footer">
+        <a-space class="operators" :size="20">
+          <a-button type="success" @click="onSave">Save</a-button>
+          <a-button type="warn"  @click="onCancel">Cancel</a-button>
+        </a-space>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+export default {
+  props: ["visible","serverList","currServer","serverLabel"],
+  data() {
+    return {
+      form: {
+        sourceType: "Server",
+        sourceId: undefined,
+        name: "",
+        itemId: undefined,
+        operator: undefined,
+        threshold: "",
+        silenceCycle: undefined,
+        contactId: undefined,
+      },
+      units: "",
+      itemOptions: [],
+      typeOptions: [
+        {
+          label: "Server",
+          value: "Server"
+        },
+        {
+          label: "Database",
+          value: "Database"
+        },
+        {
+          label: "E-MAIL",
+          value: "Email"
+        },
+      ],
+      sourceOptions: [],
+      operatorOptions: [
+        {
+          label: ">",
+          value: ">"
+        },
+        {
+          label: "<",
+          value: "<"
+        },
+        {
+          label: ">=",
+          value: ">="
+        },
+        {
+          label: "<=",
+          value: "<="
+        },
+        {
+          label: "==",
+          value: "=="
+        },
+      ],
+      silenceCyclerOptions: [
+        {
+          label: "5 minutes",
+          value: 300
+        },
+        {
+          label: "15 minutes",
+          value: 900
+        },
+        {
+          label: "30 minutes",
+          value: 1800
+        },
+        {
+          label: "60 minutes",
+          value: 3600
+        },
+        {
+          label: "3 hours",
+          value: 10800
+        },
+        {
+          label: "6 hours",
+          value: 21600
+        },
+        {
+          label: "12 hours",
+          value: 43200
+        },
+        {
+          label: "24 hours",
+          value: 86400
+        }
+      ],
+      contactGroupOptions: [],
+      rules: {
+        sourceType: [
+          { required: true, message: 'Please select a sourceType', trigger: 'change'},
+        ],
+        sourceId: [
+          { required: true, message: 'Please select a source', trigger: 'change'},
+        ],
+        name: [
+          { required: true, message: 'Please input alarmRule name'},
+        ],
+        itemId: [
+          { required: true, message: 'Please select a monitorItem', trigger: 'change'},
+        ],
+        operator: [
+          { required: true, message: 'Please select a logicSymbol', trigger: 'change'},
+        ],
+        threshold: [
+          { required: true, message: 'Please input threshold'},
+        ],
+        silenceCycle: [
+          { required: true, message: 'Please select a silenceCycle', trigger: 'change'},
+        ],
+        contactId: [
+          { required: true, message: 'Please select a contactGroup', trigger: 'change'},
+        ],
+      }
+    }
+  },
+  mounted() {
+    console.log(this.currServer);
+    this.sourceOptions = this.serverList
+  },
+  watch: {
+    currServer(newValue, oldValue) {
+      this.form.sourceId = newValue
+    },
+    serverLabel(newValue, oldValue) {
+      this.getItems(newValue)
+    },
+  },
+  methods: {
+    onCancel() {
+      this.$emit("onCancel")
+      this.resetForm()
+    },
+    onItemChange(val, option) {
+      this.form.itemId = val
+      this.units = option.data.props.units
+    },
+    onSave() {
+      this.$refs.al_ruleForm.validate((valid) => {
+        if (valid) { 
+          let params = {
+            silenceCycle:this.form.silenceCycle,
+            contactId:this.form.contactId,
+            sourceId:this.form.sourceId,
+            sourceType:this.form.sourceType,
+            itemId:this.form.itemId.key,
+            rule: {
+              name: this.form.itemId.label,
+              operator: this.form.operator,
+              threshold: this.form.threshold,
+              units: this.units,
+            },
+            name: this.form.name
+          }
+          this.$emit("onCanonSavecel", params)
+          this.resetForm()
+        }
+      })
+    },
+    onItemChange(val, option) {
+      this.form.itemId = val
+      this.units = option.data.props.units
+    },
+    getItems(val) {
+      getAction("/alarmRule/getItems", {sourceName:val}).then(res => {
+        if (res.success) {
+          this.itemOptions = res.result.map(item => {
+            return {
+              label: item.name,
+              value: item.itemId,
+              units:item.units
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    resetForm() {
+      this.$refs.al_ruleForm.resetFields();
+      this.form= {
+        sourceType: undefined,
+        sourceId: undefined,
+        name: "",
+        itemId: undefined,
+        operator: undefined,
+        threshold: "",
+        silenceCycle: undefined,
+        contactId: undefined,
+      }
+      this.sourceOptions =[]
+      this.itemOptions = []
+      this.units = ""
+    }
+  },
+}
+</script>
+
+<style lang="less" scoped>
+/deep/.ant-modal-title{
+  letter-spacing: 1px;
+}
+.operators {
+  width: 100%;
+  justify-content: center;
+  .ant-btn {
+    width: 92px;
+  }
+}
+.ant-select {
+  .ant-select-arrow-icon {
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+  &-open {
+    .ant-select-arrow-icon {
+      transform: rotate(180deg);
+    }
+  }
+}
+.ant-select-dropdown-content{
+  position: relative;
+  background: #03353f;
+}
+</style>

src/views/abnormalAlarm/serverMonitor/instances/monitor.vue

@@ -9,6 +9,7 @@
             placeholder="select..."
             :filter-option="filterOption"
             show-arrow 
+            labelInValue
             :options="serverOptions" 
             @change="onServerChange"
           >
@@ -36,7 +37,7 @@
         </a-col>
       </a-row>
       <div class="monitor-search-btns">
-        <a-button class="monitor-search-btns-ant">Create Alert Rules</a-button>
+        <a-button class="monitor-search-btns-ant" @click="createAlertRules">Create Alert Rules</a-button>
       </div>
     </div>
     <div class="monitor-content">
@@ -144,12 +145,20 @@
     </div>
     <a-modal 
       :title="modalTitle" 
-      :width="1000" 
+      :width="1200" 
       v-model="visible" 
       @cancel="onCancel"
     >
       <div class="modal-content" id="common"></div>
     </a-modal>
+    <CreateRules
+      :visible="visible_rule"
+      :serverList="serverOptions"
+      :currServer="currId"
+      :serverLabel="currLabel"
+      @onCancel="handleCancel"
+      @onOk="handleOk"
+    ></CreateRules>
   </div>
 </template>
 
@@ -160,13 +169,18 @@ import dateFormat from '@/components/jeecg/JEasyCron/format-date'
 import BoxTitle from '../../components/boxTitle.vue';
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 import LineChart from './lineChart.vue';
+import CreateRules from './createRules.vue';
 export default {
   components: {
     BoxTitle,
-    LineChart
+    LineChart,
+    CreateRules
   },
   data() {
     return {
+      currId:"",
+      visible_rule: false,
+      currLabel:"",
       queryParams: {
         server: undefined,
         timer: "1h",
@@ -266,14 +280,26 @@ export default {
       myLine: null
     }
   },
-  mounted () {
+  mounted() {
-    this.$nextTick(() => {
+    this.getServerList()
-      setTimeout(() => {
-        // this.drawLine()
-      },0)
-    })
   },
   methods: {
+    createAlertRules() {
+      this.visible_rule = true
+    },
+    handleCancel() {
+      this.visible_rule = false
+    },
+    handleOk(params) {
+      postAction("/alarmRule/create", params).then(res => {
+        if (res.success) {
+          this.visible_rule = false
+          this.$message.success("success")
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
     moment,
     filterOption(input, option) {
       return (
@@ -289,14 +315,31 @@ export default {
               value: item.sourceId
             }
           })
-          this.queryParams.server = this.$route.query.serverId || res.result[0].sourceId
+          this.currId = this.$route.query.serverId || res.result[0].sourceId
+          if (this.$route.query.serverId) {
+            let currOption = this.serverOptions.find(item => {
+              return item.value === this.$route.query.serverId
+            })
+            this.currLabel = currOption.label
+            this.queryParams.server = {
+              key: this.$route.query.serverId,
+              label:this.currLabel
+            }
+          } else {
+            this.currLabel = res.result[0].sourceName
+            this.queryParams.server = {
+              key: res.result[0].sourceId,
+              label:this.currLabel
+            }
+          }
         } else {
           this.$message.warning("This operation fails. Contact your system administrator")
         }
       })
     },
     onServerChange(val) {
-      console.log(val);
+      this.currId = val.key
+      this.currLabel = val.label
     },
     onTimeChange(val) {
       console.log(val);