From 487418b23ade58b0dc8b796e41e2d31686e26c8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <peiyu_ren@163.com>
Date: Mon, 11 Dec 2023 15:19:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=97=E5=85=B8=E6=95=B0=E6=8D=AE=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=B0=83=E6=95=B4=E6=94=AF=E6=8C=81=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E5=A4=9A=E9=80=89=EF=BC=8C=20Analysis=20Monitor=20=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97=20Alarm=20History=20=E6=90=9C=E7=B4=A2=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5=E8=B0=83=E6=95=B4=EF=BC=8CData=20Sources=20=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E5=AD=97=E5=85=B8=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dict/JDictSelectTag.vue        | 202 ++++++++++--------
 .../abnormalAlarm/components/searchBar.vue    | 161 +++++++-------
 2 files changed, 194 insertions(+), 169 deletions(-)

diff --git a/src/components/dict/JDictSelectTag.vue b/src/components/dict/JDictSelectTag.vue
index 1b4f0d6..5918142 100644
--- a/src/components/dict/JDictSelectTag.vue
+++ b/src/components/dict/JDictSelectTag.vue
@@ -1,16 +1,33 @@
 <template>
-  <a-radio-group v-if="tagType=='radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">
+  <a-radio-group v-if="tagType == 'radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">
     <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
   </a-radio-group>
 
-  <a-radio-group v-else-if="tagType=='radioButton'"  buttonStyle="solid" @change="handleInput" :value="getValueSting" :disabled="disabled">
+  <a-radio-group
+    v-else-if="tagType == 'radioButton'"
+    buttonStyle="solid"
+    @change="handleInput"
+    :value="getValueSting"
+    :disabled="disabled"
+  >
     <a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio-button>
   </a-radio-group>
 
-  <a-select v-else-if="tagType=='select'" :getPopupContainer = "getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" :allowClear="allowClear" @change="handleInput">
+  <a-select
+    v-else-if="tagType == 'select'"
+    :getPopupContainer="getPopupContainer"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :value="getValueSting"
+    :allowClear="allowClear"
+    show-arrow
+    :mode="modeType"
+    :maxTagCount="1"
+    @change="handleInput"
+  >
     <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
     <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
-      <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
+      <span style="display: inline-block; width: 100%" :title="item.text || item.label">
         {{ item.text || item.label }}
       </span>
     </a-select-option>
@@ -18,97 +35,100 @@
 </template>
 
 <script>
-  import {ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
+import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
 
-  export default {
-    name: "JDictSelectTag",
-    props: {
-      dictCode: String,
-      placeholder: String,
-      disabled: Boolean,
-      value: [String, Number],
-      type: String,
-      getPopupContainer:{
-        type: Function,
-        default: (node) => node.parentNode
-      },
-      allowClear: {
-        type: Boolean,
-        default: true
-      }
+export default {
+  name: 'JDictSelectTag',
+  props: {
+    modeType: String,
+    dictCode: String,
+    placeholder: String,
+    disabled: Boolean,
+    value: [String, Number, Array],
+    type: String,
+    getPopupContainer: {
+      type: Function,
+      default: (node) => node.parentNode,
     },
-    data() {
-      return {
-        dictOptions: [],
-        tagType:""
-      }
+    allowClear: {
+      type: Boolean,
+      default: true,
     },
-    watch:{
-      dictCode:{
-        immediate:true,
-        handler() {
-          this.initDictData()
-        },
-      }
-    },
-    created() {
-      // console.log(this.dictCode);
-      if(!this.type || this.type==="list"){
-        this.tagType = "select"
-      }else{
-        this.tagType = this.type
-      }
-      //获取字典数据
-      // this.initDictData();
-    },
-    computed: {
-      getValueSting(){
-        // update-begin author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
-        // 当有null或“” placeholder不显示
-        return this.value != null ? this.value.toString() : undefined;
-        // update-end author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
-      },
-    },
-    methods: {
-      initDictData() {
-        //优先从缓存中读取字典配置
-        if(getDictItemsFromCache(this.dictCode)){
-          this.dictOptions = getDictItemsFromCache(this.dictCode);
-          return
-        }
-
-        //根据字典Code, 初始化字典数组
-        ajaxGetDictItems(this.dictCode, null).then((res) => {
-          if (res.success) {
-//                console.log(res.result);
-            this.dictOptions = res.result;
-          }
-        })
-      },
-      handleInput(e='') {
-        let val;
-        if(Object.keys(e).includes('target')){
-          val = e.target.value
-        }else{
-          val = e
-        }
-        console.log(val);
-        this.$emit('change', val? val: undefined);
-        //LOWCOD-2146 【菜单】数据规则，选择自定义SQL 规则值无法输入空格
-        this.$emit('input', val? val: undefined);
-      },
-      setCurrentDictOptions(dictOptions){
-        this.dictOptions = dictOptions
-      },
-      getCurrentDictOptions(){
-        return this.dictOptions
-      }
-    },
-    model:{
-      prop: 'value',
-      event: 'change'
+  },
+  data() {
+    return {
+      dictOptions: [],
+      tagType: '',
     }
-  }
+  },
+  watch: {
+    dictCode: {
+      immediate: true,
+      handler() {
+        this.initDictData()
+      },
+    },
+  },
+  created() {
+    // console.log(this.dictCode);
+    if (!this.type || this.type === 'list') {
+      this.tagType = 'select'
+    } else {
+      this.tagType = this.type
+    }
+    //获取字典数据
+    // this.initDictData();
+  },
+  computed: {
+    getValueSting() {
+      // update-begin author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
+      // 当有null或“” placeholder不显示
+      // return this.value != null ? this.value.toString() : undefined
+      return Array.isArray(this.value) ? this.value : this.value != null ? this.value.toString() : undefined
+      // update-end author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
+    },
+  },
+  methods: {
+    initDictData() {
+      //优先从缓存中读取字典配置
+      if (getDictItemsFromCache(this.dictCode)) {
+        this.dictOptions = getDictItemsFromCache(this.dictCode)
+        return
+      }
+
+      //根据字典Code, 初始化字典数组
+      ajaxGetDictItems(this.dictCode, null).then((res) => {
+        if (res.success) {
+          //                console.log(res.result);
+          this.dictOptions = res.result
+        }
+      })
+    },
+    handleInput(e = '') {
+      console.log('qweq', e)
+      let val
+      if (Object.keys(e).includes('target')) {
+        val = e.target.value
+      } else {
+        val = e
+      }
+      console.log(val)
+      this.$emit('change', val ? val : undefined)
+      //LOWCOD-2146 【菜单】数据规则，选择自定义SQL 规则值无法输入空格
+      this.$emit('input', val ? val : undefined)
+    },
+    setCurrentDictOptions(dictOptions) {
+      this.dictOptions = dictOptions
+    },
+    getCurrentDictOptions() {
+      return this.dictOptions
+    },
+  },
+  model: {
+    prop: 'value',
+    event: 'change',
+  },
+}
 </script>
 
 <style scoped>
diff --git a/src/views/abnormalAlarm/components/searchBar.vue b/src/views/abnormalAlarm/components/searchBar.vue
index 58c5494..c3f3547 100644
--- a/src/views/abnormalAlarm/components/searchBar.vue
+++ b/src/views/abnormalAlarm/components/searchBar.vue
@@ -4,87 +4,92 @@
       <a-col flex="190px">
         <a-input placeholder="search..." />
       </a-col>
-      <a-col flex="310px" v-if="type=='alarmCenter'">
+      <a-col flex="310px" v-if="type == 'alarmCenter'">
         <a-form-model-item label="Type">
-          <a-select 
-            :value="queryParams.types" 
-            mode="multiple" 
-            :maxTagCount="1" 
-            :options="typeOptions" 
-            show-arrow 
+          <a-select
+            :value="queryParams.types"
+            mode="multiple"
+            :maxTagCount="1"
+            :options="typeOptions"
+            show-arrow
             allowClear
             @change="onTypeChange"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
             <div slot="dropdownRender" slot-scope="menu">
               <v-nodes :vnodes="menu" />
-              <a-divider style="margin: 0;" />
-              <div
-                style="padding: 4px 12px; cursor: pointer;"
-                @mousedown="e => e.preventDefault()"
-              >
-                <a-checkbox v-model="allVal" @change="handleAllClickBox"><span @click.prevent="handleAllClick">ALL</span></a-checkbox>
+              <a-divider style="margin: 0" />
+              <div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
+                <a-checkbox v-model="allVal" @change="handleAllClickBox"
+                  ><span @click.prevent="handleAllClick">ALL</span></a-checkbox
+                >
               </div>
             </div>
           </a-select>
         </a-form-model-item>
       </a-col>
-      <a-col flex="310px" v-if="type!=='alarmCenter' && type!=='analysisMonitor'&& type!=='alarmAnalysis'">
+      <a-col flex="310px" v-if="type !== 'alarmCenter' && type !== 'analysisMonitor' && type !== 'alarmAnalysis'">
         <a-form-model-item label="Name">
-          <a-select 
-            :value="queryParams.names" 
-            mode="multiple" 
+          <a-select
+            :value="queryParams.names"
+            mode="multiple"
             placeholder="select..."
-            :maxTagCount="1" 
-            show-arrow 
+            :maxTagCount="1"
+            show-arrow
             allowClear
-            :options="options" 
+            :options="options"
             @change="onNameChange"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
             <div slot="dropdownRender" slot-scope="menu">
               <v-nodes :vnodes="menu" />
-              <a-divider style="margin: 0;" />
-              <div
-                style="padding: 4px 12px; cursor: pointer;"
-                @mousedown="e => e.preventDefault()"
-              >
-                <a-checkbox v-model="allVal_name" @change="handleAllClickBox_Name"><span @click.prevent="handleAllClick_Name">ALL</span></a-checkbox>
+              <a-divider style="margin: 0" />
+              <div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
+                <a-checkbox v-model="allVal_name" @change="handleAllClickBox_Name"
+                  ><span @click.prevent="handleAllClick_Name">ALL</span></a-checkbox
+                >
               </div>
             </div>
           </a-select>
         </a-form-model-item>
       </a-col>
-      <a-col flex="270px" v-if="type ==='analysisMonitor'">
+      <a-col flex="270px" v-if="type === 'analysisMonitor'">
         <a-form-model-item label="Station">
-          <a-select style="width:180px"
-            :value="queryParams.stations" 
-            mode="multiple" 
+          <a-select
+            style="width: 180px"
+            :value="queryParams.stations"
+            mode="multiple"
             placeholder="select..."
-            :maxTagCount="1" 
+            :maxTagCount="1"
             :filter-option="filterOption"
-            show-arrow 
+            show-arrow
             allowClear
-            :options="options" 
+            :options="options"
             @change="onStationChange"
           >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
             <div slot="dropdownRender" slot-scope="menu">
               <v-nodes :vnodes="menu" />
-              <a-divider style="margin: 0;" />
-              <div
-                style="padding: 4px 12px; cursor: pointer;"
-                @mousedown="e => e.preventDefault()"
-              >
-                <a-checkbox v-model="allVal_station" @change="handleAllClickBox_station"><span @click.prevent="handleAllClick_station">ALL</span></a-checkbox>
+              <a-divider style="margin: 0" />
+              <div style="padding: 4px 12px; cursor: pointer" @mousedown="(e) => e.preventDefault()">
+                <a-checkbox v-model="allVal_station" @change="handleAllClickBox_station"
+                  ><span @click.prevent="handleAllClick_station">ALL</span></a-checkbox
+                >
               </div>
             </div>
           </a-select>
         </a-form-model-item>
       </a-col>
-      <a-col flex="310px" v-if="type ==='analysisMonitor'">
+      <a-col flex="375px" v-if="type === 'analysisMonitor'">
         <a-form-model-item label="Data Sources">
-          <a-select style="width:180px"
+          <j-dict-select-tag
+            placeholder="select..."
+            :value="queryParams.sources"
+            dict-code="alarm_analyse_rule_source"
+            modeType="multiple"
+            @change="onSourceChange"
+          />
+          <!-- <a-select style="width:180px"
             :value="queryParams.sources" 
             mode="multiple" 
             placeholder="select..."
@@ -105,7 +110,7 @@
                 <a-checkbox v-model="allVal_source" @change="handleAllClickBox_source"><span @click.prevent="handleAllClick_source">ALL</span></a-checkbox>
               </div>
             </div>
-          </a-select>
+          </a-select> -->
         </a-form-model-item>
       </a-col>
       <a-col flex="380px">
@@ -113,7 +118,7 @@
           <a-range-picker
             dropdownClassName="asd"
             :default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
-            @change="onRangeDateChange" 
+            @change="onRangeDateChange"
           />
         </a-form-model-item>
       </a-col>
@@ -129,17 +134,17 @@
 
 <script>
 import dateFormat from '@/components/jeecg/JEasyCron/format-date'
-import moment from 'moment';
+import moment from 'moment'
 export default {
   props: {
     type: {
       type: String,
-      default: ''
+      default: '',
     },
     options: {
       type: Array,
-      default:()=>[]
-    }
+      default: () => [],
+    },
   },
   components: {
     VNodes: {
@@ -155,36 +160,36 @@ export default {
       allVal_source: false,
       typeOptions: [
         {
-          label: "Server",
-          value: "Server"
+          label: 'Server',
+          value: 'Server',
         },
         {
-          label: "Database",
-          value: "Database"
+          label: 'Database',
+          value: 'Database',
         },
         {
-          label: "E-MAIL",
-          value: "Email"
+          label: 'E-MAIL',
+          value: 'Email',
         },
       ],
       sourceOptions: [
         {
-          label: "IDC",
-          value: "idc"
+          label: 'IDC',
+          value: 'idc',
         },
         {
-          label: "ARMD",
-          value: "armd"
-        }
+          label: 'ARMD',
+          value: 'armd',
+        },
       ],
       queryParams: {
-        types: ["Server","Database","Email"],
+        types: ['Server', 'Database', 'Email'],
         names: undefined,
         stations: undefined,
         sources: undefined,
         startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
-        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
-      }
+        endDate: dateFormat(new Date(), 'yyyy-MM-dd'),
+      },
     }
   },
   methods: {
@@ -199,7 +204,7 @@ export default {
     },
     setSelectVal() {
       if (this.allVal) {
-        this.queryParams.types = this.typeOptions.map(item => item.value)
+        this.queryParams.types = this.typeOptions.map((item) => item.value)
       } else {
         this.queryParams.types = []
       }
@@ -214,7 +219,7 @@ export default {
     },
     setSelectVal_name() {
       if (this.allVal_name) {
-        this.queryParams.names = this.options.map(item => item.value)
+        this.queryParams.names = this.options.map((item) => item.value)
       } else {
         this.queryParams.names = []
       }
@@ -229,15 +234,13 @@ export default {
     },
     setSelectVal_station() {
       if (this.allVal_station) {
-        this.queryParams.stations = this.options.map(item => item.value)
+        this.queryParams.stations = this.options.map((item) => item.value)
       } else {
         this.queryParams.stations = []
       }
     },
     filterOption(input, option) {
-      return (
-        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-      );
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     },
     handleAllClickBox_source(e) {
       this.allVal_source = e.target.checked
@@ -249,7 +252,7 @@ export default {
     },
     setSelectVal_source() {
       if (this.allVal_source) {
-        this.queryParams.sources = this.sourceOptions.map(item => item.value)
+        this.queryParams.sources = this.sourceOptions.map((item) => item.value)
       } else {
         this.queryParams.sources = []
       }
@@ -282,6 +285,7 @@ export default {
       }
     },
     onSourceChange(val) {
+      console.log(val)
       this.queryParams.sources = val
       let length = this.sourceOptions.length
       if (val.length === length) {
@@ -295,14 +299,14 @@ export default {
       this.queryParams.endDate = dateString[1]
     },
     onSearch() {
-      this.$emit("search",this.queryParams)
-    }
+      this.$emit('search', this.queryParams)
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
-.search-bar{
+.search-bar {
   height: 50px;
   border-top: 1px solid rgba(13, 235, 201, 0.3);
   border-bottom: 1px solid rgba(13, 235, 201, 0.3);
@@ -310,13 +314,13 @@ export default {
   padding: 8px 10px;
   background: rgba(12, 235, 201, 0.05);
 }
-.ant-input{
+.ant-input {
   width: 166px;
 }
-.ant-select{
+.ant-select {
   width: 240px;
 }
-.ant-calendar-picker{
+.ant-calendar-picker {
   width: 270px;
 }
 .search-btn {
@@ -331,7 +335,8 @@ export default {
   .ant-form-item {
     display: flex;
     margin-bottom: 0;
-    .ant-form-item-label,.ant-form-item-control {
+    .ant-form-item-label,
+    .ant-form-item-control {
       line-height: 32px;
       height: 32px;
     }
@@ -347,12 +352,12 @@ export default {
         }
       }
     }
-    .ant-calendar-range-picker-separator{
+    .ant-calendar-range-picker-separator {
       color: white;
     }
     .ant-form-item-control-wrapper {
       width: 100%;
-      overflow: hidden;
+      // overflow: hidden;
     }
   }
 }
@@ -366,7 +371,7 @@ export default {
     }
   }
 }
-.ant-select-dropdown-content{
+.ant-select-dropdown-content {
   position: relative;
   background: #03353f;
 }