tsg-web/src/views/Home/Introduction/index.tsx

import { Tabs, Modal, Collapse } from 'antd'
import React, { useState } from 'react'
import { CaretRightOutlined, ExpandOutlined } from '@ant-design/icons';
import DcpjPage from "../../Home/Introduction/dcpj"
import FxyhdcPage from "../../Home/Introduction/fxyhdc"
import staticData from '../../staticData';
import DcpjDetailsPage from "../../Home/Introduction/dcpjDetails"
import "./index.less"
import {config} from "../../../config";
import useCrud from '../../../components/crud/useCrud';
const { Panel } = Collapse;

const Introduction = () => {
  const [activeKey, setActiveKey] = useState("1");

  const [detailsVisible, setDetailsVisible] = useState(false);
  const [detailsVisible2, setDetailsVisible2] = useState(false);

  const [dcpjVisible, setDcpjVisible] = useState(false);
  const crud = useCrud();


  const handleCancel = () => {
    setDetailsVisible(false);
  }

  const handleCancelDcpj = () => {
    setDcpjVisible(false);
  }



  const [previewPdf, setPreviewPdf] = useState("");
  //console.log(previewPdf)
  const genExtra = () => (
    <ExpandOutlined title="调查评价详情"
      onClick={(event) => {
        event.stopPropagation();
        setDcpjVisible(true);
      }}
    />
  );

  const systemSwitchType = localStorage.getItem('address') && localStorage.getItem('address')==="wufeng";

  return (
    <div style={{ width: '98%', height:"calc( 100vh - 60px )", marginLeft: '2%', overflow:"hidden auto",  }}>
      <Tabs defaultActiveKey={activeKey}>
        <Tabs.TabPane tab={systemSwitchType?"五峰县基本情况":"建始县基本情况"} key="1">
          <div style={{textIndent:"28px", textAlign:"justify", paddingRight:"12px"}}>
            <span>{staticData.qkjsData.jbqk}&nbsp;&nbsp;</span>
            <span onClick={()=>{setDetailsVisible(true);setPreviewPdf(`${process.env.PUBLIC_URL}/data/pdf/${localStorage.getItem('address')}/简介.pdf`);}} style={{fontSize:"12px", cursor:"pointer", color:"#0068F4"}}>展开详情</span>
          </div>

        </Tabs.TabPane>
        <Tabs.TabPane tab="试点流域基本情况" key="2">
          <div style={{textIndent:"28px", textAlign:"justify", paddingRight:"12px"}}>
            {staticData.qkjsData.sdly}&nbsp;&nbsp;
            <span onClick={()=>{setDetailsVisible(true);setPreviewPdf(`${process.env.PUBLIC_URL}/data/pdf/${localStorage.getItem('address')}/试点流域基本情况.pdf`);}} style={{fontSize:"12px", cursor:"pointer", color:"#0068F4"}}>展开详情</span>
          </div>
        </Tabs.TabPane>
      </Tabs>

      <div style={{margin:"20px 12px 0 0"}}>
        <Collapse
          collapsible="header"
          defaultActiveKey={['1','2']}
          expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
        >
          <Panel header="调查评价" key="1" extra={genExtra()} >
            
         
            <DcpjPage /> 
           
          </Panel>
          <Panel header="风险隐患调查" key="2" >
            <FxyhdcPage setVisible={(e:any)=>{setDetailsVisible2(e)}} setPdf={(e:any)=>{setPreviewPdf(e)}}/>
          </Panel>
        </Collapse>
      </div>

      {/*展开详情的弹窗*/}
      <Modal
        visible={detailsVisible}
        title="详情"
        footer={null}
        onCancel={handleCancel}
        width="94vw"
        className="hzyqModal"
        style={{top:"15px", height:"98vh"}}
      >
        <div style={{height:"87vh"}}>
          <iframe
            src={previewPdf}
            width="100%"
            height="100%"
            frameBorder={0}//边框设置
            scrolling="no"//滚动设置
          ></iframe>
        </div>
      </Modal>

      {/*展开详情的弹窗2*/}
      <Modal
        visible={detailsVisible2}
        title="详情"
        footer={null}
        onCancel={()=>{setDetailsVisible2(false)}}
        width="94vw"
        className="hzyqModal"
        style={{top:"15px", height:"98vh"}}
      >
        <div style={{height:"87vh"}}>
          <iframe
            src={previewPdf}
            width="100%"
            height="100%"
            frameBorder={0}//边框设置
            // scrolling="no"//滚动设置
          ></iframe>
        </div>
      </Modal>

      {/*调查评价的弹窗*/}
      <Modal
        visible={dcpjVisible}
        title="调查评价详情"
        footer={null}
        onCancel={handleCancelDcpj}
        width="90vw"
        className="hzyqModal"
        style={{top:"15px", height:"98vh"}}
      >
        <DcpjDetailsPage />
      </Modal>


    </div>
  )
}

export default Introduction