feat:新增loading效果

web-network/client/src/sections/network/containers/tableShow.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useRef, useMemo } from 'react'
 import { connect } from 'react-redux'
-import { Spin, Card, CardGroup, Form, Select, Input, Button, Table, Pagination, Tooltip } from 'antd'
+import { Spin, Card, CardGroup, Form, Select, Input, Button, Table, Pagination, Tooltip,Modal  } from 'antd'
 import ExportData from '../components/export-data'
 import moment from 'moment'
 
 const Network = props => {
-   const { dispatch, actions, user, clientHeight, thingId, deviceListAlarms, devicesCardStatusList, project, token } = props
+   const { dispatch, actions, user, clientHeight, thingId, deviceListAlarms, devicesCardStatusList, project, token, } = props
    const { analysis } = actions
    const form = useRef() //表单
    const [deployData, setDeployData] = useState([])
@@ -21,6 +21,8 @@ const Network = props => {
    const [typeList, setTypeList] = useState([])
    const [query, setQuery] = useState({ limit: 10, page: 0 }) //页码信息
     const [deviceId,setDeviceId]  = useState([])
+    const [modalVis,setModalVis]=useState(false)
+    const [loading,setLoading]=useState(true)
    const DeviceTypes = {
       'DTU': 'DTU',
       'gateway': '网关',
@@ -52,6 +54,7 @@ const Network = props => {
                            sensorId: i,
                            sensorName: dataList.instances[i]?.name,
                            deviceType: dataList?.instances[i]?.instance?.properties?.deviceType,
+                           model:dataList?.instances[i]?.instance?.properties?.productType,
                            collectTime: '--',
                            data: '--',
                            iotCardStatus: '--',
@@ -73,12 +76,12 @@ const Network = props => {
                         for (const id in dataList.instances) {
                            deviceIds.push(id)
                            const instances = dataList.instances[id]
-
                            if (instances.type == 's.d' && instances.instance.properties.deviceType == 'sensor') {
                               const meta = deviceMetaDeployed.devices.find(m => m.id == instances.instance.deviceMetaId)
                               sensorsDataItems[id] = {
                                  items: {},
                                  deviceName: instances.name,
+                                 model:instances.instance.properties.productType
                               }
                               if (meta) {
                                  sensorsDataItems[id].items = meta.capabilities[0].properties.reduce((p, n) => {
@@ -136,6 +139,7 @@ const Network = props => {
                      sensorId: sd.sensorId,
                      sensorName: sensorName,
                      collectTime: collectTime,
+                     model:sensorsDataItems[sd.sensorId]?.model,
                      data: dataStr,
                      deviceType: 'sensor', //传感器
                      iotCardStatus: '--',
@@ -162,14 +166,13 @@ const Network = props => {
                   collectTime: objRslt ? objRslt.collectTime : p.collectTime,
                   data: objRslt ? objRslt.data : p.data,
                   deviceType: DeviceTypes[objRslt ? objRslt.deviceType : p.deviceType],
+                  model:objRslt?objRslt?.model:p.model,
                   iotCardStatus:
-                  res.payload.data &&   res.payload.data.length
+                  res.payload.data &&   res.payload.data.length&&res.payload.data.find(v => v.deviceId == p.sensorId)?.status === 0
-                        ?   res.payload.data.find(v => v.deviceId == p.sensorId)?.status === 0
                            ? '正常'
                            :   res.payload.data.find(v => v.deviceId == p.sensorId)?.status === 1
-                              ? '未激活'
+                              ? '未激活':res.payload.data.find(v => v.deviceId == p.sensorId)?.status === 2?'停机'
-                              : '停机'
+                              : '--',
-                        : '--',
                   status:
                      deviceListAlarms && deviceListAlarms.length
                         ? deviceListAlarms?.find(v => v.deviceId == p.sensorId)
@@ -188,6 +191,7 @@ const Network = props => {
             }, [])
             setTypeList(typeList)
             setLastData(dataD)
+            setLoading(false)
             setLastDataCopy(dataD)
          }
         }
@@ -280,12 +284,19 @@ const Network = props => {
       {
          title: '操作',
          width: '10%',
-         dataIndex: 'option',
+        //  dataIndex: 'option',
          key: 'option',
+         render: (_, r) => {
+          return (
+            <div>  {r.model==='FS-WSD-01M'?<Button onClick={()=>{setModalVis(true)}}>查询</Button>: '--'}</div>
+          )    
+         }
       },
    ]
+   console.log('modalVis',modalVis)
    return (
       <>
+      <Spin spinning={loading}>
          <div style={{ marginBottom: 12, display: 'flex' }}>
             <div>
                <Input // suffix={<IconSearch />}
@@ -325,6 +336,11 @@ const Network = props => {
             // scroll={scroll}
             columns={columns}
             dataSource={lastData}></Table>
+        <Modal
+           title='开关'
+           visible={modalVis}
+        ></Modal>
+      </Spin>
       </>
    )
 }
@@ -336,7 +352,9 @@ function mapStateToProps (state) {
       actions: global.actions,
       clientHeight: global.clientHeight,
       deviceListAlarms: deviceListAlarms?.data || [],
-      devicesCardStatusList: devicesCardStatus?.data || [],
+      devicesCardStatusList: devicesCardStatus?.data || [],  
+
+
    }
 }