import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Card, Modal, Select, Carousel, Progress } from 'antd';
import moment from 'moment'
import ReactECharts from 'echarts-for-react';
import './index.less'

const Capacity = ({ actions, dispatch, siteList, }) => {
   const { bigScreen } = actions
   const [pageLeft, setPageLeft] = useState(0)  //左边翻页
   const [pageRight, setPageRight] = useState(0)  //左边翻页
   // const [siteList, setSiteList] = useState([])    //站点列表
   const [pumpList, setPumpList] = useState([])    //水泵列表
   const [strucId, setStrucId] = useState() //站点ID
   const [pumpId, setPumpId] = useState([]) //水泵id
   const [usePumpId, setUsePumpId] = useState([]) //水泵id
   const [pumpData, setPumpData] = useState([])  //水泵数据
   const [cabinetData, setCabinetData] = useState([])   //进线柜数据
   const [centreData, setCentreData] = useState({})   //中间数据
   const [depthWater, setDepthWater] = useState([]) //液位趋势
   const [electricityTrend, setElectricityTrend] = useState([])   //电流趋势
   const [useTrend, setUseTrend] = useState([])   //用电趋势





   useEffect(() => {
      setStrucId(siteList[0]?.value)
   }, [siteList])

   useEffect(async () => {

      let pump = []
      let cabinetSun = []
      let sun = {}
      let day1 = 0
      let day30 = 0
      let day365 = 0
      let daySun = 0
      if (strucId) {
         await dispatch(bigScreen.axyData({ type: 'get', url: `structures/${strucId}/factors` })).then(async r => {
            if (r.success) {
               //水泵信息
               let waterId = r.payload.data?.find(v => v.name == '泵站水泵')?.id
               if (waterId) {
                  await dispatch(bigScreen.axyData({
                     type: 'get', url: `structures/${strucId}/stations`,
                     params: { query: { factorId: waterId } }
                  })).then(async p => {
                     if (p.success) {
                        let dataId = []
                        let voltageId = []
                        p.payload.data?.map(v => {
                           v.groups?.map(s => {
                              s.stations?.map(f => {
                                 dataId.push(f.id)
                                 if (voltageId?.length < 3) {
                                    voltageId.push(f.id)
                                 }
                              })
                           })
                        })
                        setPumpList(p.payload.data[0]?.groups[0]?.stations)
                        setPumpId(voltageId)
                        setUsePumpId(voltageId)
                        if (dataId.length) {
                           // 当前时间
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/theme/data`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                    endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                    limit: 1
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 pump = d.payload.data?.stations || []
                                 d.payload.data?.stations?.map(f => {
                                    daySun += f?.data[0]?.eMotor_EQ
                                 })
                              }
                           })
                           // 今天
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().startOf('day').format('x'),
                                    end: moment().endOf('day').format('x'),
                                    aggtype: "h",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 d.payload.data[0]?.stations.map(f => {
                                    f.data?.map(h => {
                                       if (!h.changData) {
                                          day1 += h.values.eMotor_EQ
                                       }
                                    })
                                 })
                              }
                           })
                           // 本月
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().startOf('month').format('x'),
                                    end: moment().endOf('month').format('x'),
                                    aggtype: "d",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 d.payload.data[0]?.stations.map(f => {
                                    f.data?.map(h => {
                                       if (!h.changData) {
                                          day30 += h.values.eMotor_EQ
                                       }
                                    })
                                 })
                              }
                           })
                           // 今年
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().startOf('year').format('x'),
                                    end: moment().endOf('year').format('x'),
                                    aggtype: "d",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 d.payload.data[0]?.stations.map(f => {
                                    f.data?.map(h => {
                                       if (!h.changData) {
                                          day365 += h.values.eMotor_EQ
                                       }
                                    })
                                 })
                              }
                           })

                        }

                     }
                  })
               }
               //进线柜
               let wireCabinetId = r.payload.data?.find(v => v.name == '泵站进线柜')?.id
               if (wireCabinetId) {
                  await dispatch(bigScreen.axyData({
                     type: 'get', url: `structures/${strucId}/stations`,
                     params: { query: { factorId: wireCabinetId } }
                  })).then(async p => {
                     if (p.success) {
                        let dataId = []
                        p.payload.data?.map(v => {
                           v.groups?.map(s => {
                              s.stations?.map(f => {
                                 dataId.push(f.id)
                              })
                           })
                        })
                        if (dataId.length) {
                           // // 当前时间
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/theme/data`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                    endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                    limit: 1
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 d.payload.data?.stations?.map(f => {
                                    daySun += f?.data[0]?.eQF_EQ
                                    cabinetSun.push({
                                       today: 0,
                                       sameMonth: 0,
                                       thisYear: 0,
                                       eQF_EQ: f?.data[0]?.eQF_EQ,
                                       id: f.id,
                                       name: f.name,
                                       sQF_CLOSING: f?.data[0]?.sQF_CLOSING
                                    })
                                 })
                              }
                           })
                           // 今天
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().startOf('day').format('x'),
                                    end: moment().endOf('day').format('x'),
                                    aggtype: "h",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 cabinetSun.forEach(p => {
                                    d.payload.data[0]?.stations.map(f => {
                                       if (p.id == f.id) {
                                          f.data?.map(h => {
                                             if (!h.changData) {
                                                p.today = p.today + h.values.eQF_EQ
                                                p.sameMonth = p.sameMonth + h.values.eQF_EQ
                                                p.thisYear = p.thisYear + h.values.eQF_EQ
                                                day1 += h.values.eQF_EQ
                                             }
                                          })
                                       }
                                    })
                                 })
                              }
                           })
                           // 本月
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().startOf('month').format('x'),
                                    end: moment().endOf('month').format('x'),
                                    aggtype: "d",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 cabinetSun.forEach(p => {
                                    d.payload.data[0]?.stations.map(f => {
                                       if (p.id == f.id) {
                                          f.data?.map(h => {
                                             if (!h.changData) {
                                                p.sameMonth = p.sameMonth + h.values.eQF_EQ
                                                day30 += h.values.eQF_EQ
                                             }
                                          })
                                       }
                                    })
                                 })
                              }
                           })
                           // 今年
                           await dispatch(bigScreen.axyData({
                              type: 'get', url: `stations/data/theme`, params: {
                                 query: {
                                    stations: dataId.join(),
                                    begin: moment().startOf('year').format('x'),
                                    end: moment().endOf('year').format('x'),
                                    aggtype: "d",
                                    method: 'diff'
                                 }
                              }
                           })).then(d => {
                              if (d.success) {
                                 // year = d.payload.data[0]?.stations
                                 cabinetSun.forEach(p => {
                                    d.payload.data[0]?.stations.map(f => {
                                       if (p.id == f.id) {
                                          f.data?.map(h => {
                                             if (!h.changData) {
                                                p.thisYear = p.thisYear + h.values.eQF_EQ
                                                day365 += h.values.eQF_EQ
                                             }
                                          })
                                       }
                                    })
                                 })
                              }
                           })



                        }
                     }
                  })
               }


               //泵站信息
               let informationId = r.payload.data?.find(v => v.name == '泵站信息')?.id
               if (informationId) {
                  await dispatch(bigScreen.axyData({
                     type: 'get', url: `structures/${strucId}/stations`,
                     params: { query: { factorId: informationId } }
                  })).then(async p => {
                     if (p.success) {
                        await dispatch(bigScreen.axyData({
                           type: 'get', url: `stations/theme/data`, params: {
                              query: {
                                 stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
                                 startTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                 endTime: moment().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
                                 limit: 1
                              }
                           }
                        })).then(d => {
                           if (d.success) {
                              sun.sHumidity = d.payload.data?.stations[0]?.data[0]?.sHumidity
                              sun.sTEMP = d.payload.data?.stations[0]?.data[0]?.sTEMP
                              sun.sGrille_level = d.payload.data?.stations[0]?.data[0]?.sGrille_level
                           }
                        })

                        // 液位趋势
                        await dispatch(bigScreen.axyData({
                           type: 'get', url: `stations/theme/data`, params: {
                              query: {
                                 stations: p.payload.data[0]?.groups[0]?.stations[0]?.id,
                                 startTime: moment().add(-6, 'hours').format('YYYY-MM-DD HH:mm:ss'),
                                 endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                                 limit: 1440
                              }
                           }
                        })).then(d => {
                           if (d.success) {
                              setDepthWater(d.payload.data?.stations[0]?.data)
                           }
                        })
                     }

                  })
               }
            }
         })
      }

      setPumpData(pump)
      setCabinetData(cabinetSun)

      //计算各个阶段的总点电量

      sun.day1 = day1
      sun.day30 = day30 + day1
      sun.day365 = day365 + day1
      sun.daySun = daySun
      setPageLeft(0)
      setPageRight(0)
      setCentreData(sun)
   }, [strucId])

   useEffect(async () => {
      if (pumpId?.length > 0) {
         //电流趋势
         await dispatch(bigScreen.axyData({
            type: 'get', url: `stations/theme/data`, params: {
               query: {
                  stations: pumpId?.join(),
                  startTime: moment().add(-6, 'hours').format('YYYY-MM-DD HH:mm:ss'),
                  endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                  limit: 1440
               }
            }
         })).then(d => {
            if (d.success) {
               setElectricityTrend(d.payload.data?.stations)
            }
         })

      }
   }, [pumpId])

   useEffect(async () => {
      if (usePumpId?.length > 0) {
         //电流趋势
         await dispatch(bigScreen.axyData({
            type: 'get', url: `stations/theme/data`, params: {
               query: {
                  stations: usePumpId?.join(),
                  startTime: moment().add(-6, 'hours').format('YYYY-MM-DD HH:mm:ss'),
                  endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                  limit: 1440
               }
            }
         })).then(d => {
            if (d.success) {
               setUseTrend(d.payload.data?.stations)
            }
         })

      }
   }, [usePumpId])




   return <div style={{ width: '100%', height: 'calc(100% - 160px)', position: "absolute", top: 160, right: 0 }}>

      <div style={{ width: '100%', height: 'calc(60%)', display: 'flex', }}>
         {/* 水泵 */}
         <div style={{
            width: '30%', height: '100%', display: 'flex', justifyContent: 'center',
         }}>
            <div style={{ width: '80%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
               {pumpData.length > 0 && <>
                  <img style={{ width: 36, height: 36 }} src="/assets/images/monitor/left.png"
                     onClick={() => {
                        if (pageLeft > 0) setPageLeft(pageLeft - 1)
                     }} />
                  <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                     {
                        pumpData?.slice(pageLeft * 2, (pageLeft + 1) * 2)?.map((v, index) => {
                           return <div key={'waterPump' + index} style={{ width: 250, height: 200 }}>
                              <div style={{
                                 width: '100%', height: 38,
                                 backgroundImage: 'url(/assets/images/monitor/pump-head.png)',
                                 backgroundSize: '100% 100%',
                                 backgroundPosition: 'center', display: 'flex', justifyContent: 'space-between', alignItems: 'center'
                              }}>
                                 <div style={{ fontSize: 18, fontWeight: 400, marginLeft: 46, color: '#FFFFFF', fontFamily: "YouSheBiaoTiHei" }}>{v.name}</div>
                                 <div style={{
                                    width: 50, height: 26, background: [2, 4, 6].includes(v.data[0]?.sMotor_State) ? '#00434180' : '#a7110033', border: `1px solid ${[2, 4, 6].includes(v.data[0]?.sMotor_State) ? '#00434180' : '#A71100'}`, cursor: "pointer",
                                    borderRadius: 4, color: [2, 4, 6].includes(v.data[0]?.sMotor_State) ? '#00FFF8' : '#E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10
                                 }}>{[1, 3, 5].includes(v.data[0]?.sMotor_State) ? '停止' : [2, 4, 6].includes(v.data[0]?.sMotor_State) ? '运行' : v.data[0]?.sMotor_State == 7 ? '故障' : '无状态'}</div>
                              </div>
                              <div style={{ background: 'linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)' }}>
                                 <Carousel style={{ width: '100%', height: 66 }} autoplay>
                                    <div style={{ width: '100%', height: '100%', }}>
                                       <div style={{
                                          width: '100%', height: '100%', display: 'flex', justifyContent: 'space-around'
                                       }}>
                                          <div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
                                             <img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-A.png' />
                                             <div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
                                                <div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_A_A} A</div>
                                                <div>A相电流</div>
                                             </div>
                                          </div>
                                          <div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
                                             <img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-V.png' />
                                             <div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
                                                <div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_A_V} V</div>
                                                <div>A相电压</div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <div style={{ width: '100%', height: '100%', }}>
                                       <div style={{
                                          width: '100%', height: '100%', display: 'flex', justifyContent: 'space-around'
                                       }}>
                                          <div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
                                             <img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-A.png' />
                                             <div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
                                                <div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_B_A} A</div>
                                                <div>B相电流</div>
                                             </div>
                                          </div>
                                          <div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
                                             <img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-V.png' />
                                             <div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
                                                <div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_B_V} V</div>
                                                <div>B相电压</div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <div style={{ width: '100%', height: '100%', }}>
                                       <div style={{
                                          width: '100%', height: '100%', display: 'flex', justifyContent: 'space-around'
                                       }}>
                                          <div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
                                             <img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-A.png' />
                                             <div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
                                                <div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_C_A} A</div>
                                                <div>C相电流</div>
                                             </div>
                                          </div>
                                          <div style={{ width: '40%', height: '100%', display: 'flex', justifyContent: 'space-between', }}>
                                             <img style={{ width: 40, height: 40 }} src='/assets/images/monitor/ball-V.png' />
                                             <div style={{ display: 'flex', flexDirection: 'column', color: 'white', fontSize: 14 }}>
                                                <div style={{ fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_C_V} V</div>
                                                <div>C相电压</div>
                                             </div>
                                          </div>
                                       </div>
                                    </div>



                                 </Carousel>
                                 <div style={{ width: "100%", height: 90, padding: '10px 25px', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', color: 'white' }}>
                                    <div style={{ display: 'flex' }}>
                                       <div style={{ width: 90, textAlign: 'end' }}>总用电量:</div>
                                       <div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.data[0]?.eMotor_EQ?.toFixed(2)} kWh</div>
                                    </div>
                                    <div style={{ display: 'flex' }}>
                                       <div style={{ width: 90, textAlign: 'end' }}>单次运行时间:</div>
                                       <div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.data[0]?.dPump_T_S} min</div>
                                    </div>
                                    <div style={{ display: 'flex' }}>
                                       <div style={{ width: 90, textAlign: 'end' }}>总积累时间:</div>
                                       <div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.data[0]?.dPump_T_T} h</div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        })
                     }

                  </div>
                  <img style={{ width: 36, height: 36 }} src="/assets/images/monitor/right.png"
                     onClick={() => {
                        if (pageLeft + 1 < Math.ceil(pumpData.length / 2)) setPageLeft(pageLeft + 1)
                     }} />
               </>}


            </div>
         </div>

         {/* 中间位置 */}
         <div style={{
            width: '40%', height: '100%',
            backgroundImage: 'url(/assets/images/monitor/pillar.png)',
            backgroundSize: '80% 80%',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            position: 'relative'
         }}>
            <div style={{
               backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
               color: '#00FFF8', fontSize: 20, width: 160, height: 160, textAlign: 'center',
               position: 'absolute', top: '6%', left: 10,
            }}>
               <div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
                  湿度：</div>
               <span style={{ fontFamily: "D-DIN-Italic" }}>{centreData?.sHumidity}</span>  %
            </div>
            <div style={{ color: '#00FFF8', fontSize: 20, position: 'absolute', top: '15%', left: "calc(50% - 90px)", display: 'inline-block' }}>
               <span style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600, }}>
                  总用量：</span><span title={centreData?.daySun?.toFixed(2)} style={{ width: 50, fontFamily: "D-DIN-Italic", lineHeight: "16px", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.daySun?.toFixed(2)}</span>  kWh
            </div>
            <div style={{
               backgroundImage: 'url(/assets/images/monitor/pedestal.png)',
               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
               color: '#00FFF8', fontSize: 20, width: 160, height: 160, textAlign: 'center',
               position: 'absolute', top: '6%', right: -10,
            }}>
               <div style={{ fontSize: 20, color: '#E2F8FF', fontWeight: 600 }}>
                  温度：</div>
               <sapn style={{ fontFamily: "D-DIN-Italic" }}>{centreData?.sTEMP}</sapn>  ℃
            </div>

            <div style={{
               backgroundImage: 'url(/assets/images/monitor/oblique.png)',
               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
               color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center',
               position: 'absolute', top: '35%', left: -60,
            }}>
               <div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
                  今年用电：</div>
               <span title={centreData?.day365?.toFixed(2)} style={{ width: 90, fontFamily: "D-DIN-Italic", lineHeight: '16px', textAlign: "center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day365?.toFixed(2) || '--'}</span> kWh
            </div>
            <div style={{
               backgroundImage: 'url(/assets/images/monitor/oblique.png)',
               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
               color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center',
               position: 'absolute', top: '54%', left: 0,
            }}>
               <div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
                  当月用电：</div>
               <span title={centreData?.day30?.toFixed(2)} style={{ width: 90, fontFamily: "D-DIN-Italic", lineHeight: '16px', textAlign: "center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day30?.toFixed(2) || '--'}</span> kWh
            </div>
            <div style={{
               backgroundImage: 'url(/assets/images/monitor/oblique.png)',
               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
               color: '#4CA1FF', fontSize: 20, width: 160, height: 60, textAlign: 'center',
               position: 'absolute', top: '67%', left: 'calc(50% - 80px)',
            }}>
               <div style={{ fontSize: 18, color: '#E2F8FF', fontWeight: 600 }}>
                  当日用电：</div>
               <span title={centreData?.day1?.toFixed(2)} style={{ width: 90, fontFamily: "D-DIN-Italic", lineHeight: '16px', textAlign: "center", display: "inline-block", overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', }}>{centreData?.day1?.toFixed(2) || '--'}</span>  kWh
            </div>

            <div style={{
               backgroundImage: 'url(/assets/images/monitor/oblique.png)',
               backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
               height: 130, width: 180, position: 'absolute', top: '37%', right: 0,
               display: 'flex', flexDirection: 'column', alignItems: 'center'
            }}>
               <div style={{ width: "100%", height: "100%", position: "relative" }}>
                  <div style={{ position: "absolute", top: 0, left: 20, fontSize: 18, fontWeight: 600, color: "#E2F8FF", width: 160, marginBottom: 18 }}>集水池液位</div>
                  <ReactECharts
                     option={{
                        series: [
                           {
                              type: 'gauge',
                              startAngle: 180,
                              endAngle: 0,
                              center: ['50%', '75%'],
                              radius: '90%',
                              min: 0,
                              max: 30,
                              // splitNumber: 8,
                              axisLine: {
                                 lineStyle: {
                                    width: 2,
                                    color: [
                                       [1, '#58D9F9']]
                                 }
                              },
                              pointer: {
                                 icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                                 length: '60%',
                                 width: 2,
                                 itemStyle: {
                                    color: 'auto'
                                 }
                              },
                              axisTick: {
                                 length: 0,
                                 //  offsetCenter: [0, '-60%'],
                                 lineStyle: {
                                    color: 'auto',
                                    width: 1
                                 }
                              },
                              splitLine: {
                                 length: 0,
                                 lineStyle: {
                                    color: 'auto',
                                    width: 2
                                 }
                              },
                              axisLabel: {
                                 color: '#FFF',
                                 fontSize: 8,
                                 distance: 2,
                                 rotate: 'tangential',
                              },
                              detail: {
                                 fontSize: 10,
                                 offsetCenter: [0, '-10%'],
                                 valueAnimation: true,
                                 color: 'inherit'
                              },
                              data: [
                                 {
                                    value: centreData?.sGrille_level?.toFixed(2) || 0,
                                 }
                              ]
                           }
                        ]
                     }}
                     notMerge={true}
                     lazyUpdate={true}
                     style={{ width: '100%', height: '100%' }}
                     theme={'ReactEChart'}
                  />
               </div>

            </div>


            <div className='site' style={{
               display: 'flex', justifyContent: 'center', alignItems: 'center',
               width: '100%', tpo: '80%', position: 'absolute', top: '80%'
            }}>
               <img style={{ width: 67, height: 68, marginLeft: 94 }} src='/assets/images/monitor/site.png' />
               <div style={{
                  width: 180, height: 41, backgroundImage: 'url(/assets/images/monitor/title.png)',
                  backgroundSize: '100% 100%', backgroundPosition: 'center', backgroundRepeat: 'no-repeat',
                  textAlign: 'center', lineHeight: '41px', fontSize: 20, color: '#FFF', fontStyle: "italic"
               }}>{siteList?.filter(v => v.value == strucId)[0]?.label}</div>
               <Select
                  showSearch
                  placeholder="请选择站点"
                  value={strucId}
                  style={{ width: 155 }}
                  optionFilterProp="children"
                  onSelect={v => {
                     setStrucId(v)
                  }}
                  options={siteList}
               />
            </div>
         </div>
         {/* 进线柜 */}
         <div style={{ width: '30%', height: '100%', display: 'flex', justifyContent: 'center', }}>
            <div style={{ width: '80%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }}>
               {cabinetData.length > 0 && <>
                  <img style={{ width: 36, height: 36 }} src="/assets/images/monitor/left.png"
                     onClick={() => {
                        if (pageRight > 0) setPageRight(pageRight - 1)
                     }} />
                  <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                     {
                        cabinetData?.slice(pageRight * 2, (pageRight + 1) * 2)?.map((v, index) => {
                           return <div key={'waterPump' + index} style={{ width: 250, height: 200 }}>
                              <div style={{
                                 width: '100%', height: 38,
                                 backgroundImage: 'url(/assets/images/monitor/pump-head.png)',
                                 backgroundSize: '100% 100%',
                                 backgroundPosition: 'center', display: 'flex', justifyContent: 'space-between', alignItems: 'center'
                              }}>
                                 <div style={{ fontSize: 18, fontWeight: 400, marginLeft: 46, color: '#FFFFFF', fontFamily: "YouSheBiaoTiHei" }}>{v.name}</div>
                                 <div style={{
                                    width: 50, height: 26, background: v.sQF_CLOSING ? "#00434180" : '#a7110033', border: `1px solid ${v.sQF_CLOSING ? "#00FFF8" : '#A71100'}`, cursor: "pointer",
                                    borderRadius: 4, color: v.sQF_CLOSING ? '#00FFF8' : '#E83E2B', textAlign: 'center', lineHeight: '22px', marginRight: 10
                                 }}>{v.sQF_CLOSING ? '合闸' : '分闸'}</div>
                              </div>
                              <div style={{ background: 'linear-gradient(180deg, #000e28e6 1%, #021f48cc 100%)' }}>

                                 <div style={{ width: "100%", height: 160, padding: '10px 25px', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', color: 'white' }}>
                                    <div style={{ display: 'flex' }}>
                                       <div style={{ width: 90, textAlign: 'end' }}>当日用电:</div>
                                       <div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{isNaN(v.today) ? v.today : v.today?.toFixed(2)} kWh</div>
                                    </div>
                                    <div style={{ display: 'flex' }}>
                                       <div style={{ width: 90, textAlign: 'end' }}>当月用电:</div>
                                       <div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{isNaN(v.sameMonth) ? v.sameMonth : v.sameMonth?.toFixed(2)} kWh</div>
                                    </div>
                                    <div style={{ display: 'flex' }}>
                                       <div style={{ width: 90, textAlign: 'end' }}>今年用电:</div>
                                       <div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{isNaN(v.thisYear) ? v.thisYear : v.thisYear?.toFixed(2)} kWh</div>
                                    </div>
                                    <div style={{ display: 'flex' }}>
                                       <div style={{ width: 90, textAlign: 'end' }}>总用电量:</div>
                                       <div style={{ width: 90, textAlign: 'end', color: '#FFCB00', fontFamily: "D-DIN-Italic" }}>{v.eQF_EQ?.toFixed(2) || '--'} kWh</div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        })
                     }

                  </div>
                  <img style={{ width: 36, height: 36 }} src="/assets/images/monitor/right.png"
                     onClick={() => {
                        if (pageRight + 1 < Math.ceil(cabinetData.length / 2)) setPageRight(pageRight + 1)
                     }} /></>}

            </div>
         </div>
      </div >
      <div style={{ width: '100%', height: 'calc(31% )', display: 'flex', justifyContent: 'space-between' }}>
         <div style={{
            backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
            backgroundSize: '100% 36px',
            backgroundPosition: '0 0',
            backgroundRepeat: 'no-repeat',
            width: '31%', height: '100%',
         }}>
            <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
               <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>液位趋势</div>
            </div>
            <ReactECharts
               option={{
                  title: {
                     // text: v.name, 
                  },
                  grid: {
                     // width: 300,
                     // height: 200
                  },
                  dataZoom: [
                     {
                        type: 'slider',
                        showDetail: false
                     },
                     {
                        type: 'inside',

                     },
                  ],
                  tooltip: {
                     trigger: 'axis'
                  },
                  legend: {
                     data: ['集水池液位', '池前（上游）液位'],
                     right: '10%',
                     textStyle: {
                        color: '#FFF',
                     },
                  },
                  xAxis: {
                     type: 'time',
                     // name: "时间",
                     boundaryGap: false,
                     minInterval: 1000 * 60,
                  },
                  yAxis: {
                     type: 'value',
                     name: "单位：m",
                     areaStyle: {
                        color: '#FFF',
                     },
                  },
                  series: [
                     {
                        type: 'line',
                        name: '集水池液位',
                        smooth: true,
                        areaStyle: {
                           color: '#0e9cff26',
                        },
                        data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sLiquid_level?.toFixed(2) || null])||[]
                     }, {
                        type: 'line',
                        name: '池前（上游）液位',
                        smooth: true,
                        areaStyle: {
                           color: '#0e9cff26',
                        },
                        data: depthWater?.map(v => [moment(v.time).format('YYYY-MM-DD HH:mm:ss'), v.sGrille_level?.toFixed(2) || null])||[]
                     },
                  ]
               }}
               notMerge={true}
               lazyUpdate={true}
               style={{ width: "100%", height: "100%" }}
               theme={'ReactEChart'}
            />

         </div>
         <div style={{
            backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
            backgroundSize: '100% 36px',
            backgroundPosition: '0 0',
            backgroundRepeat: 'no-repeat',
            width: '31%', height: '100%',
         }}>
            <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
               <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>电流趋势</div>
               <Select
                  className='bigscreen-select'
                  bordered={false}
                  style={{ width: 150 }}
                  value={pumpId}
                  maxTagCount={1}
                  mode="multiple"
                  optionFilterProp="children"
                  onChange={v => {
                     if (v?.length < 4) {
                        setPumpId(v)
                     }
                  }}
                  options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []}
               />
            </div>
            <ReactECharts
               option={{
                  title: {
                     // text: v.name, 
                  },
                  grid: {
                     // width: 300,
                     // height: 200
                  },
                  dataZoom: [
                     {
                        type: 'slider',
                        showDetail: false
                     },
                     {
                        type: 'inside',

                     },
                  ],
                  tooltip: {
                     trigger: 'axis'
                  },
                  legend: {
                     data: electricityTrend?.map(v => v.name) || [],
                     right: '10%',
                     textStyle: {
                        color: '#FFF',
                     },
                  },
                  xAxis: {
                     type: 'time',
                     // name: "时间",
                     boundaryGap: false,
                     minInterval: 1000 * 60,

                  },
                  yAxis: {
                     type: 'value',
                     name: "单位：A",
                     areaStyle: {
                        color: '#FFF',
                     },
                  },
                  series: electricityTrend?.map(v => ({
                     type: 'line',
                     name: v.name,
                     smooth: true,
                     areaStyle: {
                        color: '#0e9cff26',
                     },
                     data: v.data?.map(f => [moment(f.time).format('YYYY-MM-DD HH:mm:ss'), f.eMotor_A_A?.toFixed(2)]) || []

                  })) || []
               }}
               notMerge={true}
               lazyUpdate={true}
               style={{ width: "100%", height: "100%" }}
               theme={'ReactEChart'}
            />

         </div>
         <div style={{
            backgroundImage: 'url(/assets/images/monitor/headerTitle.png)',
            backgroundSize: '100% 36px',
            backgroundPosition: '0 0',
            backgroundRepeat: 'no-repeat',
            width: '31%', height: '100%',
         }}>
            <div className='site' style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
               <div style={{ lineHeight: "36px", color: '#E2F8FF', fontSize: 20., textIndent: 20, fontFamily: 'YouSheBiaoTiHei', fontSizeL: '1rem' }}>用电趋势</div>
               <Select
                  className='bigscreen-select'
                  bordered={false}
                  style={{ width: 150 }}
                  value={usePumpId}
                  maxTagCount={1}
                  mode="multiple"
                  optionFilterProp="children"
                  onChange={v => {
                     if (v?.length < 4) {
                        setUsePumpId(v)
                     }
                  }}
                  options={pumpList?.map(v => ({ value: v.id, label: v.name })) || []}
               />
            </div>
            <ReactECharts
                  option={{
                     title: {
                        // text: v.name, 
                     },
                     grid: {
                        // width: 300,
                        // height: 200
                        left: 100
                     },
                     dataZoom: [
                        {
                           type: 'slider',
                           showDetail: false
                        },
                        {
                           type: 'inside',

                        },
                     ],
                     tooltip: {
                        trigger: 'axis'
                     },
                     legend: {
                        data: useTrend?.map(v => v.name) || [],
                        right: '10%',
                        textStyle: {
                           color: '#FFF',
                        },
                     },
                     xAxis: {
                        type: 'time',
                        // name: "时间",
                        boundaryGap: false,
                        minInterval: 1000 * 60,
                     },
                     yAxis: {
                        type: 'value',
                        name: "单位：kwh",
                        areaStyle: {
                           color: '#FFF',
                        },
                     },
                     series: useTrend?.map(v => {
                        return {
                           type: 'line',
                           name: v.name,
                           smooth: true,
                           areaStyle: {
                              color: '#0e9cff26',
                           },
                           data: v.data?.map(f => [moment(f.time).format('YYYY-MM-DD HH:mm:ss'), f.eMotor_EQ?.toFixed(2)]) || []
                        }
                     }) || []
                  }}
                  notMerge={true}
                  lazyUpdate={true}
                  style={{ width: "100%", height: "100%" }}
                  theme={'ReactEChart'}
               />
         </div>
      </div>
   </div >
}

function mapStateToProps (state) {
   const { auth, global } = state;
   return {
      user: auth.user,
      clientHeight: global.clientHeight,
      actions: global.actions,
   };
}
export default connect(mapStateToProps)(Capacity)