OperationalService/web/client/src/sections/data/components/dataQueryCheck.jsx

import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'react-redux';
import moment from 'moment';
import SimpleBar from 'simplebar-react';
import { SkeletonScreen, } from "$components";
import { IconSearch } from '@douyinfe/semi-icons';
import { Form, Button, Skeleton, Table, Pagination, SideSheet } from '@douyinfe/semi-ui';
import '../style.less'

function DataQueryCkeck (props) {
   const { clientWidth, visible, onCancel, checkData, actions, dispatch, dataContinuityType } = props
   const { data: sectionData } = actions
   const [loading, setLoading] = useState(false);
   const [htmlCode, setHtmlCode] = useState('');

   useEffect(() => {
      if (checkData.id) {
         setLoading(true)
         setHtmlCode('')
         dispatch(sectionData.getContinuityDetail(checkData.id)).then(res => {
            if (res.success) {
               setHtmlCode(res.payload?.data?.file || '')
            }
            setLoading(false)
         })
      }
   }, [checkData])

   return (
      <SideSheet
         title={`${checkData?.alarmDataContinuityType?.name || dataContinuityType?.find(d => d.typeNumber == checkData.type)?.name} ${moment(checkData.createTime).format('YYYY-MM-DD HH:mm:ss')}`}
         visible={visible}
         onCancel={() => {
            onCancel()
            setHtmlCode('')
         }}
         width={clientWidth - 200}
      >
         <SimpleBar style={{ height: 'calc(100vh - 82px)', }} forceVisible="y"  >
            <Skeleton
               loading={loading}
               active={true}
               placeholder={SkeletonScreen()}
            >
               <div dangerouslySetInnerHTML={{ __html: htmlCode }} />
            </Skeleton>
         </SimpleBar>
      </SideSheet>
   )
}

function mapStateToProps (state) {
   const { auth, global, dataContinuityType } = state;
   return {
      user: auth.user,
      actions: global.actions,
      clientWidth: global.clientWidth,
      dataContinuityType: dataContinuityType.data || [],
   };
}

export default connect(mapStateToProps)(DataQueryCkeck);