analysis monitor 模块的规则页面接口联调

src/views/abnormalAlarm/analysisMonitor/alarmRules/index.vue

@@ -25,20 +25,12 @@
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
           </a-select>
         </a-col>
-        <a-col flex="310px">
+        <a-col flex="336px">
           <span class="item-label">Data Sources</span>
-          <a-select style="width:180px"
+          <DicSelect
-            v-model="queryParams.source" 
+            v-model="queryParams.source"
-            mode="multiple" 
+            dictCode="alarm_analyse_rule_source"
-            placeholder="select..."
+          />
-            :maxTagCount="1" 
-            :filter-option="filterOption"
-            show-arrow 
-            :options="sourceOptions" 
-            @change="onSourceChange"
-          >
-            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
-          </a-select>
         </a-col>
         <a-col flex="265px">
           <span class="item-label">Nuclide</span>
@@ -68,67 +60,69 @@
     <div class="rules-content">
       <a-spin :spinning="spinning">
         <div class="monitor-list">
-          <div class="monitor-list-item">
+          <div class="monitor-list-item" v-for="item in monitorList" :key="item.id">
             <div class="monitor-list-item-title">
-              <div class="monitor-list-item-title-name">asdfsd</div>
+              <div class="monitor-list-item-title-name">{{ item.name }}</div>
               <div class="monitor-list-item-title-server">
                 <span style="color: #5b9cba;">Qualifier：</span>            
-                <span style="color: #ade6ee;">FULL</span>
+                <span style="color: #ade6ee;">{{ item.spectralQualifier.join("/") }}</span>
               </div>
             </div>
             <div class="monitor-list-item-content">
               <div class="monitor-list-item-content-info">
-                <div>
+                <a-row>
-                  Source：
+                  <a-col :span="5" class="monitor-list-item-content-info-key">Source：</a-col>
                   <a-tooltip>
                     <template slot="title">
-                      asdfasdfas
+                      {{ item.source.join("/") }}
                     </template>
-                    <span>asdfasdfas</span>
+                  <a-col :span="17" class="monitor-list-item-content-info-val">
+                    {{ item.source.join("/") }}
+                    </a-col>
                   </a-tooltip>
-                </div>
+                </a-row>
-                <div>
+                <a-row>
-                  Stations：
+                  <a-col :span="5" class="monitor-list-item-content-info-key">Stations：</a-col>
                   <a-tooltip>
                     <template slot="title">
-                      asdfasdfas
+                      {{ item.stations.join("/") }}
                     </template>
-                    <span>asdfasdfas</span>
+                  <a-col :span="17" class="monitor-list-item-content-info-val">
+                    {{ item.stations.join("/") }}
+                    </a-col>
                   </a-tooltip>
-                </div>
+                </a-row>
-                <div>
+                <a-row>
-                  Nuclides：
+                  <a-col :span="5" class="monitor-list-item-content-info-key">Nuclides：</a-col>
                   <a-tooltip>
                     <template slot="title">
-                      asdfasdfas
+                      {{ item.nuclides.join("/") }}
                     </template>
-                    <span>asdfasdfas</span>
+                  <a-col :span="17" class="monitor-list-item-content-info-val">
+                    {{ item.nuclides.join("/") }}
+                    </a-col>
                   </a-tooltip>
-                </div>
+                </a-row>
               </div>
-              <div :class="[1==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
+              <div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
-                {{ 1==1?"Enable":"Disabled" }}
-              </div>
-              <!-- <div :class="[item.enabled==1?'monitor-list-item-content-enable':'monitor-list-item-content-disable', 'monitor-list-item-content-btn']">
                 {{ item.enabled==1?"Enable":"Disabled" }}
-              </div> -->
+              </div>
             </div>
             <div class="monitor-list-item-footer">
               <div class="monitor-list-item-footer-group">
                 <span style="color: #5b9cba;">Alarm Contact Group：</span>
-                <span style="color: #ade6ee;">sadfasdfa</span>
+                <span style="color: #ade6ee;">{{ item.groupName }}</span>
               </div>
               <div class="monitor-list-item-footer-actions">
-                <span title="Edit" class="actions-edit" @click="editItem()"></span>
+                <span title="Edit" class="actions-edit" @click="editItem(item.id)"></span>
-                <span title="Delete" class="actions-delete" @click="deleteItem()"></span>
+                <span title="Delete" class="actions-delete" @click="deleteItem(item.id)"></span>
-                <span v-if="1==1" title="Enable" class="actions-enable" @click="changeItemStatus()">
+                <span v-if="1==1" title="Enable" class="actions-enable" @click="changeItemStatus(item.id,item.enabled)">
                 </span>
-                <span v-if="1==0" title="Disabled" class="actions-disable" @click="changeItemStatus()">
+                <span v-if="1==0" title="Disabled" class="actions-disable" @click="changeItemStatus(item.id,item.enabled)">
                 </span>
               </div>
             </div>
           </div>
-          <!-- <j-multi-select-tag type="checkbox" dictCode="spectral_qualifier" /> -->
         </div>
       </a-spin>
       <a-pagination 
@@ -147,7 +141,7 @@
     </div>
     <a-modal 
       :title="isAdd ? 'Add Rule' : 'Edit Rule'" 
-      :width="845" 
+      :width="800" 
       v-model="visible" 
       @cancel="onCancel"
     >
@@ -168,8 +162,8 @@
           />
         </a-form-item>
         
-        <a-form-item label="Analyse Source">
+        <a-form-item label="Source">
-          <j-multi-select-tag 
+          <dic-select
             type="checkbox"
             dictCode="alarm_analyse_rule_source"
             v-decorator="[
@@ -183,6 +177,7 @@
         </a-form-item>
         <a-form-item label="Station">
           <a-select
+            class="form-select"
             mode="multiple" 
             placeholder="select..."
             :filter-option="filterOption"
@@ -201,6 +196,7 @@
         </a-form-item>
         <a-form-item label="Nuclide">
           <a-select
+            class="form-select"
             mode="multiple" 
             placeholder="select..."
             :maxTagCount="5" 
@@ -218,8 +214,8 @@
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
           </a-select>
         </a-form-item>
-        <a-form-item label="Spectral Qualifier">
+        <a-form-item label="Qualifier">
-          <j-multi-select-tag
+          <dic-select
             type="checkbox"
             dictCode="spectral_qualifier"
             v-decorator="[
@@ -232,7 +228,10 @@
           />
         </a-form-item>
         <a-form-item label="Condition">
-          <a-checkbox-group 
+          <dic-select
+            type="checkbox"
+            layout="vertical"
+            dictCode="alarm_analyse_rule_condition"
             v-decorator="[
               'condition', 
               { 
@@ -241,10 +240,25 @@
               }
             ]"
           >
-            <a-row v-for="(item, key) in dictOptions" :key="key" >
+          </dic-select>
-              <a-checkbox :value="item.value">{{ item.text || item.label }}</a-checkbox>
+        </a-form-item>
-            </a-row>
+        <a-form-item label="Contact Group">
-          </a-checkbox-group>
+          <a-select
+            class="form-select"
+            :options="contactGroupOptions" 
+            show-arrow 
+            allowClear
+            placeholder="select..." 
+            v-decorator="[
+              'contactGroup', 
+              { 
+                rules: [{ required: true }],
+                initialVale: this.formVal.contactGroup
+              }
+            ]"
+          >
+            <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+          </a-select>
         </a-form-item>
         <a-form-item label="Remark">
           <a-input
@@ -271,7 +285,11 @@
 <script>
 import { ajaxGetDictItems } from '@/api/api'
 import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+import DicSelect from '../../components/dicSelect.vue';
 export default {
+  components: {
+    DicSelect,
+  },
   data() {
     return {
       isAdd: true,
@@ -280,7 +298,7 @@ export default {
       queryParams: {
         station: undefined,
         source: undefined,
-        buclide: undefined
+        nuclide: undefined
       },
       sourceOptions: [
         {
@@ -307,9 +325,9 @@ export default {
         total: 0
       },
       labelCol: { span: 4 },
-      wrapperCol: { span: 14 },
+      wrapperCol: { span: 18 },
       form: this.$form.createForm(this),
-      dictOptions: [],
+      contactGroupOptions: [],
       formVal: {
         name: "",
         source: [],
@@ -317,13 +335,17 @@ export default {
         nuclide: [],
         qualifier: [],
         condition: [],
+        contactGroup: undefined,
         desc: ""
-      }
+      },
+      monitorList: [],
+      currId:"",
     }
   },
   created () {
-    this.getCondition();
     this.getStationList();
+    this.getAlarmGroup();
+    this.getAlarmRulesPage()
   },
   methods: {
     getStationList() {
@@ -354,44 +376,125 @@ export default {
       );
     },
     onStationChange(val) {
-      console.log(val);
+      this.queryParams.station = val
     },
     onSourceChange(val) {
-      console.log(val);
+      this.queryParams.source = val
     },
     onNuclideChange(val) {
-      console.log(val);
+      this.queryParams.nuclide = val
+    },
+    getAlarmRulesPage() {
+      this.spinning = true
+      let params = {
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize,
+        // stations: this.queryParams.station,
+        // source: this.queryParams.source,
+        source: [1,2],
+        stations: [101,102],
+      }
+      getAction("/alarmAnalysisRule/findPage", params).then(res => {
+        this.spinning = false
+        if (res.success) {
+          this.monitorList = res.result.records
+          this.ipagination.total = res.result.total
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
     },
     onSearch() {
-      // this.getAlarmRulesPage()
+      this.getAlarmRulesPage()
     },
-    editItem(id) { },
+    editItem(id) { 
-    deleteItem(id) { },
+      this.currId = id
+     },
+    deleteItem(id) { 
+      let _this = this
+      this.$confirm({
+        title: 'Are you sure to delete this item?',
+        onOk() {
+          deleteAction("/alarmAnalysisRule/delete", {id:id}).then(res => {
+            if (res.success) {
+              _this.$message.success("success")
+              _this.getAlarmRulesPage()
+            } else {
+              _this.$message.warning("This operation fails. Contact your system administrator")
+            }
+          })
+        },
+        onCancel() {
+          console.log('Cancel');
+        },
+      });
+     },
     changeItemStatus(id, isEnabled) { },
     handlePageChange(page, pageSize) {
       this.ipagination.current = page
       this.ipagination.pageSize = pageSize
-      // this.getAlarmRulesPage()
+      this.getAlarmRulesPage()
     },
     handleSizeChange(current, size) {
       this.ipagination.current = current
       this.ipagination.pageSize = size
-      // this.getAlarmRulesPage()
+      this.getAlarmRulesPage()
     },
-    getCondition() {
+    getAlarmGroup() {
-      //根据字典Code, 初始化字典数组
+      let params = {
-      ajaxGetDictItems("alarm_analyse_rule_condition", null).then((res) => {
+        pageNo: 1,
+        pageSize: 9999
+      }
+      getAction("/alarmContactGroup/findPage", params).then(res => {
         if (res.success) {
-          this.dictOptions = res.result;
+          this.contactGroupOptions = res.result.records.map(item => {
+            return {
+              label: item.name,
+              value: item.id
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
         }
       })
     },
     onSave() {
       this.form.validateFields((err, values) => { 
-        console.log('Received values of form: ', values);
+        // if (!err) { 
-        if (!err) { 
+          let params = {
-          this.visible = false
+            conditions:values.condition,
-        }
+            name:values.name,
+            remark:values.remark,
+            stations:values.station.join(","),
+            source: values.source,
+            enabled: 1,
+            // nuclides:values.nuclide.join(","),
+            nuclides:"A406,Bu12",
+            contactGroup:values.contactGroup,
+            spectralQualifier: values.qualifier,
+          }
+          if (this.isAdd) {
+            postAction("/alarmAnalysisRule/add", params).then(res => {
+              if (res.success) {
+                this.visible = false
+                this.$message.success("success")
+                this.getAlarmRulesPage()
+              } else {
+                this.$message.warning("This operation fails. Contact your system administrator")
+              }
+            })
+          } else {
+            httpAction("/alarmAnalysisRule/edit", {...params,id: this.currId}, "put").then(res => {
+              if (res.success) {
+                this.visible = false
+                this.$message.success("success")
+                this.getAlarmRulesPage()
+              } else {
+                this.$message.warning("This operation fails. Contact your system administrator")
+              }
+            })
+          }
+        // }
       })
     },
     onCancel() {
@@ -406,6 +509,12 @@ export default {
 .ant-row-flex{
   flex-flow: nowrap;
 }
+.ant-select{
+  width: 206px;
+}
+.form-select{
+  width: 100%;
+}
 .operators {
   width: 100%;
   justify-content: center;
@@ -508,9 +617,17 @@ export default {
           font-family: ArialMT;
           font-size: 16px;
           color: #ade6ee;
-          // span{
+          &-key{
-          //   display: block;
+            // display: inline-block;
-          // }
+            // width: 120px;
+            // vertical-align: middle;
+          }
+          &-val{
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            vertical-align: middle;
+          }
         }
         &-btn{
           margin-top: 10px;

src/views/abnormalAlarm/components/dicSelect.vue

@@ -0,0 +1,141 @@
+<template>
+  <a-checkbox-group v-if="tagType=='checkbox'" @change="onChange" :value="arrayValue" :disabled="disabled">
+    <template v-if="layout=='vertical'">
+      <a-row v-for="(item, key) in dictOptions" :key="key" >
+        <a-checkbox :value="item.value">{{ item.text || item.label }}</a-checkbox>
+      </a-row>
+    </template>
+    <template v-else>
+      <a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text || item.label }}</a-checkbox>
+    </template>
+  </a-checkbox-group>
+
+  <a-select
+    v-else-if="tagType=='select'"
+    :value="arrayValue"
+    @change="onChange"
+    :disabled="disabled"
+    mode="multiple"
+    :maxTagCount="1" 
+    :placeholder="placeholder"
+    :getPopupContainer="getParentContainer"
+    optionFilterProp="children"
+    :filterOption="filterOption"
+    allowClear>
+    <a-select-option
+      v-for="(item,index) in dictOptions"
+      :key="index"
+      :value="item.value">
+      <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
+        {{ item.text || item.label }}
+      </span>
+    </a-select-option>
+  </a-select>
+
+</template>
+
+<script>
+  import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
+  export default {
+    name: 'JMultiSelectTag',
+    props: {
+      layout: String,
+      dictCode: String,
+      placeholder: String,
+      disabled: Boolean,
+      value: String,
+      type: String,
+      options:Array,
+      spliter:{
+        type: String,
+        required: false,
+        default: ','
+      },
+      popContainer:{
+        type:String,
+        default:'',
+        required:false
+      },
+    },
+    data() {
+      return {
+        dictOptions: [],
+        tagType:"",
+        arrayValue:!this.value?[]:this.value.split(this.spliter)
+      }
+    },
+    created() {
+      if(!this.type || this.type==="list_multi"){
+        this.tagType = "select"
+      }else{
+        this.tagType = this.type
+      }
+      //获取字典数据
+      //this.initDictData();
+    },
+    watch:{
+      options: function(val){
+        this.setCurrentDictOptions(val);
+      },
+      dictCode:{
+        immediate:true,
+        handler() {
+          this.initDictData()
+        },
+      },
+      value (val) {
+        if(!val){
+          this.arrayValue = []
+        }else{
+          this.arrayValue = this.value.split(this.spliter)
+        }
+      }
+    },
+    methods: {
+      initDictData() {
+        if(this.options && this.options.length>0){
+          this.dictOptions = [...this.options]
+        }else{
+          //优先从缓存中读取字典配置
+          let cacheOption = getDictItemsFromCache(this.dictCode)
+          if(cacheOption && cacheOption.length>0){
+            this.dictOptions = cacheOption
+            return
+          }
+          //根据字典Code, 初始化字典数组
+          ajaxGetDictItems(this.dictCode, null).then((res) => {
+            if (res.success) {
+              this.dictOptions = res.result;
+            }
+          })
+        }
+
+      },
+      onChange (selectedValue) {
+        this.$emit('change', selectedValue.join(this.spliter));
+      },
+      setCurrentDictOptions(dictOptions){
+        this.dictOptions = dictOptions
+      },
+      getCurrentDictOptions(){
+        return this.dictOptions
+      },
+      getParentContainer(node){
+        if(!this.popContainer){
+          return node.parentNode
+        }else{
+          return document.querySelector(this.popContainer)
+        }
+      },
+      // update--begin--autor:lvdandan-----date:20201120------for：LOWCOD-1086 下拉多选框,搜索时只字典code进行搜索不能通过字典text搜索
+      filterOption(input, option) {
+        return option.componentOptions.children[0].children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      }
+      // update--end--autor:lvdandan-----date:20201120------for：LOWCOD-1086 下拉多选框,搜索时只字典code进行搜索不能通过字典text搜索
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    }
+  }
+</script>