server DB email 三个模块alarmHistory页面开发

src/views/abnormalAlarm/alarmCenter/alarmHistory/index.vue

@@ -13,8 +13,8 @@
               :list="dataSource"
               :loading="loading"
               :canSelect="false"
-              @change="handleTableChange"
               >
+              <!-- @change="handleTableChange" -->
               <!-- :pagination="ipagination" -->
               <template slot="info" slot-scope="{ record}">
                 <div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>

src/views/abnormalAlarm/components/searchBar.vue

@@ -4,9 +4,16 @@
       <a-col flex="190px">
         <a-input placeholder="search..." />
       </a-col>
-      <a-col flex="270px">
+      <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 @change="onTypeChange">
+          <a-select 
+            :value="queryParams.types" 
+            mode="multiple" 
+            :maxTagCount="1" 
+            :options="typeOptions" 
+            show-arrow 
+            @change="onTypeChange"
+          >
             <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
             <div slot="dropdownRender" slot-scope="menu">
               <v-nodes :vnodes="menu" />
@@ -21,9 +28,17 @@
           </a-select>
         </a-form-model-item>
       </a-col>
-      <a-col flex="270px" v-if="type!=='alarmCenter'">
+      <a-col flex="310px" v-if="type!=='alarmCenter'">
         <a-form-model-item label="Name">
-          <a-select v-bind="$attrs" show-arrow @change="onChange">
+          <a-select 
+            :value="queryParams.names" 
+            mode="multiple" 
+            placeholder="select..."
+            :maxTagCount="1" 
+            show-arrow 
+            :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" />
@@ -32,7 +47,7 @@
                 style="padding: 4px 12px; cursor: pointer;"
                 @mousedown="e => e.preventDefault()"
               >
-                <a-checkbox v-model="allVal" @change="handleAllClick"><span @click.prevent="handleAllClick">ALL</span></a-checkbox>
+                <a-checkbox v-model="allVal_name" @change="handleAllClickBox_Name"><span @click.prevent="handleAllClick_Name">ALL</span></a-checkbox>
               </div>
             </div>
           </a-select>
@@ -66,6 +81,10 @@ export default {
       type: String,
       default: ''
     },
+    options: {
+      type: Array,
+      default:()=>[]
+    }
   },
   components: {
     VNodes: {
@@ -76,6 +95,7 @@ export default {
   data() {
     return {
       allVal: true,
+      allVal_name: false,
       typeOptions: [
         {
           label: "Server",
@@ -92,7 +112,7 @@ export default {
       ],
       queryParams: {
         types: ["Server","Database","Email"],
-        name: "",
+        names: undefined,
         startDate: dateFormat(new Date(), 'yyyy-MM-dd'),
         endDate: dateFormat(new Date(), 'yyyy-MM-dd')
       }
@@ -115,6 +135,21 @@ export default {
         this.queryParams.types = []
       }
     },
+    handleAllClickBox_Name(e) {
+      this.allVal_name = e.target.checked
+      this.setSelectVal_name()
+    },
+    handleAllClick_Name(e) {
+      this.allVal_name = !this.allVal_name
+      this.setSelectVal_name()
+    },
+    setSelectVal_name() {
+      if (this.allVal_name) {
+        this.queryParams.names = this.options.map(item => item.value)
+      } else {
+        this.queryParams.names = []
+      }
+    },
     onTypeChange(val) {
       this.queryParams.types = val
       let length = this.typeOptions.length
@@ -124,6 +159,15 @@ export default {
         this.allVal = false
       }
     },
+    onNameChange(val) {
+      this.queryParams.names = val
+      let length = this.options.length
+      if (val.length === length) {
+        this.allVal_name = true
+      } else {
+        this.allVal_name = false
+      }
+    },
     onRangeDateChange(date, dateString) {
       this.queryParams.startDate = dateString[0]
       this.queryParams.endDate = dateString[1]
@@ -148,7 +192,7 @@ export default {
   width: 166px;
 }
 .ant-select{
-  width: 200px;
+  width: 240px;
 }
 .ant-calendar-picker{
   width: 270px;

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

@@ -1,15 +1,163 @@
 <template>
-  <div>
+  <div style="height: 100%;">
-    alarm history
+    <SearchBar type="DbMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
+    <div class="server-main">
+      <TableList
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :loading="loading"
+        :pagination="false"
+        :canSelect="false"
+      >
+        <template slot="info" slot-scope="{ record}">
+          <div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
+          <div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div>
+        </template>
+      </TableList>
+      <a-pagination 
+        size="small"
+        v-model="ipagination.current" 
+        :pageSize="ipagination.pageSize"
+        :page-size-options="ipagination.pageSizeOptions"
+        show-size-changer
+        show-quick-jumper
+        :total="ipagination.total"
+        :show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
+        show-less-items 
+        @change="handlePageChange"
+        @showSizeChange="handleSizeChange"
+      />
+    </div>
   </div>
 </template>
 
 <script>
+import SearchBar from '../../components/searchBar';
+import TableList from '../../components/tableList.vue';
+import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+const columns = [{
+    title: 'NAME',
+    align: 'left',
+    dataIndex: 'name',
+    width: 250,
+  },{
+    title: 'ALARM START DATE',
+    align: 'left',
+    dataIndex: 'alarmStartDate',
+    width: 300,
+  },{
+    title: 'ALARM INFO',
+    align: 'left',
+    dataIndex: 'alarmInfo',
+    scopedSlots: {
+      customRender: 'info',
+    }
+  }
+]
 export default {
+  components: {
+    SearchBar,
+    TableList
+  },
+  data() {
+    return {
+      columns,
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      nameOptions: [],
+      dataSource: [],
+      loading: false,
       
     }
+  },
+  mounted () {
+    this.getDbList();
+  },
+  methods: {
+    getDbList() {
+      getAction("/sysDatabase/sourceList").then(res => {
+        if (res.success) {
+          this.nameOptions = res.result.map(item => {
+            return {
+              label: item.sourceName,
+              value: item.sourceId
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    handleSearch({ startDate, endDate, names }) {
+      console.log(startDate, endDate, names);
+      this.getDbAlarmHistory({ startDate, endDate, names })
+    },
+    getDbAlarmHistory(obj) {
+      this.loading = true
+      let params = {
+        sourceId: obj.names,
+        startDate:obj.startDate,
+        endDate: obj.endDate,
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize,
+      }
+      getAction("/sysDatabase/findAlarmHistory", params).then(res => {
+        this.loading = false
+        if (res.success) {
+          this.ipagination.total = res.result.total
+          this.dataSource = res.result.records
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      }).catch(err => {
+        this.loading = false
+        this.$message.warning("This operation fails. Contact your system administrator")
+      })
+    },
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.getDbAlarmHistory()
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.ipagination.pageSize = size
+      this.getDbAlarmHistory()
+    },
+  },
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
-
+.server-main{
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: hidden;
+  padding-top: 15px;
+  margin-left: 20px;
+  position: relative;
+}
+.ant-pagination{
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+}
+.info-alarm{
+  font-family: ArialMT;
+	font-size: 18px;
+	color: #f62424;
+}
 </style>

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

@@ -1,15 +1,163 @@
 <template>
-  <div>
+  <div style="height: 100%;">
-    alarm history
+    <SearchBar type="emailMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
+    <div class="server-main">
+      <TableList
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :loading="loading"
+        :pagination="false"
+        :canSelect="false"
+      >
+        <template slot="info" slot-scope="{ record}">
+          <div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
+          <div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div>
+        </template>
+      </TableList>
+      <a-pagination 
+        size="small"
+        v-model="ipagination.current" 
+        :pageSize="ipagination.pageSize"
+        :page-size-options="ipagination.pageSizeOptions"
+        show-size-changer
+        show-quick-jumper
+        :total="ipagination.total"
+        :show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
+        show-less-items 
+        @change="handlePageChange"
+        @showSizeChange="handleSizeChange"
+      />
+    </div>
   </div>
 </template>
 
 <script>
+import SearchBar from '../../components/searchBar';
+import TableList from '../../components/tableList.vue';
+import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+const columns = [{
+    title: 'NAME',
+    align: 'left',
+    dataIndex: 'name',
+    width: 250,
+  },{
+    title: 'ALARM START DATE',
+    align: 'left',
+    dataIndex: 'alarmStartDate',
+    width: 300,
+  },{
+    title: 'ALARM INFO',
+    align: 'left',
+    dataIndex: 'alarmInfo',
+    scopedSlots: {
+      customRender: 'info',
+    }
+  }
+]
 export default {
+  components: {
+    SearchBar,
+    TableList
+  },
+  data() {
+    return {
+      columns,
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      nameOptions: [],
+      dataSource: [],
+      loading: false,
       
     }
+  },
+  mounted () {
+    this.getEmailList();
+  },
+  methods: {
+    getEmailList() {
+      getAction("/sysEmail/sourceList").then(res => {
+        if (res.success) {
+          this.nameOptions = res.result.map(item => {
+            return {
+              label: item.sourceName,
+              value: item.sourceId
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    handleSearch({ startDate, endDate, names }) {
+      console.log(startDate, endDate, names);
+      this.getEmailAlarmHistory({ startDate, endDate, names })
+    },
+    getEmailAlarmHistory(obj) {
+      this.loading = true
+      let params = {
+        sourceId: obj.names,
+        startDate:obj.startDate,
+        endDate: obj.endDate,
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize,
+      }
+      getAction("/sysEmail/findAlarmHistory", params).then(res => {
+        this.loading = false
+        if (res.success) {
+          this.ipagination.total = res.result.total
+          this.dataSource = res.result.records
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      }).catch(err => {
+        this.loading = false
+        this.$message.warning("This operation fails. Contact your system administrator")
+      })
+    },
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.getEmailAlarmHistory()
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.ipagination.pageSize = size
+      this.getEmailAlarmHistory()
+    },
+  },
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
-
+.server-main{
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: hidden;
+  padding-top: 15px;
+  margin-left: 20px;
+  position: relative;
+}
+.ant-pagination{
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+}
+.info-alarm{
+  font-family: ArialMT;
+	font-size: 18px;
+	color: #f62424;
+}
 </style>

src/views/abnormalAlarm/serverMonitor/alarmHistory/index.vue

@@ -1,15 +1,163 @@
 <template>
-  <div>
+  <div style="height: 100%;">
-    alarm history
+    <SearchBar type="serverMonitor" :options="nameOptions" @search="handleSearch"></SearchBar>
+    <div class="server-main">
+      <TableList
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :list="dataSource"
+        :loading="loading"
+        :pagination="false"
+        :canSelect="false"
+      >
+        <template slot="info" slot-scope="{ record}">
+          <div class="info-alarm">{{ record.alarmValue }}{{ JSON.parse(record.operator).units }}</div>
+          <div>{{ JSON.parse(record.operator).name }} {{ JSON.parse(record.operator).operator }} {{ JSON.parse(record.operator).threshold }}{{ JSON.parse(record.operator).units }}</div>
+        </template>
+      </TableList>
+      <a-pagination 
+        size="small"
+        v-model="ipagination.current" 
+        :pageSize="ipagination.pageSize"
+        :page-size-options="ipagination.pageSizeOptions"
+        show-size-changer
+        show-quick-jumper
+        :total="ipagination.total"
+        :show-total="(total, range) => `Total ${total} items　Page ${ipagination.current} / ${Math.ceil(total / ipagination.pageSize)}`"
+        show-less-items 
+        @change="handlePageChange"
+        @showSizeChange="handleSizeChange"
+      />
+    </div>
   </div>
 </template>
 
 <script>
+import SearchBar from '../../components/searchBar';
+import TableList from '../../components/tableList.vue';
+import { getAction,postAction,httpAction,deleteAction } from '@/api/manage'
+const columns = [{
+    title: 'NAME',
+    align: 'left',
+    dataIndex: 'name',
+    width: 250,
+  },{
+    title: 'ALARM START DATE',
+    align: 'left',
+    dataIndex: 'alarmStartDate',
+    width: 300,
+  },{
+    title: 'ALARM INFO',
+    align: 'left',
+    dataIndex: 'alarmInfo',
+    scopedSlots: {
+      customRender: 'info',
+    }
+  }
+]
 export default {
+  components: {
+    SearchBar,
+    TableList
+  },
+  data() {
+    return {
+      columns,
+      ipagination:{
+        current: 1,
+        pageSize: 10,
+        pageSizeOptions: ['10', '20', '30'],
+        showTotal: (total, range) => {
+          const { current, pageSize } = this.ipagination
+          return `Total ${total} items　Page ${current} / ${Math.ceil(total / pageSize)}`
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      nameOptions: [],
+      dataSource: [],
+      loading: false,
       
     }
+  },
+  mounted () {
+    this.getServerList();
+  },
+  methods: {
+    getServerList() {
+      getAction("/sysServer/sourceList").then(res => {
+        if (res.success) {
+          this.nameOptions = res.result.map(item => {
+            return {
+              label: item.sourceName,
+              value: item.sourceId
+            }
+          })
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      })
+    },
+    handleSearch({ startDate, endDate, names }) {
+      console.log(startDate, endDate, names);
+      this.getServerAlarmHistory({ startDate, endDate, names })
+    },
+    getServerAlarmHistory(obj) {
+      this.loading = true
+      let params = {
+        sourceId: obj.names,
+        startDate:obj.startDate,
+        endDate: obj.endDate,
+        pageNo: this.ipagination.current,
+        pageSize: this.ipagination.pageSize,
+      }
+      getAction("/sysServer/findAlarmHistory", params).then(res => {
+        this.loading = false
+        if (res.success) {
+          this.ipagination.total = res.result.total
+          this.dataSource = res.result.records
+        } else {
+          this.$message.warning("This operation fails. Contact your system administrator")
+        }
+      }).catch(err => {
+        this.loading = false
+        this.$message.warning("This operation fails. Contact your system administrator")
+      })
+    },
+    handlePageChange(page, pageSize) {
+      this.ipagination.current = page
+      this.ipagination.pageSize = pageSize
+      this.getServerAlarmHistory()
+    },
+    handleSizeChange(current, size) {
+      this.ipagination.current = current
+      this.ipagination.pageSize = size
+      this.getServerAlarmHistory()
+    },
+  },
+}
 </script>
 
-<style lang="scss" scoped>
+<style lang="less" scoped>
-
+.server-main{
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow: hidden;
+  padding-top: 15px;
+  margin-left: 20px;
+  position: relative;
+}
+.ant-pagination{
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+}
+.info-alarm{
+  font-family: ArialMT;
+	font-size: 18px;
+	color: #f62424;
+}
 </style>