style migrate v3

spug_web/src/pages/alarm/alarm/Table.js

@@ -5,7 +5,8 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
-import { Table, Tag } from 'antd';
+import { Radio, Tag } from 'antd';
+import { TableCard } from 'components';
 import store from './store';
 import groupStore from '../group/store';
 
@@ -61,15 +62,20 @@ class ComTable extends React.Component {
   }];
 
   render() {
-    let data = store.records;
-    if (store.f_name) {
-      data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
-    }
     return (
-      <Table
+      <TableCard
         rowKey="id"
+        title="报警历史记录"
         loading={store.isFetching}
-        dataSource={data}
+        dataSource={store.dataSource}
+        onReload={store.fetchRecords}
+        actions={[
+          <Radio.Group value={store.f_status} onChange={e => store.f_status = e.target.value}>
+            <Radio.Button value="">全部</Radio.Button>
+            <Radio.Button value="1">报警发生</Radio.Button>
+            <Radio.Button value="2">报警恢复</Radio.Button>
+          </Radio.Group>
+        ]}
         pagination={{
           showSizeChanger: true,
           showLessItems: true,

spug_web/src/pages/alarm/alarm/index.js

@@ -5,23 +5,29 @@
  */
 import React from 'react';
 import { observer } from 'mobx-react';
+import { SyncOutlined } from '@ant-design/icons';
 import { Input, Button } from 'antd';
-import { SearchForm, AuthCard } from 'components';
+import { SearchForm, AuthDiv, Breadcrumb } from 'components';
 import ComTable from './Table';
 import store from './store';
 
 export default observer(function () {
   return (
-    <AuthCard auth="alarm.alarm.view">
+    <AuthDiv auth="alarm.alarm.view">
+      <Breadcrumb>
+        <Breadcrumb.Item>首页</Breadcrumb.Item>
+        <Breadcrumb.Item>报警中心</Breadcrumb.Item>
+        <Breadcrumb.Item>报警历史</Breadcrumb.Item>
+      </Breadcrumb>
       <SearchForm>
         <SearchForm.Item span={8} title="任务名称">
           <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
         </SearchForm.Item>
         <SearchForm.Item span={8}>
-          <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
+          <Button type="primary" icon={<SyncOutlined/>} onClick={store.fetchRecords}>刷新</Button>
         </SearchForm.Item>
       </SearchForm>
       <ComTable/>
-    </AuthCard>
+    </AuthDiv>
   )
 })

spug_web/src/pages/alarm/alarm/store.js

@@ -3,7 +3,7 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import { observable } from "mobx";
+import { observable, computed } from 'mobx';
 import http from 'libs/http';
 
 class Store {
@@ -11,6 +11,14 @@ class Store {
   @observable isFetching = false;
 
   @observable f_name;
+  @observable f_status = '';
+
+  @computed get dataSource() {
+    let records = this.records;
+    if (this.f_name) records = records.filter(x => x.name.toLowerCase().includes(this.f_name.toLowerCase()));
+    if (this.f_status) records = records.filter(x => x.status === this.f_status);
+    return records
+  }
 
   fetchRecords = () => {
     this.isFetching = true;