product card

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

@@ -15,6 +15,17 @@ export function list(query) {
     })
 }
 
+export function getProduct(productId){
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_PRODUCT',
+        url: ApiTable.getProduct.replace('{productId}', productId),
+        msg: { error: '获取设备失败' },
+        reducer: { name: 'product' }
+    })
+}
+
 export function listProducts(query) {
     return dispatch => basicAction({
         type: 'get',

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

@@ -0,0 +1,50 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { connect } from 'react-redux';
+import { Button, Empty, Space, Spin, Tag, Descriptions } from 'antd';
+import '../style.less';
+
+const ProductCard = (props) => {
+    const { dispatch, actions, productId, product, loading } = props
+
+    const { meta } = actions;
+
+    useEffect(() => {
+        if (!!productId) {
+            dispatch(meta.getProduct(productId))
+        }
+    }, []);
+
+    return (
+        <Spin spinning={loading}>
+            <Descriptions  title="Product Info" bordered>
+                <Descriptions.Item label="ID" span={3} >{product?.Id}</Descriptions.Item>
+                <Descriptions.Item label="名称" span={2}>{product?.Name}</Descriptions.Item>
+                <Descriptions.Item label="型号" span={1}>{product?.Model}</Descriptions.Item>
+                <Descriptions.Item label="描述" span={3}>{product?.Desc}</Descriptions.Item>
+                <Descriptions.Item label="更新时间" span={3}>{product?.UpdatedAt}</Descriptions.Item>
+                <Descriptions.Item label="创建时间" span={3}>{product?.CreatedAt}</Descriptions.Item>
+                <Descriptions.Item label="所属公司" >{product?.Company}</Descriptions.Item>
+                <Descriptions.Item label="创建用户" >{product?.Username}</Descriptions.Item>
+                <Descriptions.Item label="资源类型" span={3}>{product?.FilterResource}</Descriptions.Item>
+            </Descriptions>
+        </Spin>
+    )
+}
+
+function mapStateToProps(state) {
+    const { auth, global, product } = state;
+    let p = {}
+    if (product && product.data && (product.data.data ?? []).length > 0) {
+        p=product.data.data[0];
+    }
+
+    return {
+        user: auth.user,
+        actions: global.actions,
+        loading: product.isRequesting,
+        product: p,
+        productCaps: product.data?.data ?? [],
+    };
+}
+
+export default connect(mapStateToProps)(ProductCard);

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

@@ -1,16 +1,17 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { connect } from 'react-redux';
-import { Button, Space, Tag } from 'antd';
+import { Button, Space, Tag ,Drawer} from 'antd';
 import '../style.less';
 import ProTable from '@ant-design/pro-table';
 import ConfigModal from './ConfigModal';
+import ProductCard from './ProductCard';
 
 const ProductsProfile = (props) => {
     const { dispatch, actions, products } = props
 
     const { meta } = actions;
-    const [configModalVis, setConfigModalVis] = useState(false)
-    const [editData, setEditData] = useState(null)
+    const [drawVis, setDrawVis] = useState(false)
+    const [pid, setPid] = useState(null)
     // 过滤后数据，用于表格展示
     const [fdata, setFdata] = useState([])
 
@@ -64,6 +65,18 @@ const ProductsProfile = (props) => {
         valueType: 'image',
         hideInSearch: true,
     },
+    {
+        title: '操作',
+        width: 180,
+        key: 'option',
+        valueType: 'option',
+        render: (tx, record) => [
+            <a key="link" onClick={() => {
+                setPid(record.Id);
+                setDrawVis(true);
+            }}>查看详情</a>,
+        ],
+    },
     ]
 
     const requestList = async (params, sorter) => {
@@ -134,15 +147,10 @@ const ProductsProfile = (props) => {
             </ProTable>
 
             {
-                configModalVis ?
-                    <ConfigModal
-                        visible={true}
-                        close={() => {
-                            setConfigModalVis(false)
-                            setEditData(null)
-                        }}
-                        editData={editData}
-                    /> : ''
+                drawVis ?
+                    <Drawer width={600} placement="right" closable={false} onClose={() => setDrawVis(false)} visible={drawVis}>
+                        <ProductCard productId={pid}></ProductCard>
+                    </Drawer> : ''
             }
         </div>
     )

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

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

code/web/package.json

@@ -61,6 +61,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
+    "@ant-design/pro-components": "^2.3.25",
+    "@ant-design/pro-descriptions": "^2.0.21",
     "@ant-design/pro-form": "^1.34.0",
     "@ant-design/pro-table": "^2.48.0",
     "@antv/g6": "^4.2.5",