数据库模块实现时间与日期控件之间的联动效果，及初始化的默认值

src/views/abnormalAlarm/databaseMonitor/instances/conditionBox.vue

@@ -4,7 +4,7 @@
         <a-col flex="335px">
           <span class="item-label">Database name</span>
           <a-select style="width:180px"
-            v-model="queryParams.name" 
+            v-model="name" 
             placeholder="select..."
             :filter-option="filterOption"
             show-arrow 
@@ -18,7 +18,7 @@
         <a-col flex="265px">
           <span class="item-label">Time</span>
           <a-select style="width:180px"
-            v-model="queryParams.timer" 
+            v-model="timer" 
             placeholder="select..."
             show-arrow 
             allowClear
@@ -31,7 +31,7 @@
         <a-col flex="265px">
           <a-range-picker
             :show-time="true"
-            :default-value="[moment(queryParams.startDate), moment(queryParams.endDate)]"
+            :value="[moment(startDate), moment(endDate)]"
             @change="onRangeDateChange" 
           />
         </a-col>
@@ -54,24 +54,38 @@ import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
 export default {
   data() {
     return {
-      queryParams: {
       name: undefined,
-        timer: "1h",
-        startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
-        endDate: dateFormat(new Date(), 'yyyy-MM-dd')
-      },
+      timer: 1,
+      startDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+      endDate: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
       DbOptions: [],
       timerOptions: [
-        {label: "1Hours",value: "1h"},
-        {label: "2Hours",value: "2h"},
-        {label: "3Hours",value: "3h"},
+        {label: "1Hours",value: 1},
+        {label: "2Hours",value: 2},
+        {label: "3Hours",value: 3},
+        {label: "user-defined",value: 0},
       ],
+      currId:""
     }
   },
+  watch: {
+    name(newValue, oldValue) {
+      this.currId = newValue
+    }
+  },
+  created() {
+    this.getBeforeHours(1)
+  },
   mounted () {
     this.getDbList();
   },
   methods: {
+    getBeforeHours(num) {
+      let currentTime = moment()
+      let oneHourAgo = moment().subtract(num, 'hours');  
+      this.startDate = oneHourAgo.format('YYYY-MM-DD HH:mm:ss')
+      this.endDate = currentTime.format('YYYY-MM-DD HH:mm:ss')
+    },
     moment,
     filterOption(input, option) {
       return (
@@ -81,6 +95,7 @@ export default {
     getDbList() {
       getAction("/sysDatabase/sourceList").then(res => {
         if (res.success) {
+          this.name = this.$route.query.id || res.result[0].sourceId
           this.DbOptions = res.result.map(item => {
             return {
               label: item.sourceName,
@@ -93,14 +108,15 @@ export default {
       })
     },
     onDbChange(val) {
-      console.log(val);
+      this.name = val
     },
     onTimeChange(val) {
-      console.log(val);
+      this.getBeforeHours(val)
     },
     onRangeDateChange(date, dateString) {
-      this.queryParams.startDate = dateString[0]
-      this.queryParams.endDate = dateString[1]
+      this.timer = 0
+      this.startDate = dateString[0]
+      this.endDate = dateString[1]
     },
   },
 }

src/views/abnormalAlarm/databaseMonitor/overview/index.vue

@@ -390,8 +390,15 @@ export default {
       this.form.resetFields()
       this.visible = false
     },
-    onRowDbclick() {
-      this.$router.push("/alarm/databaseMonitor/instances")
+    onRowDbclick(record) {
+      console.log(record);
+      let query = {
+        id:record.id
+      }
+      this.$router.push({
+        path: '/alarm/databaseMonitor/instances',
+        query
+      })
     }
   },
 }

src/views/abnormalAlarm/emailMonitor/instances/index.vue

@@ -204,9 +204,7 @@ export default {
     getEmailList() {
       getAction("/sysEmail/sourceList").then(res => {
         if (res.success) {
-          // if (!this.$route.query.emailId) {
           this.emailId = this.$route.query.emailId || res.result[0].sourceId
-          // }
           this.emailOptions = res.result.map(item => {
             return {
               label: item.sourceName,