ss-dp/src/views/Home/components/Business/SiQuan/components/AllWeatherControl/index.js

import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Table } from 'antd';
import CommonModal from '@/views/Home/components/UI/CommonModal';
import arrowIcon from '@/assets/images/card/arrow.png';
import smallCard from '@/assets/images/card/smallCard.png';
import wrj from '@/assets/images/card/wrj.png';
import apiurl from '@/service/apiurl';
import { httpget, httppost } from '@/utils/request';
import './index.less';
import RightPanel from '../ModalComponents/AllWeatherModal/RainMonitor/RightPanel';
import ReservoirPanel from '../ModalComponents/AllWeatherModal/ReservoirPanel';
import VideoList from '../ModalComponents/VideoList'
import UAVModal from '../ModalComponents/UAVModal';

const AllWeatherControl = () => {
  const isFullScreen = useSelector(s => s.runtime.isFullScreen);
  const [reservoirItem, setReservoirItem] = useState({})
  const [rainList, setRainList] = useState([])
  const [detailVisible, setDetailVisible] = useState(false)
  const [reservoirVisible, setReservoirVisible] = useState(false)
  const [videoOpen, setVideoOpen] = useState(false)
  const [selectedStcd, setSelectedStcd] = useState(null)
  
  // UAV Modal States
  const [uavModalVisible, setUavModalVisible] = useState(false);
  const [uavActiveTab, setUavActiveTab] = useState('1');

  const uavTabs = [
    { label: '直播画面', value: '1' },
    { label: '飞行任务', value: '2' },
    { label: '历史记录', value: '3' }
  ];

  const rainColumns = [
    {
      title: '站名',
      dataIndex: 'stnm',
      key: 'stnm',
      align: 'center',
      width: 140,
      ellipsis: true
    },
    {
      title: '今日',
      dataIndex: 'today',
      key: 'today',
      align: 'center',
    },
    {
      title: '昨日',
      dataIndex: 'yesterdayDrp',
      key: 'yesterdayDrp',
      align: 'center',
    },
    {
      title: '24h预报',
      dataIndex: 'h24',
      key: 'h24',
      align: 'h24',
    },
  ];


  // Reservoir Data
  const reservoirData = [
    { label: '主坝坝前', value: reservoirItem?.rz, unit: 'm', upArrow: reservoirItem?.status > 0, underline: true,downArrow:reservoirItem?.status < 0, clickable: true },
    { label: '汛限水位', value: reservoirItem?.flLowLimLev, unit: 'm' },
    { label: '距汛限', value: reservoirItem?.gapFlLowLimLev, unit: 'm', isNegative: reservoirItem?.gapFlLowLimLev < 0 },
    { label: '副坝坝前', value: reservoirItem?.rz, unit: 'm', clickable: true,underline: true },
    { label: '当前库容', value: reservoirItem?.nowCap, unit: '万m³' },
    { label: '有效库容', value: reservoirItem?.effectiveCap, unit: '万m³' },
  ];

  //指定水库获取
  const getReservoir = async () => {
    try {
      const result = await httpget(apiurl.sq.qth.reservoir.list);
      if (result.code == 200) {
        setReservoirItem(result.data[0])
      }
    } catch (error) {
      console.log(error);
    }
  }
  const getRainList = async () => {
    try {
      const result = await httpget(apiurl.sq.qth.rainList.list);
      if (result.code == 200) {
        setRainList(result.data)
      }
    } catch (error) {
      console.log(error);
    }
  }
  useEffect(() => {
    getRainList()
    getReservoir()
  }, [])

  const openUavModal = (key) => {
      setUavActiveTab(key);
      setUavModalVisible(true);
  }

  return (
    <div className={`all-weather-control ${isFullScreen ? 'full-screen' : ''}`}>
      {/* 雨情 Section */}
      <div className="section rain-section">
        <div className="section-header">
          <div className="title-wrapper">
            <img src={arrowIcon} alt="arrow" className="arrow-icon" />
            <span className="section-title">雨情</span>
          </div>
        </div>
        <Table
          columns={rainColumns}
          dataSource={rainList}
          pagination={false}
          size="small"
          rowKey={'stcd'}
          rowClassName={(record) => record.isTotal ? 'total-row' : ''}
          bordered={false}
          scroll={{ y: 300 }}
          onRow={(record) => ({
            onClick: () => {
              setSelectedStcd(record);
              setDetailVisible(true);
            }
          })}
        />
        <CommonModal
          title={selectedStcd?.stnm}
          visible={detailVisible}
          onClose={() => setDetailVisible(false)}
          width={'70%'}
        >
          <RightPanel stcd={selectedStcd?.stcd} cleanMode={true} />
        </CommonModal>
      </div>

      {/* 水库水情 Section */}
      <div className="section reservoir-section">
        <div className="section-header">
          <div className="title-wrapper">
            <img src={arrowIcon} alt="arrow" className="arrow-icon" />
            <span className="section-title">水库水情</span>
          </div>
        </div>
        <div className="reservoir-cards">
          {reservoirData.map((item, index) => (
            <div
              key={index}
              className="reservoir-card"
              style={{ backgroundImage: `url(${smallCard})`, cursor: item.clickable ? 'pointer' : 'default' }}
              onClick={() => {
                if (item.clickable) {
                  setReservoirVisible(true)
                }
              }}
            >
              <div className={`value ${item.isPrimary ? 'primary' : ''} ${item.label == '距汛限'?item.isNegative ? 'negative' : 'positive':""}`}>
                <span className={`num ${item.underline ? 'underline' : ''}`}>{item.value}</span>
                <span className="unit">{item.unit}</span>
              </div>
              <div className="label">{item.label}</div>
              {item.upArrow && <span className="arrow-up">↑</span>}
              {item.downArrow && <span className="arrow-down">↓</span>}
            </div>
          ))}
        </div>
        <CommonModal
          title={reservoirItem?.stnm || '水库水情'}
          visible={reservoirVisible}
          onClose={() => setReservoirVisible(false)}
          width={'90%'}
        >
          <ReservoirPanel stcd={reservoirItem?.stcd} cleanMode={true} />
        </CommonModal>
      </div>

      {/* 无人机 Section */}
      <div className="section uav-section">
        <div className="section-header">
          <div className="title-wrapper">
            <img src={arrowIcon} alt="arrow" className="arrow-icon" />
            <span className="section-title">无人机</span>
          </div>
          <span className="link" onClick={()=>setVideoOpen(true)}>视频墙</span>
        </div>
        <div className="uav-content">
          <div
            className="uav-image"
            style={{ backgroundImage: `url(${wrj})` }}
          />
          <div className="uav-actions">
            <div className="uav-button" onClick={() => openUavModal('1')}>直播画面</div>
            <div className="uav-button" onClick={() => openUavModal('2')}>巡查任务</div>
          </div>
        </div>
        <CommonModal
          title={'视频监控'}
          visible={videoOpen}
          onClose={() => setVideoOpen(false)}
          width={'80%'}
        >
          <VideoList />
        </CommonModal>
        <CommonModal
          title={'无人机巡查'}
          visible={uavModalVisible}
          onClose={() => setUavModalVisible(false)}
          width={'70%'}
          tabs={uavTabs}
          activeTab={uavActiveTab}
          onTabChange={setUavActiveTab}
        >
          <UAVModal activeKey={uavActiveTab} />
        </CommonModal>
      </div>
    </div>
  );
};

export default AllWeatherControl;