products

.gitignore

@@ -121,3 +121,4 @@ dist
 *yarn.lock
 *package-lock.json
 *log/
+code/web/client/assets/color.less

code/web/client/assets/color.less

@@ -1147,10 +1147,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .ant-mentions-dropdown-menu-item-active {background-color: @item-hover-bg;}
 .ant-menu-item-danger.ant-menu-item {color: #ff4d4f;}
 .ant-menu-item-danger.ant-menu-item:hover, .ant-menu-item-danger.ant-menu-item-active {color: #ff4d4f;}
-.ant-menu-item-danger.ant-menu-item:active {background: color(~`colorPalette("@{skeleton-color}", 1)`);}
+.ant-menu-item-danger.ant-menu-item:active {background: #fff1f0;}
 .ant-menu-item-danger.ant-menu-item-selected {color: #ff4d4f;}
 .ant-menu-item-danger.ant-menu-item-selected > a, .ant-menu-item-danger.ant-menu-item-selected > a:hover {color: #ff4d4f;}
-.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {background-color: color(~`colorPalette("@{skeleton-color}", 1)`);}
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {background-color: #fff1f0;}
 .ant-menu-inline .ant-menu-item-danger.ant-menu-item::after {border-right-color: #ff4d4f;}
 .ant-menu-dark .ant-menu-item-danger.ant-menu-item, .ant-menu-dark .ant-menu-item-danger.ant-menu-item:hover, .ant-menu-dark .ant-menu-item-danger.ant-menu-item > a {color: #ff4d4f;}
 .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-danger.ant-menu-item-selected {color: #fff;background-color: #ff4d4f;}
@@ -1727,15 +1727,15 @@ tr.ant-table-expanded-row:hover > td {background: @table-expanded-row-bg;}
 .ant-tag-checkable:active, .ant-tag-checkable-checked {color: #fff;}
 .ant-tag-checkable-checked {background-color: @primary-color;}
 .ant-tag-checkable:active {background-color: color(~`colorPalette("@{primary-color}", 7)`);}
-.ant-tag-pink {color: #c41d7f;background: color(~`colorPalette("@{shadow-color}", 1)`);border-color: #ffadd2;}
+.ant-tag-pink {color: #c41d7f;background: color(~`colorPalette("@{pagination-item-input-bg}", 2)`);border-color: #ffadd2;}
 .ant-tag-pink-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
-.ant-tag-magenta {color: #c41d7f;background: color(~`colorPalette("@{shadow-color}", 1)`);border-color: #ffadd2;}
+.ant-tag-magenta {color: #c41d7f;background: color(~`colorPalette("@{pagination-item-input-bg}", 2)`);border-color: #ffadd2;}
 .ant-tag-magenta-inverse {color: #fff;background: #eb2f96;border-color: #eb2f96;}
-.ant-tag-red {color: #cf1322;background: color(~`colorPalette("@{skeleton-color}", 1)`);border-color: #ffa39e;}
+.ant-tag-red {color: #cf1322;background: #fff1f0;border-color: #ffa39e;}
 .ant-tag-red-inverse {color: #fff;background: #f5222d;border-color: #f5222d;}
 .ant-tag-volcano {color: #d4380d;background: #fff2e8;border-color: #ffbb96;}
 .ant-tag-volcano-inverse {color: #fff;background: #fa541c;border-color: #fa541c;}
-.ant-tag-orange {color: #d46b08;background: color(~`colorPalette("@{switch-bg}", 1)`);border-color: #ffd591;}
+.ant-tag-orange {color: #d46b08;background: #fff7e6;border-color: #ffd591;}
 .ant-tag-orange-inverse {color: #fff;background: #fa8c16;border-color: #fa8c16;}
 .ant-tag-yellow {color: #d4b106;background: #feffe6;border-color: #fffb8f;}
 .ant-tag-yellow-inverse {color: #fff;background: #fadb14;border-color: #fadb14;}
@@ -1749,7 +1749,7 @@ tr.ant-table-expanded-row:hover > td {background: @table-expanded-row-bg;}
 .ant-tag-green-inverse {color: #fff;background: #52c41a;border-color: #52c41a;}
 .ant-tag-blue {color: #096dd9;background: #e6f7ff;border-color: #91d5ff;}
 .ant-tag-blue-inverse {color: #fff;background: #1890ff;border-color: #1890ff;}
-.ant-tag-geekblue {color: #1d39c4;background: color(~`colorPalette("@{disabled-color}", 1)`);border-color: #adc6ff;}
+.ant-tag-geekblue {color: #1d39c4;background: color(~`colorPalette("@{calendar-bg}", 1)`);border-color: #adc6ff;}
 .ant-tag-geekblue-inverse {color: #fff;background: #2f54eb;border-color: #2f54eb;}
 .ant-tag-purple {color: #531dab;background: #f9f0ff;border-color: #d3adf7;}
 .ant-tag-purple-inverse {color: #fff;background: #722ed1;border-color: #722ed1;}

code/web/client/src/app.js

@@ -5,7 +5,7 @@ import Layout from './layout';
 import Auth from './sections/auth';
 import Gateway from './sections/gateway';
 import Search from './sections/search';
-import Factor from './sections/factor';
+import Meta from './sections/meta';
 
 const App = props => {
     const { projectName } = props
@@ -17,7 +17,7 @@ const App = props => {
     return (
         <Layout
             title={projectName}
-            sections={[Auth, Search, Gateway,Factor]}
+            sections={[Auth, Search, Gateway,Meta]}
         />
     )
 }

code/web/client/src/layout/components/header/index.js

@@ -79,6 +79,9 @@ const Header = props => {
                         <Menu.Item key="factorProfile" icon={<ApartmentOutlined />} >
                             <Link to="/factor_profile">监测因素</Link>
                         </Menu.Item>
+                        <Menu.Item key="productProfile" icon={<ApartmentOutlined />} >
+                            <Link to="/product_profile">监测因素</Link>
+                        </Menu.Item>
                     </Menu.SubMenu>
                     <Menu.SubMenu key="theme" title={<div style={{ margin: '0 8px' }}>主题切换</div>}  >
                         <Menu.Item key="themeLight" >

code/web/client/src/sections/factor/actions/index.js

@@ -1,7 +0,0 @@
-'use strict';
-
-import * as factor from './factors'
-
-export default {
-    ...factor
-}

code/web/client/src/sections/factor/containers/index.js

@@ -1,5 +0,0 @@
-'use strict';
-
-import FactorProfile from './FactorProfile';
-
-export { FactorProfile };

code/web/client/src/sections/meta/actions/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+import * as meta from './meta'
+
+export default {
+    ...meta
+}

code/web/client/src/sections/factor/actions/factors.js → code/web/client/src/sections/meta/actions/meta.js

@@ -14,3 +14,15 @@ export function list(query) {
         reducer: { name: 'factors' }
     })
 }
+
+export function listProducts(query) {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        query: query,
+        actionType: 'GET_PRODUCT_LIST',
+        url: ApiTable.getProducts,
+        msg: { error: '获取设备原型列表失败' },
+        reducer: { name: 'products' }
+    })
+}

code/web/client/src/sections/factor/containers/FactorProfile.js → code/web/client/src/sections/meta/containers/FactorProfile.js

@@ -11,7 +11,7 @@ import { request } from 'superagent';
 const FactorProfile = (props) => {
     const { dispatch, actions, user, loading, factors, total } = props
 
-    const { factor } = actions;
+    const { meta } = actions;
     const [configModalVis, setConfigModalVis] = useState(false)
     const [editData, setEditData] = useState(null)
     const [fdata, setFdata] = useState([])
@@ -19,7 +19,7 @@ const FactorProfile = (props) => {
     const pageSize = 10
 
     useEffect(() => {
-        // dispatch(factor.list())
+        // dispatch(meta.list())
     }, [])
 
     const actionRef = useRef();
@@ -66,7 +66,7 @@ const FactorProfile = (props) => {
     ]
 
     const requestList = async (params) => {
-        const ret = await dispatch(factor.list());
+        const ret = await dispatch(meta.list());
         console.log(ret)
         let tmp = []
         tmp = ret.payload.data.data;
@@ -97,7 +97,7 @@ const FactorProfile = (props) => {
             limit: params.pageSize,
             offset: params.pageSize * (params.current - 1)
         }
-        const res = await dispatch(factor.list(query));
+        const res = await dispatch(meta.list(query));
         return {
             ...res,
             total: res.payload.data ? res.payload.data.total : 0
@@ -142,11 +142,6 @@ const FactorProfile = (props) => {
                 request={requestList}
                 manualRequest={false}
                 options={false}
-                toolBarRender={() => [
-                    <Button type="primary" key="primary" onClick={() => { setConfigModalVis(true) }}>
-                        添加配置
-                    </Button>,
-                ]}
                 pagination={{
                     pageSize: pageSize,
                     onChange: (page) => console.log(page),

code/web/client/src/sections/meta/containers/ProductsProfile.js

@@ -0,0 +1,161 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Button, Space, Tag } from 'antd';
+import '../style.less';
+import ProTable from '@ant-design/pro-table';
+import ConfigModal from './ConfigModal';
+
+const ProductsProfile = (props) => {
+    const { dispatch, actions, products } = props
+
+    const { meta } = actions;
+    const [configModalVis, setConfigModalVis] = useState(false)
+    const [editData, setEditData] = useState(null)
+    // 过滤后数据，用于表格展示
+    const [fdata, setFdata] = useState([])
+
+    useEffect(() => {
+        dispatch(meta.listProducts())
+    }, []);
+    const pageSize = 10
+
+    const actionRef = useRef();
+    const columns = [{
+        title: 'ID',
+        dataIndex: 'Id',
+        copyable: true
+    }, {
+        title: '名称',
+        dataIndex: 'Name',
+        ellipsis: true
+    },
+    {
+        title: '型号',
+        dataIndex: 'Model',
+    },
+    {
+        title: '厂商',
+        dataIndex: 'Company',
+        ellipsis: true
+    },
+    {
+        title: '创建时间',
+        dataIndex: 'CreatedAt',
+        valueType: 'dateTime',
+        hideInSearch: true,
+        sorter: (a, b) => a.CreatedAt - b.CreatedAt,
+    },
+    {
+        title: '更新时间',
+        dataIndex: 'UpdatedAt',
+        valueType: 'dateTime',
+        hideInSearch: true,
+        sorter: (a, b) => a.UpdatedAt - b.UpdatedAt,
+    },
+    {
+        title: '描述',
+        dataIndex: 'Desc',
+        ellipsis: true,
+        hideInSearch: true,
+    },
+    {
+        title: '图片',
+        dataIndex: 'Image',
+        valueType: 'image',
+        hideInSearch: true,
+    },
+    ]
+
+    const requestList = async (params, sorter) => {
+        if (!products) {
+            return null
+        }
+        let tmp = products;
+        if (!!params.Name) {
+            tmp = tmp.filter(a => a.Name.includes(params.Name))
+        }
+        if (!!params.Id) {
+            tmp = tmp.filter(a => a.Id.includes(params.Id))
+        }
+        if (!!params.Company) {
+            tmp = tmp.filter(a => a.Company.includes(params.Company))
+        }
+        if (!!params.Model) {
+            tmp = tmp.filter(a => a.Model.includes(params.Model))
+        }
+        if (!!sorter.CreatedAt) {
+            console.log(sorter)
+            tmp = tmp.sort((a, b) => {
+                let aTime = new Date(a.CreatedAt).getTime()
+                let bTime = new Date(b.CreatedAt).getTime()
+                return sorter.CreatedAt === "ascend" ? aTime - bTime : bTime - aTime
+            })
+        }
+        if (!!sorter.UpdatedAt) {
+            tmp = tmp.sort((a, b) => {
+                let aTime = new Date(a.UpdatedAt).getTime()
+                let bTime = new Date(b.UpdatedAt).getTime()
+                return sorter.UpdatedAt === "ascend" ? aTime - bTime : bTime - aTime
+            })
+        }
+        let pageData = tmp.slice(params.pageSize * (params.current - 1), params.pageSize * params.current);
+        pageData = pageData.map(d => ({
+            ...d,
+            key: d.Id
+        }))
+        setFdata(pageData)
+        return {
+            total: tmp.length,
+            data: pageData
+        }
+    }
+
+    return (
+        <div>
+            <ProTable
+                columns={columns}
+                actionRef={actionRef}
+                toolbar={{
+                    settings: []
+                }}
+                search={{
+                    optionRender: false,
+                    collapsed: false,
+                    labelWidth: 'auto',
+                }}
+                dataSource={fdata}
+                request={requestList}
+                manualRequest={false}
+                options={false}
+                pagination={{
+                    pageSize: pageSize,
+                }}
+            >
+            </ProTable>
+
+            {
+                configModalVis ?
+                    <ConfigModal
+                        visible={true}
+                        close={() => {
+                            setConfigModalVis(false)
+                            setEditData(null)
+                        }}
+                        editData={editData}
+                    /> : ''
+            }
+        </div>
+    )
+}
+
+function mapStateToProps(state) {
+    const { auth, global, products } = state;
+    return {
+        user: auth.user,
+        actions: global.actions,
+        loading: products.isRequesting,
+        products: products.data?.data ?? [],
+    };
+}
+
+export default connect(mapStateToProps)(ProductsProfile);

code/web/client/src/sections/meta/containers/index.js

@@ -0,0 +1,6 @@
+'use strict';
+
+import FactorProfile from './FactorProfile';
+import ProductsProfile from './ProductsProfile';
+
+export { FactorProfile,ProductsProfile };

code/web/client/src/sections/factor/index.js → code/web/client/src/sections/meta/index.js

@@ -6,8 +6,8 @@ import actions from './actions';
 import { getNavItem } from './nav-item';
 
 export default {
-    key: 'factor',
+    key: 'meta',
-    name: '监测因素',
+    name: '原型管理',
     reducers: reducers,
     routes: routes,
     actions: actions,

code/web/client/src/sections/factor/nav-item.js → code/web/client/src/sections/meta/nav-item.js

@@ -7,10 +7,13 @@ const SubMenu = Menu.SubMenu;
 
 export function getNavItem(user, dispatch) {
     return (
-        <SubMenu key="factor" icon={<SettingOutlined />} title={'监测因素'}>
+        <SubMenu key="factor" icon={<SettingOutlined />} title={'原型管理'}>
             <Menu.Item key="factor_profile">
                 <Link to="/factor_profile/list">监测因素列表</Link>
             </Menu.Item>
+            <Menu.Item key="product_profile">
+                <Link to="/product_profile/list">设备原型列表</Link>
+            </Menu.Item>
         </SubMenu>
     );
 }

code/web/client/src/sections/factor/routes.js → code/web/client/src/sections/meta/routes.js

@@ -1,5 +1,6 @@
 'use strict';
 import { FactorProfile} from './containers';
+import { ProductsProfile} from './containers';
 
 export default [{
     type: 'inner',
@@ -9,4 +10,12 @@ export default [{
         breadcrumb: '监测因素管理',
         component: FactorProfile
     }
+},{
+    type: 'inner',
+    route: {
+        path: '/product_profile',
+        key: 'product',
+        breadcrumb: '设备原型管理',
+        component: ProductsProfile
+    }
 }];

code/web/client/src/utils/webapi.js

@@ -19,6 +19,8 @@ export const ApiTable = {
 
     // 监测因素
     getFactors: 'v1/searchFactor',
+    // 监测因素
+    getProducts: 'v1/products',
 
     getEnterprisesMembers: 'enterprises/{enterpriseId}/members',
 };

code/web/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "mocha",
     "start": "cross-env NODE_ENV=development npm run start-params",
-    "start-params": "npm run color && node server -p 5000 -u http://127.0.0.1:4101",
+    "start-params": "npm run color && node server -p 5000 -u http://127.0.0.1:4100",
     "deploy": "export NODE_ENV=production&&npm run color && npm run build && node server",
     "build-dev": "export NODE_ENV=development&&webpack --config webpack.config.js",
     "build": "export NODE_ENV=production&&webpack --config webpack.config.prod.js",