import React, { useState, useEffect } from 'react';
import { Col, Row, Statistic } from 'antd';
import './index.less'
import {
  FullScreenContainer,
  ScrollBoard,
  Decoration3,
  BorderBox12,
  Decoration4,
} from '@jiaminghi/data-view-react'
const KepData: React.FC = () => {

  const [thisdate, setThisdate] = useState({ timeStr: '' })

  useEffect(() => {
    setTimingFn();

  }, [])


  const style = { width: '5px', height: '45%' }

  const style2 = {
    width: '120px',
    height: '50px',
    lineHeight: '50px',
    textAlign: 'center',
    marginLeft: '200px',
  }
  function setTimingFn() {
    setInterval(() => {
      let dateYear = formatTime(new Date(), 'yyyy-MM-dd');
      let dateDay = formatTime(new Date(), 'HH: mm: ss');
      setThisdate({ timeStr: `${dateYear}  ${dateDay} ` });
    }, 1000);
  }
  function formatTime(time: string | number | Date, fmt: string) {
    if (!time) return '';
    else {
      const date = new Date(time);
      const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'H+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        S: date.getMilliseconds(),
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        );
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1
              ? o[k]
              : ('00' + o[k]).substr(('' + o[k]).length)
          );
        }
      }
      return fmt;
    }
  }


  return (
    <div id="data-view">
      <FullScreenContainer>

        <div className="main-header">
          <div className="mh-left">   </div>
          <div className="mh-middle">
            五芳斋数据大屏
          </div>
          <div className="mh-right">
            <div className='dateclass' >
              {thisdate.timeStr}
            </div>
          </div>
        </div>
        &nbsp;&nbsp;&nbsp;
        <div className="main-container">
          <div className="mc-top">
            <BorderBox12 className='main-container_dev'>
              <div style={{ height: "30%", width: "100%", textAlign: "center" }}>
                <div style={{ height: "50px", width: "90%", display: "block", margin: " 0 auto", textAlign: "center" }} className='titlebak'>
                  <h2 style={{ color: "#34CDE1" }}>&nbsp;&nbsp;浸泡机数一</h2>
                </div>
                <span style={{ color: "red" }}>&nbsp;&nbsp;&nbsp;&nbsp;警告:</span>
                {/* <span style={{ color: "red" }}>&nbsp;&nbsp;冷水罐温度过高</span> */}
              </div>
              <div style={{ height: "70%", width: "100%" }}>
                <div style={{ width: "40%", height: "100%", float: "left", whiteSpace: "nowrap" }} >
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                  </div>
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ fontSize: 18 }}>°C</span>
                  </div>
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                  </div>

                </div>
                <div style={{ width: "60%", height: "100%", float: "left", textAlign: "center" }}>
                  <img src={require('./img/313x289.png')} style={{ width: "99%", height: "80%", float: "right" }} />
                  <h3 style={{ color: "green" }}>运行中</h3>
                </div>

              </div>
            </BorderBox12>
            <BorderBox12 className='main-container_dev'>
              <div style={{ height: "30%", width: "100%", textAlign: "center" }}>
                <div style={{ height: "50px", width: "90%", display: "block", margin: " 0 auto", textAlign: "center" }} className='titlebak'>
                  <h2 style={{ color: "#34CDE1" }}>&nbsp;&nbsp;浸泡机数一</h2>
                </div>
                <span style={{ color: "red" }}>&nbsp;&nbsp;&nbsp;&nbsp;警告:</span><span style={{ color: "red" }}>&nbsp;&nbsp;冷水罐温度过高</span>
              </div>
              <div style={{ height: "70%", width: "100%" }}>
                <div style={{ width: "40%", height: "100%", float: "left", whiteSpace: "nowrap" }} >
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                  </div>
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ fontSize: 18 }}>°C</span>
                  </div>
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                  </div>

                </div>
                <div style={{ width: "60%", height: "100%", float: "left", textAlign: "center" }}>
                  <img src={require('./img/313x289.png')} style={{ width: "99%", height: "80%", float: "right" }} />
                  <h3 style={{ color: "green" }}>运行中</h3>
                </div>

              </div>
            </BorderBox12>
            <BorderBox12 className='main-container_dev'>  <div style={{ height: "30%", width: "100%", textAlign: "center" }}>
              <div style={{ height: "50px", width: "90%", display: "block", margin: " 0 auto", textAlign: "center" }} className='titlebak'>
                <h2 style={{ color: "#34CDE1" }}>&nbsp;&nbsp;浸泡机数一</h2>
              </div>
              <span style={{ color: "red" }}>&nbsp;&nbsp;&nbsp;&nbsp;警告:</span><span style={{ color: "red" }}>&nbsp;&nbsp;冷水罐温度过高</span>
            </div>
              <div style={{ height: "70%", width: "100%" }}>
                <div style={{ width: "40%", height: "100%", float: "left", whiteSpace: "nowrap" }} >
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                  </div>
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ fontSize: 18 }}>°C</span>
                  </div>
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                  </div>

                </div>
                <div style={{ width: "60%", height: "100%", float: "left", textAlign: "center" }}>
                  <img src={require('./img/313x289.png')} style={{ width: "99%", height: "80%", float: "right" }} />
                  <h3 style={{ color: "green" }}>运行中</h3>
                </div>

              </div></BorderBox12>
            <BorderBox12 className='main-container_dev'>  <div style={{ height: "30%", width: "100%", textAlign: "center" }}>
              <div style={{ height: "50px", width: "90%", display: "block", margin: " 0 auto", textAlign: "center" }} className='titlebak'>
                <h2 style={{ color: "#34CDE1" }}>&nbsp;&nbsp;浸泡机数一</h2>
              </div>
              <span style={{ color: "red" }}>&nbsp;&nbsp;&nbsp;&nbsp;警告:</span><span style={{ color: "red" }}>&nbsp;&nbsp;冷水罐温度过高</span>
            </div>
              <div style={{ height: "70%", width: "100%" }}>
                <div style={{ width: "40%", height: "100%", float: "left", whiteSpace: "nowrap" }} >
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                  </div>
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ fontSize: 18 }}>°C</span>
                  </div>
                  <div style={{ height: "30%" }}>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                    <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                    <span style={{ fontSize: 18 }}>10</span>
                    <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                  </div>

                </div>
                <div style={{ width: "60%", height: "100%", float: "left", textAlign: "center" }}>
                  <img src={require('./img/313x289.png')} style={{ width: "99%", height: "80%", float: "right" }} />
                  <h3 style={{ color: "green" }}>运行中</h3>
                </div>

              </div></BorderBox12>
          </div>
          <div className="mc-bottom">
            <div className="mc-bottom1">
              <div style={{ height: "50%" }}>
                <BorderBox12 className='main-container_dev1'>
                  <div style={{ height: "30%", width: "100%", textAlign: "center" }}>
                    <div style={{ height: "50px", width: "90%", display: "block", margin: " 0 auto", textAlign: "center" }} className='titlebak'>
                      <h2 style={{ color: "#34CDE1" }}>&nbsp;&nbsp;储存罐一</h2>
                    </div>
                    <span style={{ color: "red" }}>&nbsp;&nbsp;&nbsp;&nbsp;警告:</span><span style={{ color: "red" }}>&nbsp;&nbsp;冷水罐温度过高</span>
                  </div>
                  <div style={{ height: "70%", width: "100%" }}>
                    <div style={{ height: "70%", width: "100%", justifyContent: "center", display: "flex", position: "absolute", textAlign: "center", alignItems: "center" }}>
                      <div>
                        <div style={{ float: "left" }}>

                          <img style={{ opacity: 1, height: 25 }} src={require('./img/aaaa.png')}></img>
                          <span style={{ fontSize: 15, color: "#50B15D" }}>温度：</span>
                          <span style={{ fontSize: 18 }}>10</span>
                          <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                        </div>
                        <div style={{ float: "left" }}>
                          &nbsp; &nbsp; &nbsp; &nbsp;
                        </div>
                        <div style={{ float: "left" }}>

                          {/* <img style={{ opacity: 1, height: 25 }} src={require('./img/aaaa.png')}></img> */}
                          <span style={{ fontSize: 15, color: "#50B15D" }}>液位：</span>
                          <span style={{ fontSize: 18 }}>10</span>
                          <span style={{ marginLeft: '10px', fontSize: 18 }}>mm</span>
                        </div>

                      </div>
                    </div>
                    <img src={require('./img/屏幕截图 20.png')} style={{ height: "100%", width: "100%" }} />
                  </div>
                </BorderBox12>
                <BorderBox12 className='main-container_dev1'> <div style={{ height: "30%", width: "100%", textAlign: "center" }}>
                  <div style={{ height: "50px", width: "90%", display: "block", margin: " 0 auto", textAlign: "center" }} className='titlebak'>
                    <h2 style={{ color: "#34CDE1" }}>&nbsp;&nbsp;储存罐一</h2>
                  </div>
                  <span style={{ color: "red" }}>&nbsp;&nbsp;&nbsp;&nbsp;警告:</span><span style={{ color: "red" }}>&nbsp;&nbsp;冷水罐温度过高</span>
                </div>
                  <div style={{ height: "70%", width: "100%" }}>
                    <div style={{ height: "70%", width: "100%", justifyContent: "center", display: "flex", position: "absolute", textAlign: "center", alignItems: "center" }}>
                      <div>
                        <div style={{ float: "left" }}>

                          <img style={{ opacity: 1, height: 25 }} src={require('./img/aaaa.png')}></img>
                          <span style={{ fontSize: 15, color: "#50B15D" }}>温度：</span>
                          <span style={{ fontSize: 18 }}>10</span>
                          <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                        </div>
                        <div style={{ float: "left" }}>
                          &nbsp; &nbsp; &nbsp; &nbsp;
                        </div>
                        <div style={{ float: "left" }}>

                          {/* <img style={{ opacity: 1, height: 25 }} src={require('./img/aaaa.png')}></img> */}
                          <span style={{ fontSize: 15, color: "#50B15D" }}>液位：</span>
                          <span style={{ fontSize: 18 }}>10</span>
                          <span style={{ marginLeft: '10px', fontSize: 18 }}>mm</span>
                        </div>

                      </div>
                    </div>
                    <img src={require('./img/屏幕截图 20.png')} style={{ height: "100%", width: "100%" }} />
                  </div></BorderBox12>
                <BorderBox12 className='main-container_dev1'> <div style={{ height: "30%", width: "100%", textAlign: "center" }}>
                  <div style={{ height: "50px", width: "90%", display: "block", margin: " 0 auto", textAlign: "center" }} className='titlebak'>
                    <h2 style={{ color: "#34CDE1" }}>&nbsp;&nbsp;储存罐一</h2>
                  </div>
                  <span style={{ color: "red" }}>&nbsp;&nbsp;&nbsp;&nbsp;警告:</span><span style={{ color: "red" }}>&nbsp;&nbsp;冷水罐温度过高</span>
                </div>
                  <div style={{ height: "70%", width: "100%" }}>
                    <div style={{ height: "70%", width: "100%", justifyContent: "center", display: "flex", position: "absolute", textAlign: "center", alignItems: "center" }}>
                      <div>
                        <div style={{ float: "left" }}>

                          <img style={{ opacity: 1, height: 25 }} src={require('./img/aaaa.png')}></img>
                          <span style={{ fontSize: 15, color: "#50B15D" }}>温度：</span>
                          <span style={{ fontSize: 18 }}>10</span>
                          <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                        </div>
                        <div style={{ float: "left" }}>
                          &nbsp; &nbsp; &nbsp; &nbsp;
                        </div>
                        <div style={{ float: "left" }}>

                          {/* <img style={{ opacity: 1, height: 25 }} src={require('./img/aaaa.png')}></img> */}
                          <span style={{ fontSize: 15, color: "#50B15D" }}>液位：</span>
                          <span style={{ fontSize: 18 }}>10</span>
                          <span style={{ marginLeft: '10px', fontSize: 18 }}>mm</span>
                        </div>

                      </div>
                    </div>
                    <img src={require('./img/屏幕截图 20.png')} style={{ height: "100%", width: "100%" }} />
                  </div></BorderBox12>
              </div>
              <div style={{ height: "50%" }}>
                <BorderBox12 className='main-container_dev2' style={{ width: "33.3%" }}> <div style={{ height: "30%", width: "100%", textAlign: "center" }}>
                  <div style={{ height: "50px", width: "90%", display: "block", margin: " 0 auto", textAlign: "center" }} className='titlebak'>
                    <h2 style={{ color: "#34CDE1" }}>&nbsp;&nbsp;储存罐一</h2>
                  </div>
                  <span style={{ color: "red" }}>&nbsp;&nbsp;&nbsp;&nbsp;警告:</span><span style={{ color: "red" }}>&nbsp;&nbsp;冷水罐温度过高</span>
                </div>
                  <div style={{ height: "70%", width: "100%" }}>
                    <div style={{ height: "70%", width: "100%", justifyContent: "center", display: "flex", position: "absolute", textAlign: "center", alignItems: "center" }}>
                      <div>
                        <div style={{ float: "left" }}>

                          <img style={{ opacity: 1, height: 25 }} src={require('./img/aaaa.png')}></img>
                          <span style={{ fontSize: 15, color: "#50B15D" }}>温度：</span>
                          <span style={{ fontSize: 18 }}>10</span>
                          <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                        </div>
                        <div style={{ float: "left" }}>
                          &nbsp; &nbsp; &nbsp; &nbsp;
                        </div>
                        <div style={{ float: "left" }}>

                          {/* <img style={{ opacity: 1, height: 25 }} src={require('./img/aaaa.png')}></img> */}
                          <span style={{ fontSize: 15, color: "#50B15D" }}>液位：</span>
                          <span style={{ fontSize: 18 }}>10</span>
                          <span style={{ marginLeft: '10px', fontSize: 18 }}>mm</span>
                        </div>

                      </div>
                    </div>
                    <img src={require('./img/屏幕截图 20.png')} style={{ height: "100%", width: "100%" }} />
                  </div></BorderBox12>
                <BorderBox12 className='main-container_dev2' style={{ width: "66.6%" }}>
                  <div style={{ height: "20%", width: "100%", textAlign: "center" }}>
                    <div style={{ height: "50px", width: "90%", display: "block", margin: " 0 auto", textAlign: "center" }} className='titlebak'>
                      <h2 style={{ color: "#34CDE1" }}>&nbsp;&nbsp;报警记录</h2>
                    </div>
                    {/* <span style={{ color: "red" }}>&nbsp;&nbsp;&nbsp;&nbsp;警告:</span><span style={{ color: "red" }}>&nbsp;&nbsp;冷水罐温度过高</span> */}
                  </div>
                  <div style={{ height: "80%", width: "100%", textAlign: "center" }}>
                    <div style={{ width: '95%', height: '100%', display: "block", margin: " 0 auto", }}>
                      <ScrollBoard config={{
                        header: ['报警设备', '报警信息', '报警时间'],
                        headerBGC:"#000724",
                        oddRowBGC:"#000724",
                        evenRowBGC:"#000724",
                        data: [
                          ['沁泡机', '维度过高', '2023-01-18'],
                          ['传送带', '停止运行', '2023-01-18']
                        ]
                      }} style={{ width: '100%', height: '100%' }} />
                    </div>
                  </div>
                </BorderBox12>
              </div>
            </div>
            <div className="mc-bottom2">
              <BorderBox12>
                <div style={{ height: "15%", width: "100%", textAlign: "center" }}>
                  <div style={{ height: "50px", width: "90%", display: "block", margin: " 0 auto", textAlign: "center" }} className='titlebak'>
                    <h2 style={{ color: "#34CDE1" }}>&nbsp;&nbsp;传输带</h2>
                  </div>
                  <span style={{ color: "red" }}>&nbsp;&nbsp;&nbsp;&nbsp;警告:</span><span style={{ color: "red" }}>&nbsp;&nbsp;冷水罐温度过高</span>
                </div>
                <div style={{ height: "85%", width: "100%" }}>
                  <div style={{ width: "50%", float: "left", height: "100%", }}>
                    <div style={{ height: "30%", width: "100%" }}>
                    <img style={{ width: "100%", height: "90%" }} src={require('./img/R-C.gif')}></img>
                    </div>
                    <div style={{ height: "70%", width: "100%" }}>
                      <div style={{ height: "20%" }}>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                        <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                        <span style={{ fontSize: 18 }}>10</span>
                        <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                      </div>
                      <div style={{ height: "20%" }}>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                        <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                        <span style={{ fontSize: 18 }}>10</span>
                        <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                      </div>
                      <div style={{ height: "20%" }}>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                        <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                        <span style={{ fontSize: 18 }}>10</span>
                        <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                      </div>
                      <div style={{ height: "20%" }}>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                        <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                        <span style={{ fontSize: 18 }}>10</span>
                        <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                      </div>
                      <div style={{ height: "20%" }}>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <img style={{ opacity: 1, height: 30 }} src={require('./img/aaaa.png')}></img>
                        <span style={{ fontSize: 15, color: "#50B15D" }}>冷水罐温度：</span>
                        <span style={{ fontSize: 18 }}>10</span>
                        <span style={{ marginLeft: '10px', fontSize: 18 }}>°C</span>
                      </div>
                    </div>


                  </div>
                  <div style={{ width: "50%", height: "100%", float: "left", textAlign: "center" }}>
                    <img style={{ width: "100%", height: "90%" }} src={require('./img/ssssx.png')}></img>
                    <h3 style={{ color: "green" }}>运行中</h3>
                  </div>
                </div>
              </BorderBox12>
            </div>
          </div>
        </div>
      </FullScreenContainer>
    </div>
  )
}
export default KepData;