import React from 'react';
import ReactDOM from 'react-dom';
import 'antd-mobile/dist/antd-mobile.css';
import { Button, Picker, Flex, Card, List, WingBlank, WhiteSpace, Badge, DatePicker,Grid } from 'antd-mobile';
import {Http} from '../../Utils/help';
import F2Gauge from '../../f2/gauge';
import Format from '../../Utils/NumericFormat';
import $ from 'jquery';
import './less/list.less';
// const F2 = require('../../../js/f2');
const F2 = require('@antv/f2');
const Item = List.Item;
const Brief = Item.Brief;
var tcus=[];
export default class macstateparameterlist extends React.Component {
constructor(props) {
super(props);
this.chartRender = this.chartRender.bind(this);
this.genchart = this.genchart.bind(this);
const {func,/* picklist_u, */mac,mstate,gddata_use} = this.props.location.state;
this.state={
func:func,
// picklist_u:picklist_u,
mac:mac,
mstate:mstate,
cols:1,
chart_data:[],
height:"0px",
gddata_use:gddata_use,
precon:0,
}
}
componentWillMount(){
this.dataAjax1 = Http.getJSON2("ds/data/macstate/macparameter",{"macnum":this.state.mac[0]});
}
componentDidUpdate(){
}
componentDidMount() {
let windowheight = $(window).height()
this.navbarheight = $(".am-navbar").first().height()
let height = (windowheight - this.navbarheight ) + "px"
this.setState({
height:height,
})
this.paddinghead = $("#head").height()+10+"px";
this.dataAjax1.done((result)=>{
try {
this.setState({
chart_data:result,
},()=>{
this.chartRender();
});
} catch (err) {
console.error(err.message);
console.error(err.stack)
}
})
}
componentWillUnmount(){
this.destroychart()
}
//回收
destroychart=()=>{
if (this.trendChart_lsdl) {
this.trendChart_lsdl.destroy();
this.trendChart_diam.destroy();
this.trendChart_yqdl.destroy();
this.trendChart_speed.destroy();
this.trendChart_tension.destroy();
this.trendChart_thdl.destroy();
this.trendChart_lsywd.destroy();
this.trendChart_lsyph.destroy();
}
}
onOk=(val)=>{
if (val.length==0){
return;
}
this.dataAjaxOk = Http.getJSON2("ds/data/macstate/macparameter",{"macnum":val[0]},this.onAjaxDone);
tcus=val;
}
onGridClick =(el,index)=>{
// alert(index);
this.onOk([this.state.gddata_use.fun[index].macnum]);
}
onAjaxDone=(result)=>{//提交成功
this.dataAjaxOk.done((result)=>{
try {
this.setState({
chart_data:result,
mac:tcus,
},()=>{
this.chartRender();
});
} catch (err) {
console.error(err.message);
console.error(err.stack)
}
})
}
//产生图表
chartRender=()=>{
// this.destroychart()
console.log("chartrender...begin")
// if (!this.state.chart_data.length)
// return true;
this.genchart(this.state.chart_data,'chart_lsdl','lsdl');
this.genchart(this.state.chart_data,'chart_diam','diam');
this.genchart(this.state.chart_data,'chart_yqdl','yqdl');
this.genchart(this.state.chart_data,'chart_speed','speed');
this.genchart(this.state.chart_data,'chart_tension','tension');
this.genchart(this.state.chart_data,'chart_thdl','thdl');
this.genchart(this.state.chart_data,'chart_lsywd','lsywd');
this.genchart(this.state.chart_data,'chart_lsyph','lsyph');
console.log("chartrender...end")
}
genchart=(stateData,nodeId,nodetype)=>{
var Global = F2.Global;
var data=stateData;
if (data.length>0 )
data = data.filter((element,index,array)=>{
return element.datatype==nodetype;
})
// data = data.slice(0,data.length >= 10?10:data.length)
var chart = new F2.Chart({
id: nodeId,
width: window.innerWidth-40,
height: window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.707,
pixelRatio: window.devicePixelRatio,
});
if (!data.length>0 )
return true;
chart.animate({
type: 'waveh',
});
// 配置time刻度文字样式
const label = {
fill: '#979797',
font: '12px san-serif',
offset: 6
};
chart.axis('shortname', {
label(text, index, total) {
const cfg = label;
// 第一个点左对齐，最后一个点右对齐，其余居中，只有一个点时左对齐
if (index === 0) {
cfg.textAlign = 'start';
}
if (index > 0 && index === total - 1) {
cfg.textAlign = 'end';
}
return cfg;
}
});
// 配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
chart.axis('val', {
label: (text, index, total) => {
const cfg = {
fill: '#979797',
font: '12px san-serif',
offset: 6
};
cfg.text = Format.FormatUtil(text,3); // cfg.text 支持文本格式化处理
return cfg;
},
});
chart.source(data, {
shortname: {
tickCount:4,
range: [0,1 ]
},
val: {
tickCount: 8,
min: 0
}
});
chart.line()
.position('shortname*val')
.color('ctype', [ '#1890FF', '#FACC14', '#F04864'])
.style({
lineWidth: 2,
lineJoin: 'round',
lineCap: 'round'
})
.shape('ctype', function(city) {
if (city === 'actual') {
return 'smooth';
}
if (city === 'up' ||city === 'down') {
return 'dash';
}
});
// chart.point()
// .position('shortname*val')
// .color('ctype', [ '#1890FF', '#FACC14', '#F04864'])
// // .style({
// // lineWidth: 1,
// // })
// .shape('ctype', function(city) {
// if (city === 'actual') {
// return 'smooth';
// }
// if (city === 'up' ||city === 'down') {
// return 'dash';
// }
// });
chart.render();
if (nodetype=="lsdl")
this.trendChart_lsdl=chart;
else if (nodetype=="diam")
this.trendChart_diam=chart;
else if (nodetype=="yqdl")
this.trendChart_yqdl=chart;
else if (nodetype=="speed")
this.trendChart_speed=chart;
else if (nodetype=="tension")
this.trendChart_tension=chart;
else if (nodetype=="thdl")
this.trendChart_thdl=chart;
else if (nodetype=="lsywd")
this.trendChart_lsywd=chart;
else if (nodetype=="lsyph")
this.trendChart_lsyph=chart;
}
render() {
return (
{/* 请选取机台
}
extra={
this.onOk(v)}
onDismiss={() => this.onOk("")}
title="机台"
extra={选取
}
>
}
/> */}
{this.state.gddata_use.data && this.state.gddata_use.data.length>0?
(
)}
onClick={this.onGridClick}
/>
:"无机台"}
{/*
请选取机台
this.onOk(v)}
onDismiss={() => this.onOk("")}
title="机台"
extra={选取
}
>
*/}
)
}
}