MeterInfo.tsx

import React, {useState} from 'react';
import { history, useRequest } from 'umi';
import { Tabs, Card } from 'antd'
import {FormOutlined} from '@ant-design/icons'
import {BorderLeft} from '@/components/Customized/AutoTitle'
import {fetchMeterInfo} from '@/services/gather'
import InfoTab from '../../Device/StandingBook/components/DeviceInfo/InfoTab'
import FileTab from '../../Device/StandingBook/components/DeviceInfo/FileTab'
import style from '../../Device/StandingBook/components/DeviceInfo/style.less'

const {TabPane} = Tabs;

type DeviceInfoProps = {
  deviceId: string;
  onUpdate?: () => void;
  hasBook: boolean
}

const Index: React.FC<DeviceInfoProps> = (props) => {
  const {deviceId, onUpdate, hasBook} = props
  const deviceDetail = useRequest(() => fetchMeterInfo(deviceId))

  const deviceInfo = deviceDetail?.data ? {...deviceDetail?.data, ...deviceDetail?.data?.device} : {}

  const [tab, setTab] = useState<string>('1')
  /**
   * @页面方法
   */
  const tabChange = (tabKey: string) => {
    setTab(tabKey)
  }
  /**
   * @页面数据
   */
  const tabData = [
    {tab: '基础信息', key: '1'},
    {tab: '设备文件', key: '2'},
  ]

  const testVal = deviceInfo.highestPriorityStatusCode;

  const className = {
    normal: "btn_success", malfunction: "btn_warning", alert: "btn_alarm",
    offline: "btn_disabled", deactivate: "btn_disabled", scrapped: 'btn_disabled'
  }[testVal]

  const title = {
    normal: '正常', malfunction: '故障', alert: '报警',
    offline: '离线', deactivate: '停用', scrapped: '报废'
  }[testVal]

  const tabExtra = <div className={className}>{title}</div>

  const editHref = () => {
    const url = hasBook
      ? `/ops/book/account/${deviceInfo?.device?.type}/edit/${deviceId}`
      : `/ops/gather/instrument/edit/${deviceId}`
    history.push(url)
  }
  const editUpdate = () => {
    onUpdate?.();
    deviceDetail.run()
  }

  return (
    <Card
      size="small"
      className={style.record_box}
      bodyStyle={{padding: '0 10px 10px'}}
      title={
        <div className="pos_aline_no_wrap">
          <BorderLeft title="设备信息"/>
          <div onClick={editHref} className={style.btn_primary}>
            编&nbsp;辑&nbsp;<FormOutlined />
          </div>
        </div>
      }
    >
      <Tabs
        activeKey={tab}
        onChange={tabChange}
        className={style.record_tab}
        tabBarExtraContent={tabExtra}
      >
        {tabData.map((item) => (
          <TabPane tab={item.tab} key={item.key}/>
        ))}
      </Tabs>
      {tab === '1' && (
        <InfoTab update={editUpdate} deviceInfo={deviceInfo} type="account"/>
      )}
      {tab === '2' && (
        <FileTab deviceInfo={deviceInfo}/>
      )}
    </Card>
  );
};

export default Index;