You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
396 lines
18 KiB
396 lines
18 KiB
import { Layout, Image, Col, Row } from 'antd';
|
|
|
|
import 'antd/dist/reset.css';
|
|
import './App.css';
|
|
import axios from 'axios';
|
|
import { Component } from 'react';
|
|
import { withRouter } from 'react-router-dom';
|
|
import TweenOne from 'rc-tween-one';
|
|
import PathPlugin from 'rc-tween-one/lib/plugin/PathMotionPlugin';
|
|
const { Header, Footer, Content } = Layout;
|
|
TweenOne.plugins.push(PathPlugin);
|
|
const headerStyle = {
|
|
textAlign: 'center',
|
|
color: '#fff',
|
|
height: "5vh",
|
|
paddingInline: 50,
|
|
|
|
backgroundColor: 'rgb(49, 70, 89)',
|
|
};
|
|
const contentStyle = {
|
|
textAlign: 'center',
|
|
minHeight: "90vh",
|
|
backgroundColor: 'black',
|
|
|
|
};
|
|
const footerStyle = {
|
|
textAlign: 'center',
|
|
color: '#fff',
|
|
backgroundColor: 'rgb(49, 70, 89)',
|
|
fontSize: '2vw'
|
|
};
|
|
const empStyle = {
|
|
lineHeight: '5vh',
|
|
color: 'black',
|
|
marginTop: "2px",
|
|
fontFamily: "Yahei",
|
|
textAlign: 'center',
|
|
fontSize: '2vw'
|
|
}
|
|
const item = {
|
|
employee_no: "M00001",
|
|
name: "測試人員一",
|
|
mfg_no: "電梯ID",
|
|
fire: { colname: "火災", icon: "#", desc: "動作後取消呼梯指令,返基站開門停機" },
|
|
screen: { colname: "光幕", icon: "#", desc: "光束被遮斷時,重新開門" },
|
|
special_use: { colname: "專用", icon: "#", desc: "VIP模式,隻響應轎內指令" },
|
|
open_lengthen: { colname: "開延長", icon: "#", desc: "延長電梯的開門保持時間" },
|
|
fully_loaded: { colname: "滿載行駛", icon: "#", desc: "滿載時沿途層站不停靠" },
|
|
returning: { colname: "再平層", icon: "#", desc: "載重變化時,自動識別並重新拉平層" },
|
|
customer: "客戶名稱",
|
|
spec: "規格",
|
|
type: "機種",
|
|
running: "運轉方式",
|
|
panel_battery: 'PANEL 動力電源',
|
|
panel_no: "PANEL編碼",
|
|
motor: "馬達規格",
|
|
door: "門機型號",
|
|
hoisting_machine: "曳引機",
|
|
electrocircuit: "電路型號",
|
|
opb: "OPD",
|
|
ind: "IND"
|
|
};
|
|
|
|
|
|
|
|
|
|
class Board extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
//四個看闆資料
|
|
this.state = {
|
|
win1: item,
|
|
win2: item,
|
|
win3: item,
|
|
win4: item,
|
|
moment: null,
|
|
paused: false,
|
|
reverse: false,
|
|
seq: 1,
|
|
start: 0, //從數據庫第0條開始讀
|
|
total_record: 0
|
|
};
|
|
|
|
}
|
|
componentDidMount() {
|
|
const id = this.props.match;
|
|
this.setState({ seq: id.params.seq });
|
|
this.interval();
|
|
|
|
|
|
}
|
|
|
|
interval = () => {
|
|
|
|
setInterval(() => this.fetchKabanData(), 20000);
|
|
};
|
|
//每次取四條記錄,
|
|
fetchKabanData = async () => {
|
|
const { seq, start } = this.state;
|
|
let data = await axios.get(`https://www.masada.com.tw/kanban_api/index.php?kind=cc&seq=${seq}&start=${start}`)
|
|
.then(function (response) {
|
|
return {
|
|
start: response.data[0],
|
|
win1: response.data[1],
|
|
win2: response.data[2],
|
|
win3: response.data[3],
|
|
win4: response.data[4],
|
|
paused: false,
|
|
reverse: false,
|
|
moment: 0,
|
|
}
|
|
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
})
|
|
.finally(function () {
|
|
// always executed
|
|
});
|
|
this.setState(data, () => {
|
|
this.setState({
|
|
moment: null,
|
|
});
|
|
});
|
|
|
|
}
|
|
|
|
render() {
|
|
let { win1, win2, paused, reverse, moment } = { ...this.state };
|
|
let items = [win1, win2];
|
|
return (
|
|
<div>
|
|
|
|
<Layout>
|
|
<Header style={headerStyle}>
|
|
<Row>
|
|
<Col span={1}><Image
|
|
width={"8vw"} src="../kb/masada.svg"
|
|
preview={false}
|
|
/></Col>
|
|
<Col span={7} offset={7} style={{ fontSize: "1.5vw", textAlign: "center" }} ><span>控製櫃看板</span>
|
|
</Col>
|
|
<Col span={1} offset={5}>
|
|
</Col>
|
|
</Row>
|
|
</Header>
|
|
|
|
<Layout >
|
|
<Content style={contentStyle}>
|
|
<Row style={{ height: "95vh", width: "100vw" }} gutter={[2, 2]}>
|
|
{
|
|
items.map(function (element, index) {
|
|
return <Col key={index} span={12} style={empStyle} className={"col-empl"}>
|
|
<Row className={"員工信息"} style={{ backgroundColor: "#61dafb" }}>
|
|
<Col style={{ height: "5vh", fontSize: '2vw' }} span={24} >
|
|
<span style={{ textAlign: "top" }}>姓名:{element.name || ""} </span>
|
|
<span style={{ textAlign: "top" }}>員工編號:{element.employee_no || ""} </span>
|
|
<span style={{ textAlign: "top" }}>電梯ID:{element.mfg_no || ""} </span>
|
|
</Col>
|
|
</Row>
|
|
<Row className={'測試信息錶 '} style={{ width: "100%", }}>
|
|
<Col
|
|
style={{
|
|
height: "5vh",
|
|
backgroundColor: 'gray',
|
|
width: "100%",
|
|
color: "white",
|
|
fontSize: '2vw',
|
|
backdropFilter: " blur('3px')"
|
|
}}>測試信息錶
|
|
</Col>
|
|
</Row>
|
|
|
|
<Row gutter={[6, 2]} className={`電梯ID信息 test-up test-up-win${index}`} style={{ width: "100%" }}>
|
|
<Col
|
|
style={{ height: "45vh", fontSize: "1vw" }}
|
|
span={24} >
|
|
<Row style={{ height: '4vw' }}>
|
|
<Col offset={1} className={"test-up-title"} span={4}>火 災</Col>
|
|
<Col span={3} >
|
|
<Image preview={false} style={{ margin: "0 auto" }}
|
|
width={"2vw"} src="../kb/fire.svg"
|
|
/></Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}>{element.fire.desc || ""}</Col>
|
|
<Col span={2} >
|
|
<svg width="35" height="26" version="1.2"
|
|
style={{ display: 'inline', transform: "scale(2.5)", margin: "0 auto" }}
|
|
>
|
|
<TweenOne
|
|
animation={{ type: "from", SVGDraw: 0, duration: 1000 }}
|
|
paused={paused}
|
|
moment={moment}
|
|
reverse={reverse}
|
|
style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
|
|
component="path"
|
|
d="M2 18 ,L8 25 ,L20 10"
|
|
/>
|
|
</svg>
|
|
|
|
</Col>
|
|
</Row>
|
|
|
|
<Row style={{ height: '4vw' }} >
|
|
<Col offset={1} className={"test-up-title"} span={4}>光 幕</Col>
|
|
<Col span={3}>
|
|
<Image preview={false}
|
|
width={"2vw"} src="../kb/screen.svg"
|
|
/></Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}>{element.screen.desc || " screen"}
|
|
</Col>
|
|
<Col span={2} >
|
|
<svg width="35" height="26" version="1.2"
|
|
style={{ display: 'inline', transform: "scale(2.5)" }}
|
|
>
|
|
<TweenOne
|
|
animation={{ type: "from", SVGDraw: 0, duration: 1000, delay: 1000 }}
|
|
style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
|
|
paused={paused}
|
|
moment={moment}
|
|
reverse={reverse}
|
|
component="path"
|
|
d="M2 18 ,L8 25 ,L20 10"
|
|
/>
|
|
</svg>
|
|
|
|
</Col>
|
|
</Row>
|
|
<Row style={{ height: '4vw' }} >
|
|
<Col offset={1} className={"test-up-title"} span={4}>專用</Col>
|
|
<Col span={3}> <Image preview={false}
|
|
width={"2vw"} src="../kb/special_use.svg"
|
|
/></Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}>{element.special_use.desc || ""}</Col>
|
|
<Col span={2} >
|
|
<svg width="35" height="26" version="1.2"
|
|
style={{ display: 'inline', transform: "scale(2.5)" }}
|
|
>
|
|
<TweenOne
|
|
animation={{ type: "from", SVGDraw: 0, duration: 1000, delay: 2000 }}
|
|
style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
|
|
paused={paused}
|
|
moment={moment}
|
|
reverse={reverse}
|
|
component="path"
|
|
d="M2 18 ,L8 25 ,L20 10"
|
|
/>
|
|
</svg>
|
|
</Col>
|
|
</Row>
|
|
<Row style={{ height: '4vw' }} >
|
|
<Col offset={1} className={"test-up-title"} span={4}>開延長</Col>
|
|
<Col span={3}> <Image preview={false}
|
|
width={"2vw"} src="../kb/open_lengthen.svg"
|
|
/></Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }} >{element.open_lengthen.desc || ""}</Col>
|
|
<Col span={2} >
|
|
<svg width="35" height="26" version="1.2"
|
|
style={{ display: 'inline', transform: "scale(2.5)" }}
|
|
>
|
|
<TweenOne
|
|
animation={{ type: "from", SVGDraw: 0, duration: 1000, delay: 3000 }}
|
|
style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
|
|
paused={paused}
|
|
moment={moment}
|
|
reverse={reverse}
|
|
component="path"
|
|
d="M2 18 ,L8 25 ,L20 10"
|
|
/>
|
|
</svg>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
|
<Row style={{ height: '4vw' }} >
|
|
<Col offset={1} className={"test-up-title"} span={4}>滿 載</Col>
|
|
<Col span={3}> <Image preview={false}
|
|
width={"2vw"} src="../kb/fully_loaded.svg"
|
|
/></Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}>{element.fully_loaded.desc || ""}</Col>
|
|
<Col span={2} >
|
|
<svg width="35" height="26" version="1.2"
|
|
style={{ display: 'inline', transform: "scale(2.5)" }}
|
|
>
|
|
<TweenOne
|
|
animation={{ type: "from", SVGDraw: 0, duration: 1000, delay: 4000 }}
|
|
style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
|
|
paused={paused}
|
|
moment={moment}
|
|
reverse={reverse}
|
|
component="path"
|
|
d="M2 18 ,L8 25 ,L20 10"
|
|
/>
|
|
</svg>
|
|
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"test-up-title"} span={4}>再平層</Col>
|
|
<Col span={3}>
|
|
<Image preview={false} style={{ margin: "0 auto" }}
|
|
width={"2vw"} src="../kb/returning.svg"
|
|
/>
|
|
</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw", textAlign: "left" }}>{element.returning.desc || ""}</Col>
|
|
<Col span={2} >
|
|
<svg width="35" height="26" version="1.2"
|
|
style={{ display: 'inline', transform: "scale(2.5)" }}
|
|
>
|
|
<TweenOne
|
|
animation={{ type: "from", SVGDraw: 0, duration: 1000, delay: 4500 }}
|
|
style={{ fill: 'none', strokeWidth: 3, stroke: 'white' }}
|
|
paused={paused}
|
|
moment={moment}
|
|
reverse={reverse}
|
|
component="path"
|
|
d="M2 18 ,L8 25 ,L20 10"
|
|
/>
|
|
</svg>
|
|
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Row className={`電梯ID信息 mfg-down mfg-down-win${index}`}
|
|
style={{ marginTop: "1vh", width: "100%" }} >
|
|
<Col style={{ height: "40vh", lineHeight: "3vh" }} span={24} >
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>電梯ID：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.mfg_no || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>客戶名稱：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.customer || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>規格：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.spec || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>機種：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.type || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>運轉方式：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.running || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>PANNEL動力電源：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.panel_battery || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>PANNEL編碼：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.panel_no || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>馬達規格：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.motor || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>門機型號：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}> {element.door || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>曳引機型號：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.hoisting_machine || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>安全電路型號：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.electrocircuit || ""}</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>主OPB型式：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.opb || ""}</Col></Row>
|
|
<Row>
|
|
<Col offset={1} className={"mfg-down-title"} span={7} style={{ fontSize: "1.5vw" }}>IND型式：</Col>
|
|
<Col span={14} style={{ fontSize: "1.5vw" }}>{element.ind || ""}</Col>
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
})
|
|
|
|
}
|
|
</Row>
|
|
</Content>
|
|
</Layout>
|
|
<Footer style={footerStyle}>Footer</Footer>
|
|
</Layout>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(Board);
|
|
|