generator-bingo-dig-h5
Version:
Bingo-dig-h5 generator by BINGO.DIG
333 lines (318 loc) • 12.2 kB
JSX
var React = require('react');
var DigH5 = require("../../../libs/dig-h5/DigH5.jsx");
var Chart = DigH5.Charts.Chart;
var Table = DigH5.Table.Table;
var Td = DigH5.Table.Td;
var Tr = DigH5.Table.Tr;
var Menu = DigH5.Menu;
var RadioButton = DigH5.RadioButton;
var RadioButtonGroup = DigH5.RadioButtonGroup;
var TabSelector = DigH5.TabSelector;
var DropDownMenu = DigH5.DropDownMenu;
var Toggle = DigH5.Toggle;
var RaisedButton = DigH5.RaisedButton;
var ListItem = DigH5.ListItem;
var FontIcon = DigH5.FontIcon;
var IconButton = DigH5.IconButton;
var Data = React.createClass({
getInitialState: function() {
return {
option: {}
};
},
componentDidMount: function() {
option = {
title : {
text: ''
},
tooltip : {
trigger: 'item'
},
legend: {
data:['意向','预购']
},
grid: {
borderWidth: 0,
x: 0,
y: 0,
x2: 0,
y2: 0
},
toolbox: {
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日'],
splitLine:{show:false}
}
],
yAxis : [
{
type : 'value',
splitLine:{show:false}
}
],
series : [
{
name:'预购',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}, color: "rgb(103, 58, 183)"}},
data:[30, 182, 434, 791, 390, 30, 10]
},
{
name:'意向',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[1320, 1132, 601, 234, 120, 90, 20]
}
]
};
this.setState( {option: option} );
},
render: function() {
var menuItems = [
{ payload: 'TextFieldExample', text: '文本框'},
{ payload: 'ButtonExample', text: '按钮'},
{ payload: 'IconButtonExample', text: '图标按钮'},
{ payload: 'IconsExample', text: '图标'},
{ payload: 'DropDownMenuExample', text: '下拉菜单'},
{ payload: 'SwitchExample', text: '开关'},
{ payload: 'TabsExample', text: 'Tabs'},
{ payload: 'TabSelectorExample', text: 'TabSelector'},
];
var dropItems = [
{ payload: '1', text: '其他曲线' },
{ payload: '2', text: '其他曲线1' },
{ payload: '3', text: '其他曲线2' },
{ payload: '4', text: '其他曲线3' },
{ payload: '5', text: '其他曲线4' }
];
var sortItems = [
{ payload: '1', text: 'State1' },
{ payload: '2', text: 'State2' },
{ payload: '3', text: 'State3' },
{ payload: '4', text: 'State4' }
];
var data = [
{ text: '日', value: 'day' },
{ text: '周', value: 'week' },
{ text: '月', value: 'month' },
{ text: '年', value: 'yeawr' }
];
var imgElement = (<img src="./images/1.png" className="dig-avatar" />);
var iconRightElement = (<IconButton iconClassName="bingo-dig-icons-686" />);
return (
<div className="data-page">
<div className="data-page-content">
<div className="data-page-tool">
<div className="data-page-tool-left">
<span className="text-title">曲线名称：</span>
<span className="text-main">某楼盘销售情况</span>
<RadioButtonGroup name="shipSpeed"
defaultSelected="not_light">
<RadioButton
id="radioButtonId1"
value="light"
label="筛选条件1"/>
<RadioButton
id="radioButtonId2"
value="not_light"
label="筛选条件2"/>
</RadioButtonGroup>
</div>
<div className="data-page-tool-right">
<DropDownMenu menuItems={dropItems} zDepth={0} mini={true}/>
</div>
</div>
<div className="dig-row data-page-chart">
<div className="dig-cols-9 chart-container">
<Chart option={this.state.option}/>
</div>
<div className="dig-cols-3 data-page-selector">
<TabSelector data={data} selected='week'/>
</div>
</div>
<div className="data-page-bottom dig-row">
<div className="data-page-table dig-cols-8">
<div className="data-page-table-selector">
<span className="text-sort">排序方式</span>
<div className="sort-right">
<div className="dropdown">
<DropDownMenu menuItems={sortItems} zDepth={0} mini={true}/>
</div>
<div>
<RaisedButton label="应用" />
</div>
</div>
</div>
<div>
<Table border={false} headerBg={false} columnWidth={[120,140,160,130,110]}>
<Tr>
<Td column="序号">#1000</Td>
<Td column="日期">20150423</Td>
<Td column="事件">重大服务事件</Td>
<Td column="处理结果">已解决</Td>
<Td column="开关状态">
<Toggle id="toggleId" name="toggleName" value="toggle"
label="" defaultToggled={false}/>
</Td>
</Tr>
<Tr>
<Td column="序号">#1000</Td>
<Td column="日期">20150423</Td>
<Td column="事件">重大服务事件</Td>
<Td column="处理结果">已解决</Td>
<Td column="开关状态">
<Toggle id="toggleId1" name="toggleName1" value="toggle1"
label="" defaultToggled={true}/>
</Td>
</Tr>
<Tr>
<Td column="序号">#1000</Td>
<Td column="日期">20150423</Td>
<Td column="事件">重大服务事件</Td>
<Td column="处理结果">已解决</Td>
<Td column="开关状态">
<Toggle id="toggleId2" name="toggleName2" value="toggle2"
label="" defaultToggled={false}/>
</Td>
</Tr>
<Tr>
<Td column="序号">#1000</Td>
<Td column="日期">20150423</Td>
<Td column="事件">重大服务事件</Td>
<Td column="处理结果">已解决</Td>
<Td column="开关状态">
<Toggle id="toggleId3" name="toggleName3" value="toggle3"
label="" defaultToggled={false}/>
</Td>
</Tr>
<Tr>
<Td column="序号">#1000</Td>
<Td column="日期">20150423</Td>
<Td column="事件">重大服务事件</Td>
<Td column="处理结果">已解决</Td>
<Td column="开关状态">
<Toggle id="toggleId4" name="toggleName4" value="toggle4"
label="" defaultToggled={true}/>
</Td>
</Tr>
</Table>
</div>
</div>
<div className="data-page-date dig-cols-4">
<div className="dig-row">
<div className="date-title dig-cols-2">
<div className="date-title-num">1</div>
<div>周日</div>
</div>
<div className="date-border-min dig-cols-10">
<div className="date-border-text">Glants Game</div>
<div className="date-border-text">7-10p</div>
</div>
</div>
<div className="divider margin"></div>
<div className="week-title">
<div>本周(四月2-8)</div>
</div>
<div className="dig-row">
<div className="date-title dig-cols-2">
<div className="date-title-num red">2</div>
<div>周一</div>
</div>
<div className="dig-cols-10">
<div className="date-border-normal">
<div className="date-border-text">Schedule haircut</div>
</div>
<div className="date-border-normal">
<div className="date-border-text">Make dinner reservations</div>
</div>
<div className="divider red">
<div className="round"/>
</div>
<div className="date-border-large red">
<div className="large-text">
<div className="date-border-text">Weekly Team Meeting</div>
<div className="date-border-text">9-10a</div>
<div className="date-border-text">6F, Cumulus</div>
</div>
<img src="./images/1.png" className="dig-avatar" />
</div>
<div className="date-border-large green">
<div className="date-border-text">Lunch With jeese & Andy</div>
<div className="date-border-text">12-1p</div>
<div className="date-border-text">Delfina</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="data-page-list">
<ListItem
type='TwoLine'
leftElement = {imgElement}
rightElement = {iconRightElement}
primaryText='Min Li Chan'
secondaryText='Brunch this weekend?' />
<ListItem
type='TwoLine'
leftElement = {imgElement}
rightElement = {iconRightElement}
primaryText='Min Li Chan'
secondaryText='Brunch this weekend?' />
<ListItem
type='TwoLine'
leftElement = {imgElement}
rightElement = {iconRightElement}
primaryText='Min Li Chan'
secondaryText='Brunch this weekend?' />
<ListItem
type='TwoLine'
leftElement = {imgElement}
rightElement = {iconRightElement}
primaryText='Min Li Chan'
secondaryText='Brunch this weekend?' />
<ListItem
type='TwoLine'
leftElement = {imgElement}
rightElement = {iconRightElement}
primaryText='Min Li Chan'
secondaryText='Brunch this weekend?' />
<ListItem
type='TwoLine'
leftElement = {imgElement}
rightElement = {iconRightElement}
primaryText='Min Li Chan'
secondaryText='Brunch this weekend?'/>
<ListItem
type='TwoLine'
leftElement = {imgElement}
rightElement = {iconRightElement}
primaryText='Min Li Chan'
secondaryText='Brunch this weekend?' />
<ListItem
type='TwoLine'
leftElement = {imgElement}
rightElement = {iconRightElement}
primaryText='Min Li Chan'
secondaryText='Brunch this weekend?'/>
</div>
</div>
);
}
});
module.exports = Data;