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.
643 lines
23 KiB
643 lines
23 KiB
|
|
import { Layout, Image, Col, Row, Carousel, Spin } 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/SvgDrawPlugin';
|
|
const { Header, Footer, Content } = Layout;
|
|
TweenOne.plugins.push(PathPlugin);
|
|
|
|
const headerStyle = {
|
|
textAlign: 'center',
|
|
color: '#fff',
|
|
minHeight: "5vh",
|
|
paddingInline: 50,
|
|
lineHeight: '64px',
|
|
backgroundColor: 'rgb(49, 70, 89)',
|
|
};
|
|
const contentStyle = {
|
|
textAlign: 'center',
|
|
minHeight: "90vh",
|
|
backgroundColor: 'white'
|
|
};
|
|
const footerStyle = {
|
|
textAlign: 'center',
|
|
color: '#fff',
|
|
backgroundColor: 'rgb(49, 70, 89)',
|
|
};
|
|
const empStyle = {
|
|
lineHeight: '5vh',
|
|
color: 'black',
|
|
marginTop: "2px",
|
|
fontFamily: "Yahei",
|
|
textAlign: 'center',
|
|
// fontWeight: 'bold'
|
|
}
|
|
|
|
|
|
class HostBoard extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
//四個看闆資料
|
|
this.state = {
|
|
current_item: {
|
|
employee_no: '',
|
|
name: "",
|
|
mfg_no: "",
|
|
svgdraw: 0,
|
|
lineStatus: false,
|
|
tractor_lt: "曳引輪法嚮跳動≤0.10mm ",
|
|
tractor_rt: "製動器安裝氣間隙與微動開關",
|
|
tractor_lb: "轉子徑嚮跳動≤0.05mm",
|
|
tractor_rb1: "製動力與空載性能轉矩、電",
|
|
tractor_rb2: "壓、電流、異音",
|
|
encoderlt: "表面塗裝無繡、油漆無脫落",
|
|
encoderrb: "編碼器安裝"
|
|
|
|
},
|
|
current_item_list: [],
|
|
paused: true,
|
|
reverse: true,
|
|
moment: 0,
|
|
lineStatus: true,
|
|
index: 0,
|
|
seq: 1,
|
|
start: 0, //從數據庫第0條開始讀
|
|
total_record: 0
|
|
};
|
|
|
|
}
|
|
componentDidMount() {
|
|
const id = this.props.match;
|
|
this.setState({ seq: id.params.seq });
|
|
this.fetchKabanData();
|
|
console.log(this.state);
|
|
|
|
}
|
|
|
|
interval = () => {
|
|
const { seq } = this.state;
|
|
// setInterval(() => this.fetchKabanData(), 20000);
|
|
};
|
|
afterChange = () => {
|
|
const { current_item_list, index } = this.state;
|
|
console.info("current_item_list.length");
|
|
console.info(current_item_list.length);
|
|
console.info(current_item_list);
|
|
console.info(index);
|
|
var _item = (current_item_list.length) == index
|
|
? current_item_list[0]
|
|
: current_item_list[index];
|
|
|
|
|
|
this.setState({
|
|
paused: false,
|
|
reverse: false,
|
|
moment: 0,
|
|
lineStatus: false,
|
|
current_item: _item,
|
|
svgdraw: 0,
|
|
index: (current_item_list.length == index) ? 0 : index + 1
|
|
}, () => {
|
|
this.setState({
|
|
moment: null,
|
|
});
|
|
});
|
|
|
|
}
|
|
//每次取四條記錄,
|
|
fetchKabanData = async () => {
|
|
|
|
const { seq, start } = this.state;
|
|
let data = await axios.get(`https://www.masada.com.tw/kanban_api/index.php?kind=host&seq=${seq}&start=${start}`)
|
|
.then(function (response) {
|
|
|
|
|
|
return {
|
|
start: response.data[0],
|
|
paused: false,
|
|
index: 0,
|
|
current_item_list: response.data[1]
|
|
}
|
|
|
|
|
|
})
|
|
.catch(function (error) {
|
|
console.log(error);
|
|
})
|
|
.finally(function () {
|
|
|
|
|
|
});
|
|
|
|
this.setState(data, () => {
|
|
this.forceUpdate();
|
|
});
|
|
|
|
}
|
|
getTractorLt = (current_item) => {
|
|
|
|
return <div className="左侧左上" style={{
|
|
width: "20vw", top: "11vh", float: "left"
|
|
, position: "absolute"
|
|
}}
|
|
>
|
|
<svg
|
|
style={{ margin: "0vh auto", }}
|
|
viewBox="0 -10 500 510" xmlns="http://www.w3.org/2000/svg">
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
|
|
style={{
|
|
"stroke": "rgb(118, 224, 118)", "paintOrder":
|
|
"stroke", "fill": "rgb(255, 255, 255)",
|
|
"strokeWidth": "5px"
|
|
}}
|
|
component="path"
|
|
d="M 9.404 3.208 H 489.404 V 83.208 H 9.404 V 0 Z"
|
|
/>
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{
|
|
type: "from", SVGDraw: 0, duration: 500,
|
|
onComplete: () => this.setState({ lineStatus: true })
|
|
}}
|
|
|
|
style={{
|
|
"strokeWidth": "5px", "paintOrder": "stroke",
|
|
"stroke": "rgb(118, 224, 118)", "fill": "rgb(118, 224, 118)"
|
|
}}
|
|
component="path"
|
|
transform="matrix(0.975636, -0.219396, 0.219396, 0.975636, -29.715011, 76.874717)"
|
|
d="M 263.419 65.87 L 399.114 278.585"
|
|
/>
|
|
{this.state.lineStatus ?
|
|
<g>
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
|
|
style={{ "strokeWidth": "1px", "paintOrder": "stroke", "stroke": "rgb(118, 224, 118)", "fill": "rgb(118, 224, 118)" }}
|
|
component="path"
|
|
transform="matrix(-0.729197, 0.684303, -0.684303, -0.729197, 962.727033, 190.895506)"
|
|
d="M 443.592 249.486 L 468.661 322.394 L 418.522 322.394 L 443.592 249.486 Z" />
|
|
<text style={{ fill: "rgb(51, 51, 51)", fontSize: "35px", fontFamily: " Arial, sans-serif;border " }}
|
|
x="60" y="40"><tspan>{current_item.tractor_lt}</tspan><tspan style={{ fill: "rgb(118, 224, 118)" }} x="220" y="80">{"OK!"}</tspan></text>
|
|
|
|
|
|
</g>
|
|
:
|
|
""
|
|
}
|
|
</svg>
|
|
</div>
|
|
}
|
|
getTractorRt = (current_item) => {
|
|
return <div className="左侧右上" style={{
|
|
width: "20vw", top: "11vh", float: "left", left: "40vw"
|
|
, position: "absolute"
|
|
}}
|
|
>
|
|
<svg
|
|
style={{ margin: "0vh auto", }}
|
|
viewBox="0 -10 500 510" xmlns="http://www.w3.org/2000/svg">
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
|
|
style={{
|
|
"stroke": "rgb(118, 224, 118)", "paintOrder":
|
|
"stroke", "fill": "rgb(255, 255, 255)",
|
|
"strokeWidth": "5px"
|
|
}}
|
|
component="path"
|
|
d="M 9.404 3.208 H 489.404 V 83.208 H 9.404 V 0 Z"
|
|
/>
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{
|
|
type: "from", SVGDraw: 0, duration: 500,
|
|
onComplete: () => this.setState({ lineStatus: true })
|
|
}}
|
|
style={{
|
|
"strokeWidth": "5px", "paintOrder": "stroke",
|
|
"stroke": "rgb(118, 224, 118)", "fill": "rgb(118, 224, 118)"
|
|
}}
|
|
component="path"
|
|
d="M 261.539 88.09 L 203.069 423.013"
|
|
/>
|
|
{this.state.lineStatus ?
|
|
<g>
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
|
|
style={{
|
|
"strokeWidth": "1px", "paintOrder": "stroke", "stroke": "rgb(118, 224, 118)",
|
|
"fill": "rgb(118, 224, 118)"
|
|
}}
|
|
component="path"
|
|
transform="matrix(-0.97607, -0.217456, 0.217456, -0.97607, 286.464207, 949.457885)"
|
|
d="M 195.474 422.513 L 220.543 495.421 L 170.404 495.421 L 195.474 422.513 Z" />
|
|
<text style={{ fill: "rgb(51, 51, 51)", fontSize: "35px", fontFamily: " Arial, sans-serif;border " }}
|
|
x="20" y="40"><tspan>{current_item.tractor_rt}</tspan><tspan x="220" y="80" style={{ fill: "rgb(118, 224, 118)" }} >{"OK!"}</tspan></text>
|
|
|
|
</g>
|
|
:
|
|
""
|
|
}
|
|
</svg>
|
|
</div>
|
|
}
|
|
getTractorLb = (current_item) => {
|
|
return <div className="左側左下" style={{
|
|
width: "20vw", top: "54vh", float: "left"
|
|
, position: "absolute"
|
|
}}
|
|
>
|
|
<svg
|
|
style={{ margin: "0vh auto", }}
|
|
viewBox="0 -10 500 510" xmlns="http://www.w3.org/2000/svg">
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
|
|
style={{
|
|
"stroke": "rgb(118, 224, 118)", "paintOrder":
|
|
"stroke", "fill": "rgb(255, 255, 255)",
|
|
"strokeWidth": "5px"
|
|
}}
|
|
component="path"
|
|
d="M 9.404 415.208 L 489.404 415.208 L 489.404 495.208 L 9.404 495.208 L 9.404 412 L 9.404 415.208 Z"
|
|
/>
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{
|
|
type: "from", SVGDraw: 0, duration: 500,
|
|
onComplete: () => this.setState({ lineStatus: true })
|
|
}}
|
|
transform="matrix(0.999167, 0.040813, -0.040813, 0.999167, 11.586274, -11.494313)"
|
|
style={{
|
|
"strokeWidth": "5px", "paintOrder": "stroke",
|
|
"stroke": "rgb(118, 224, 118)", "fill": "rgb(118, 224, 118)"
|
|
}}
|
|
component="path"
|
|
d="M 241.374 414.921 L 333.245 141.122"
|
|
/>
|
|
{this.state.lineStatus ?
|
|
<g transform='matrix(0.98841, 0.010532, -0.007776, 0.999969, 6.747789, -25.742926)'>
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
|
|
style={{ "strokeWidth": "1px", "paintOrder": "stroke", "stroke": "rgb(118, 224, 118)", "fill": "rgb(118, 224, 118)" }}
|
|
component="path"
|
|
transform="matrix(0.924216, 0.374845, -0.383643, 0.9264, 76.571882, -121.626278)"
|
|
d="M 349.375 94.22 L 375.315 166.654 L 324.849 166.654 L 349.375 94.22 Z" />
|
|
<text style={{ fill: "rgb(51, 51, 51)", fontSize: "35px", fontFamily: " Arial, sans-serif;border " }}
|
|
x="85" y="476"><tspan>{current_item.tractor_lb}</tspan><tspan x="220" y="510" style={{ fill: "rgb(118, 224, 118)" }} > {"OK!"}</tspan></text>
|
|
|
|
</g>
|
|
:
|
|
""
|
|
}
|
|
</svg>
|
|
</div>
|
|
}
|
|
getTractorRb = (current_item) => {
|
|
return <div className="左側右下" style={{
|
|
width: "20vw", left: "42vw", top: "54vh", float: "left"
|
|
, position: "absolute"
|
|
}}
|
|
>
|
|
<svg
|
|
style={{ margin: "0vh auto", }}
|
|
viewBox="0 -10 500 510" xmlns="http://www.w3.org/2000/svg">
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
|
|
style={{
|
|
"stroke": "rgb(118, 224, 118)", "paintOrder":
|
|
"stroke", "fill": "rgb(255, 255, 255)",
|
|
"strokeWidth": "5px"
|
|
}}
|
|
component="path"
|
|
d="M 9.404 415.208 L 489.404 415.208 L 489.404 495.208 L 9.404 495.208 L 9.404 412 L 9.404 415.208 Z"
|
|
/>
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{
|
|
type: "from", SVGDraw: 0, duration: 500,
|
|
onComplete: () => this.setState({ lineStatus: true })
|
|
}}
|
|
|
|
style={{
|
|
"strokeWidth": "5px", "paintOrder": "stroke",
|
|
"stroke": "rgb(118, 224, 118)", "fill": "rgb(118, 224, 118)"
|
|
}}
|
|
component="path"
|
|
d="M 259.279 414.157 L 65.993 104.287"
|
|
/>
|
|
{this.state.lineStatus ?
|
|
<g transform="matrix(0.98841, 0.010532, -0.007776, 0.999969, 6.747789, -25.742926)">
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
transform="matrix(0.864529, -0.499253, 0.510971, 0.861621, -44.396117, 34.621662)"
|
|
style={{ "strokeWidth": "1px", "paintOrder": "stroke", "stroke": "rgb(118, 224, 118)", "fill": "rgb(118, 224, 118)" }}
|
|
component="path"
|
|
d="M 41.459 61.848 L 67.399 134.282 L 16.933 134.282 L 41.459 61.848 Z" />
|
|
<text style={{ fill: "rgb(51, 51, 51)", fontSize: "35px", fontFamily: " Arial, sans-serif;border " }}
|
|
x="35" y="476"><tspan>{current_item.tractor_rb1}</tspan><tspan x="10" y="510">
|
|
{current_item.tractor_rb2}</tspan>
|
|
<tspan x="300" y="510" style={{ fill: "rgb(118, 224, 118)" }}>
|
|
{"OK!"}</tspan>
|
|
</text>
|
|
|
|
</g>
|
|
:
|
|
""
|
|
}
|
|
</svg>
|
|
</div>
|
|
}
|
|
|
|
getEncoderRt = (current_item) => {
|
|
return <div className="左侧右上" style={{
|
|
width: "20vw", top: "8vh", float: "left", left: "80vw"
|
|
, position: "absolute"
|
|
}}
|
|
>
|
|
<svg
|
|
style={{ margin: "0vh auto", }}
|
|
viewBox="0 -10 500 510" xmlns="http://www.w3.org/2000/svg">
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
|
|
style={{
|
|
"stroke": "rgb(118, 224, 118)", "paintOrder":
|
|
"stroke", "fill": "rgb(255, 255, 255)",
|
|
"strokeWidth": "5px"
|
|
}}
|
|
component="path"
|
|
d="M 9.404 3.208 H 489.404 V 83.208 H 9.404 V 0 Z"
|
|
/>
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{
|
|
type: "from", SVGDraw: 0, duration: 500,
|
|
onComplete: () => this.setState({ lineStatus: true })
|
|
}}
|
|
transform="matrix(-0.975636, -0.219396, 0.219396, -0.975636, 251.970018, 359.00649)"
|
|
style={{
|
|
"strokeWidth": "5px", "paintOrder": "stroke",
|
|
"stroke": "rgb(118, 224, 118)", "fill": "rgb(118, 224, 118)"
|
|
}}
|
|
component="path"
|
|
d="M 85.884 262.059 L 205.954 68.966"
|
|
/>
|
|
{this.state.lineStatus ?
|
|
<g>
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
|
|
style={{
|
|
"strokeWidth": "1px", "paintOrder": "stroencodeke", "stroke": "rgb(118, 224, 118)",
|
|
"fill": "rgb(118, 224, 118)"
|
|
}}
|
|
component="path"
|
|
transform="matrix(-0.710533, -0.703664, 0.703664, -0.710533, -116.408217, 492.157012)"
|
|
d="M 43.026 233.568 L 68.095 306.476 L 17.956 306.476 L 43.026 233.568 Z" />
|
|
<text style={{ fill: "rgb(51, 51, 51)", fontSize: "35px", fontFamily: " Arial, sans-serif;border " }}
|
|
x="40.866" y="40"><tspan>{current_item.encoderlt}</tspan>
|
|
<tspan x="240" y="80" style={{ fill: "rgb(118, 224, 118)" }}>
|
|
{"OK!"}</tspan></text>
|
|
</g>
|
|
:
|
|
""
|
|
}
|
|
</svg>
|
|
</div>
|
|
}
|
|
getEncoderRb = (current_item) => {
|
|
return <div className="左側左下" style={{
|
|
width: "20vw", left: "80vw", top: "54vh", float: "left"
|
|
, position: "absolute"
|
|
}}
|
|
>
|
|
<svg
|
|
style={{ margin: "0vh auto", }}
|
|
viewBox="0 -10 500 510" xmlns="http://www.w3.org/2000/svg">
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
|
|
style={{
|
|
"stroke": "rgb(118, 224, 118)", "paintOrder":
|
|
"stroke", "fill": "rgb(255, 255, 255)",
|
|
"strokeWidth": "5px"
|
|
}}
|
|
component="path"
|
|
d="M 9.404 415.208 L 489.404 415.208 L 489.404 495.208 L 9.404 495.208 L 9.404 412 L 9.404 415.208 Z"
|
|
/>
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{
|
|
type: "from", SVGDraw: 0, duration: 500,
|
|
onComplete: () => this.setState({ lineStatus: true })
|
|
}}
|
|
|
|
style={{
|
|
"strokeWidth": "5px", "paintOrder": "stroke",
|
|
"stroke": "rgb(118, 224, 118)", "fill": "rgb(118, 224, 118)"
|
|
}}
|
|
component="path"
|
|
d="M 259.279 414.157 L 65.993 104.287"
|
|
/>
|
|
{this.state.lineStatus ?
|
|
<g transform="matrix(0.98841, 0.010532, -0.007776, 0.999969, 6.747789, -25.742926)">
|
|
<TweenOne
|
|
paused={this.state.paused}
|
|
reverse={this.state.reverse}
|
|
moment={this.state.moment}
|
|
animation={{ type: "from", SVGDraw: 0, duration: 500 }}
|
|
transform="matrix(0.864529, -0.499253, 0.510971, 0.861621, -44.396117, 34.621662)"
|
|
style={{ "strokeWidth": "1px", "paintOrder": "stroke", "stroke": "rgb(118, 224, 118)", "fill": "rgb(118, 224, 118)" }}
|
|
component="path"
|
|
d="M 41.459 61.848 L 67.399 134.282 L 16.933 134.282 L 41.459 61.848 Z" />
|
|
<text style={{ fill: "rgb(51, 51, 51)", fontSize: "35px", fontFamily: " Arial, sans-serif;border " }}
|
|
x="135" y="476"><tspan> {current_item.encoderrb}</tspan>
|
|
<tspan x="200" y="510" style={{ fill: "rgb(118, 224, 118)" }}>
|
|
{"OK!"}</tspan>
|
|
</text> </g>
|
|
:
|
|
""
|
|
}
|
|
</svg>
|
|
</div>
|
|
}
|
|
render() {
|
|
let { current_item, current_item_list, reverse, moment } = { ...this.state };
|
|
let items = [current_item_list];
|
|
|
|
let prop_display = current_item_list.length == 0 ? "none" : "block";
|
|
console.info(current_item_list.length);
|
|
|
|
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 >
|
|
{/*<Col span={18}
|
|
一行Row 四col
|
|
每個col 三個row
|
|
*/}
|
|
<Content style={contentStyle}>
|
|
<Row style={{ height: "95vh", width: "100vw" }} gutter={[2, 2]}>
|
|
|
|
{
|
|
|
|
this.state.current_item_list.map(function (element, index) {
|
|
return <Col key={index} span={24} style={{ display: this.state.current_item.name == '' ? "none" : "block" }} className={"col-empl"}>
|
|
<Row className={"員工信息"} style={{ backgroundColor: "#61dafb" }}>
|
|
<Col style={{ height: "5vh", fontSize: "1.5vw" }} span={24} >
|
|
<span style={{ textAlign: "top" }}>姓名:{current_item.name || ""} </span>
|
|
<span style={{ textAlign: "top" }}>員工編號:{current_item.employee_no || ""} </span>
|
|
<span style={{ textAlign: "top" }}>電梯ID:{current_item.mfg_no || ""} </span>
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Carousel afterChange={this.afterChange} dots={false}
|
|
autoplay autoplaySpeed={10000}
|
|
style={{ width: "100vw", height: "100vh", overflow: "visible" }}>
|
|
|
|
<div style={{ display: prop_display, width: "100vw", height: "100vh" }}>
|
|
<div style={{
|
|
left: "0vw", position: "relative",
|
|
top: "-5vh",
|
|
float: "left", height: "100vh", width: "100vw", overflow: "visible",
|
|
}}>
|
|
<Image
|
|
width={"45vw"}
|
|
style={{
|
|
marginLeft: "2vw"
|
|
}}
|
|
preview={false} src="../kb/tractor1.svg"
|
|
/>
|
|
{this.getTractorLt(current_item)}
|
|
{this.getTractorLb(current_item)}
|
|
{this.getTractorRt(current_item)}
|
|
{this.getTractorRb(current_item)}
|
|
<Image
|
|
style={{ marginLeft: "15vh", marginTop: "22vh" }}
|
|
width="40vw"
|
|
preview={false} src="../kb/encoder.png"
|
|
/>
|
|
{this.getEncoderRt(current_item)}
|
|
|
|
{this.getEncoderRb(current_item)}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ width: "100vw", height: "100vh" }}>
|
|
<div style={{
|
|
left: "0vw", position: "relative",
|
|
top: "-5vh",
|
|
float: "left", height: "100vh", width: "100vw", overflow: "visible",
|
|
}}>
|
|
<Image
|
|
width={"45vw"}
|
|
style={{
|
|
marginLeft: "2vw"
|
|
}}
|
|
preview={false} src="../kb/tractor1.svg"
|
|
/>
|
|
{this.getTractorLt(current_item)}
|
|
{this.getTractorLb(current_item)}
|
|
{this.getTractorRt(current_item)}
|
|
{this.getTractorRb(current_item)}
|
|
<Image
|
|
style={{ marginLeft: "15vh", marginTop: "22vh" }}
|
|
width="40vw"
|
|
preview={false} src="../kb/encoder.png"
|
|
/>
|
|
{this.getEncoderRt(current_item)}
|
|
|
|
{this.getEncoderRb(current_item)}
|
|
|
|
</div>
|
|
</div>
|
|
</Carousel>
|
|
</Row>
|
|
</Col>
|
|
}, this)
|
|
|
|
}
|
|
{this.state.current_item.name == '' ? <Spin style={{ margin: " 45vh auto", transform: "scale(3)" }} size='large' tip="Loading..." /> : ""}
|
|
</Row>
|
|
|
|
</Content>
|
|
</Layout>
|
|
<Footer style={footerStyle}>Footer</Footer>
|
|
</Layout>
|
|
|
|
</div >
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(HostBoard);
|
|
|