TxManager系统后台

+ 欢迎使用
{this.state.title} +

+ ); + } +} + +const styles = { + userLogin: { + position: 'relative', + height: '100vh', + }, + userLoginBg: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + backgroundSize: 'cover', + }, + formContainer: { + display: 'flex', + justifyContent: 'center', + flexDirection: 'column', + padding: '30px 40px', + background: '#fff', + borderRadius: '6px', + boxShadow: '1px 1px 2px #eee', + }, + formItem: { + position: 'relative', + marginBottom: '25px', + flexDirection: 'column', + }, + formTitle: { + margin: '0 0 20px', + textAlign: 'center', + color: '#3080fe', + letterSpacing: '12px', + }, + inputIcon: { + position: 'absolute', + left: '0px', + top: '3px', + color: '#999', + }, + submitBtn: { + width: '240px', + background: '#3080fe', + borderRadius: '28px', + }, + checkbox: { + marginLeft: '5px', + }, + tips: { + textAlign: 'center', + }, + link: { + color: '#999', + textDecoration: 'none', + fontSize: '13px', + }, + line: { + color: '#dcd6d6', + margin: '0 8px', + }, +}; diff --git a/src/pages/Login/components/UserLogin/UserLogin.scss b/src/pages/Login/components/UserLogin/UserLogin.scss new file mode 100644 index 000000000..4e8b77d2f --- /dev/null +++ b/src/pages/Login/components/UserLogin/UserLogin.scss @@ -0,0 +1,55 @@ +@charset "UTF-8"; + +.user-login { + .next-input.next-input-single { + width: 240px; + border-top: 0; + border-left: 0; + border-right: 0; + border-color: #dcdcdc; + border-radius: 0; + input { + padding-left: 25px; + font-size: 13px; + } + } + .next-checkbox-label { + color: #999; + font-size: 13px; + } + .content-wrapper { + position: absolute; + top: -100px; + left: 0; + right: 0; + bottom: 0; + max-width: 1080px; + margin: 0 auto; + display: flex; + justify-content: space-around; + align-items: center; + .slogan { + text-align: center; + color: #fff; + font-size: 36px; + letter-spacing: 2px; + line-height: 48px; + } + } +} + +@media screen and (max-width: 720px) { + .user-login { + .content-wrapper { + margin: 20px auto; + top: 40px; + max-width: 300px; + display: block; + .slogan { + color: #666; + font-size: 22px; + line-height: 30px; + } + } + } +} diff --git a/src/pages/Login/components/UserLogin/forgetPwd.jsx b/src/pages/Login/components/UserLogin/forgetPwd.jsx new file mode 100644 index 000000000..6bd6cfe99 --- /dev/null +++ b/src/pages/Login/components/UserLogin/forgetPwd.jsx @@ -0,0 +1,431 @@ +import React, { Component } from 'react'; +import IceContainer from '@icedesign/container'; +import { Form, Step, Grid, Input, Button, Feedback,Loading} from '@icedesign/base'; +import { + FormBinderWrapper, + FormBinder, + FormError, + FormBinder as IceFormBinder, + FormError as IceFormError, +} from '@icedesign/form-binder'; +import {httpUrl, isNull, phone,testPhone} from '../../../../common'; +import '../../../../css/common.css'; +//1.路由跳转页面引入 +import { withRouter } from 'react-router' +const { Col } = Grid; + +let codeTime = 60; +if(!isNull(sessionStorage.getItem('codeTime'))){ + codeTime = JSON.parse(sessionStorage.getItem('codeTime')) +} +let timer; +@withRouter//2.路由跳转引入 +export default class forgetPwd extends Component { + static displayName = 'forgetPwd'; + + //页面参数默认值 + constructor(props) { + super(props); + this.state = { + step: 0,//页面设置 + value: { + account: '',//账号 + phone: '', + code: '' + }, + password:{ + account: '',//账号 + newPwd: '',//新密码 + }, + timerTitle:'获取验证码', + + timerCount:codeTime, + disabled:true, + loadingVisible: false, + }; + } + + + + componentDidMount() { + if(codeTime==60){ + this.setState({ + disabled:false + }) + } + this.interval(codeTime,timer) + } + + interval(){ + if(codeTime!=60){ + this.interval=setInterval(() =>{ + timer=this.state.timerCount-1 + sessionStorage.setItem('codeTime',timer); + // console.log(this.state.timerCount); + this.setState({ + timerTitle:timer+'s重新获取', + disabled: true, + }) + if(timer<=0){ + this.interval&&clearInterval(this.interval); + sessionStorage.setItem('codeTime',60); + codeTime = JSON.parse(sessionStorage.getItem('codeTime')) + this.setState({ + timerTitle: "获取验证码", + timerCount: codeTime, + disabled: false, + }) + }else{ + this.setState({ + timerCount:timer, + }) + } + },1000 + ) + } + } + + play(){ + var music = document.getElementById('music') + music.play(); + } + + //第一个form的change方法 + formChange = value => { + console.log('value', value); + this.setState({ + value + }); + }; +//第二个form的change方法 + formChange2 = value => { + console.log('value', value); + this.setState({ + value + }); + }; + + handleSendPhoneNum = (e) => { + e.preventDefault(); + let phone = this.state.value.phone + if(isNull(phone)){ + Feedback.toast.error('手机号不能为空!'); + return; + } + if(!testPhone(phone)){ + Feedback.toast.error('手机号格式不对!'); + return; + } + this.setState({ + loadingVisible : true + }) + var params = {'mobile':phone} + httpUrl(host + 'pc/company/getRegisterMobile',params,'', res => { + if(res.data.res.data == true){ + Feedback.toast.success('获取成功,请注意查收'); + this.setState({ + loadingVisible : false + }) + + this.interval=setInterval(() =>{ + timer=this.state.timerCount-1 + // console.log(this.state.timerCount); + // console.log(timer+'s重新获取'); + sessionStorage.setItem('codeTime',timer); + this.setState({ + timerTitle:timer+'s重新获取', + disabled: true, + }) + + if(timer===0){ + this.interval&&clearInterval(this.interval); + sessionStorage.setItem('codeTime',60); + this.setState({ + timerTitle: "获取验证码", + timerCount: codeTime, + disabled: false, + }) + }else{ + this.setState({ + timerCount:timer, + }) + } + },1000) + }else{ + Feedback.toast.prompt('短信发送失败,一天不能超过5次'); + this.setState({ + loadingVisible : false + }) + } + }); + } + //提交并进入下一步 + nextStep = () => { + this.refs.form.validateAll((error, value) => { + // /mobile/pc/company/foreignPwd + if (!error || error.length === 0) { + console.log(value) + var params = {'account':value.account,'mobile':value.phone,'code':value.code} + httpUrl(host + 'pc/company/foreignPwd',params,'', res => { + console.log(res.data.res.data) + if(res.data.res.data == true){ + this.state.password.account = value.account; + this.setState({ step: this.state.step + 1 }); + sessionStorage.setItem('codeTime',60); + } + }) + + }else{ + Feedback.toast.prompt('请补充完整表单信息'); + } + }); + }; + +//提交并进入下一步 +nextStep2 = () => { + this.refs.form2.validateAll((error, value) => { + if (!error || error.length === 0) { + console.log(value) + httpUrl(host + 'pc/company/updateNewPwd',value,'', res => { + console.log(res.data.res.data) + if(res.data.res.data == true){ + sessionStorage.setItem('codeTime',60); + Feedback.toast.success('修改密码成功,跳转到登录页面'); + this.props.history.push("/login"); + }else{ + // Feedback.toast.prompt('修改密码成功,跳转到登录页面'); + } + }) + }else{ + Feedback.toast.prompt('请补充完整表中信息'); + } + }); +}; + +renderStep = (step) => { + + if (step === 0) { + return ( + + + +

+ + + + + + +

+ +

+ + + +

+ + +

+ {/*

*/} + + {/*

*/} +

+ +

+ + + + + + +

+ +

+ + + + ); + }else if (step === 1) { + return ( + + + +

+ + + + + + +

+ +

+ + + + ); + } + }; + + render() { + return ( +

+ + 找回密码 + +

+ + + + + + + {this.renderStep(this.state.step)} +

+ ); + } +} + + + +const styles = { + form: { + paddingLeft: '140px', + paddingTop:'20px' + }, + formLabel: { + lineHeight: '40px', + paddingRight: '30px', + }, + mapLabel: { + textAlign: 'right', + lineHeight: '1.7rem', + }, + formRow: { + marginBottom: '20px', + clear: 'both', + overflow: 'hidden' + }, + formRow1: { + marginBottom: '20px', + }, + formErrorWrapper: { + marginTop: '5px', + }, + simpleFluencyForm: {}, + IMGGG: { + backgroundcolor:'#f1f1f1', + color: '#0a7ac3', + border: '1px solid #0d599a', + marginTop: '20px' + }, + formBorder: { + backgroundcolor:'#f1f1f1', + color: '#0a7ac3', + border: '1px solid #0d599a', + width:'100%', + height:'auto', + overflow: 'hidden' + }, + head:{ + lineHeight: '70px', + backgroundColor: '#0091ea', + + }, + headText:{ + fontWeight: 'bolder', + paddingLeft:'240px', + fontSize: '30px', + color: 'yellow', + lineHeight: '88px', + }, + fontDiv:{ + height: '128px', + width: '130px', + textAlign: 'center', + color: '#999', + background: '#f5f5f5', + lineHeight: '128px', + textAlign: 'center', + overflow: 'hidden', + }, + imgMagg:{ + margin: '9px auto', + }, + fontMagg:{ + margin: '40px auto', + }, + shiImgMagg:{ + margin: '7px auto', + width: '100%' + }, + submitBtn: { + fontSize: '13px', + height: '40px', + lineHeight: '40px', + background: '#3080fe', + borderRadius: '2px', + }, + btns1: { + margin: '25px 0', + clear: 'both', + overflow: 'hidden', + width : '850px', + + }, + btns2: { + margin: '25px 0', + clear: 'both', + overflow: 'hidden', + width : '980px', + marginLeft: '-94px', + }, + scrollContainer: { + width: '100%', + height: '448px', + overflow: 'auto', + }, + formItemCol: { + position: 'relative', + }, +}; diff --git a/src/pages/Login/components/UserLogin/index.js b/src/pages/Login/components/UserLogin/index.js new file mode 100644 index 000000000..6439f8446 --- /dev/null +++ b/src/pages/Login/components/UserLogin/index.js @@ -0,0 +1,3 @@ +import UserLogin from './UserLogin'; + +export default UserLogin; diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js new file mode 100644 index 000000000..dbe484f97 --- /dev/null +++ b/src/pages/Login/index.js @@ -0,0 +1,3 @@ +import Login from './Login'; + +export default Login; diff --git a/src/pages/MonitorDetail/MonitorDetail.jsx b/src/pages/MonitorDetail/MonitorDetail.jsx new file mode 100644 index 000000000..5c2019a48 --- /dev/null +++ b/src/pages/MonitorDetail/MonitorDetail.jsx @@ -0,0 +1,31 @@ +import React, { Component } from 'react'; +import TrackTable from './components/TrackTable'; +import {theRequest, isNull} from '../../common'; +export default class Dashboard extends Component { + static displayName = 'Dashboard'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + let groupId = "", unitId = ""; + if (!isNull(theRequest(props.location.search))) { + groupId = theRequest(props.location.search).groupId; + unitId = theRequest(props.location.search).unitId; + } + super(props); + this.state = { + groupId: groupId, + unitId: unitId + }; + } + + render() { + return ( +

+ +

+ ); + } +} diff --git a/src/pages/MonitorDetail/components/BaseInfo/BaseInfo.jsx b/src/pages/MonitorDetail/components/BaseInfo/BaseInfo.jsx new file mode 100644 index 000000000..b5e6e353f --- /dev/null +++ b/src/pages/MonitorDetail/components/BaseInfo/BaseInfo.jsx @@ -0,0 +1,98 @@ +import React, { Component } from 'react'; +import IceContainer from '@icedesign/container'; +import { Grid } from '@icedesign/base'; +import PieChart from './PieChart'; + +const { Row, Col } = Grid; + +export default class BaseInfo extends Component { + static displayName = 'BaseInfo'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( + + + +

应用版本详细信息

+ 应用名称： + + 手机淘宝 iOS 客户端 0.0.1 版本监控 + +
+ 当前版本： + 0.0.2 +
+ 对比版本： + 0.0.1 +
+ App ID： + 000001 +
+ 创建者： + 淘小宝 +
+ 创建时间： + 2018-08-29 11:28:23 +

+ + + + +

埋点统计

+ + + + + ); + } +} + +const styles = { + row: { + margin: '20px 10px', + }, + container: { + margin: '0', + padding: '0', + }, + title: { + margin: '0', + padding: '15px 20px', + fonSize: '16px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + color: 'rgba(0,0,0,.85)', + fontWeight: '500', + borderBottom: '1px solid #eee', + }, + summary: { + padding: '20px', + }, + item: { + height: '32px', + lineHeight: '32px', + }, + label: { + display: 'inline-block', + fontWeight: '500', + minWidth: '74px', + }, +}; diff --git a/src/pages/MonitorDetail/components/BaseInfo/PieChart.jsx b/src/pages/MonitorDetail/components/BaseInfo/PieChart.jsx new file mode 100644 index 000000000..40d42a807 --- /dev/null +++ b/src/pages/MonitorDetail/components/BaseInfo/PieChart.jsx @@ -0,0 +1,87 @@ +import React, { Component } from 'react'; +import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend } from 'bizcharts'; +import DataSet from '@antv/data-set'; + +export default class PieChart extends Component { + render() { + const { DataView } = DataSet; + const data = [ + { + item: '事件一', + count: 40, + }, + { + item: '事件二', + count: 21, + }, + { + item: '事件三', + count: 17, + }, + { + item: '事件四', + count: 13, + }, + { + item: '事件五', + count: 9, + }, + ]; + const dv = new DataView(); + dv.source(data).transform({ + type: 'percent', + field: 'count', + dimension: 'item', + as: 'percent', + }); + const cols = { + percent: { + formatter: (val) => { + val = `${val * 100}%`; + return val; + }, + }, + }; + return ( + + + + + + { + percent = `${percent * 100}%`; + return { + name: item, + value: percent, + }; + }, + ]} + style={{ + lineWidth: 1, + stroke: '#fff', + }} + > + + + + ); + } +} diff --git a/src/pages/MonitorDetail/components/BaseInfo/index.js b/src/pages/MonitorDetail/components/BaseInfo/index.js new file mode 100644 index 000000000..67e9a8f14 --- /dev/null +++ b/src/pages/MonitorDetail/components/BaseInfo/index.js @@ -0,0 +1,3 @@ +import BaseInfo from './BaseInfo'; + +export default BaseInfo; diff --git a/src/pages/MonitorDetail/components/TrackTab/Scheme.jsx b/src/pages/MonitorDetail/components/TrackTab/Scheme.jsx new file mode 100644 index 000000000..657e83a57 --- /dev/null +++ b/src/pages/MonitorDetail/components/TrackTab/Scheme.jsx @@ -0,0 +1,153 @@ +import React, { Component } from 'react'; +import { Checkbox, Table, Pagination } from '@icedesign/base'; + +const { Group: CheckboxGroup } = Checkbox; + +const getData = () => { + return Array.from({ length: 10 }).map(() => { + return { + schemeName: '手淘商品详情', + time: '2018-08-28 11:49:38', + leader: '淘小宝', + stat: { + success: '289', + error: '23', + uncover: '136', + }, + }; + }); +}; + +const checkboxOptions = [ + { + value: 'success', + label: '成功', + }, + { + value: 'error', + label: '错误', + }, + { + value: 'uncover', + label: '未覆盖', + }, +]; + +export default class TableFilter extends Component { + static displayName = 'TableFilter'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + current: 1, + }; + } + + handlePaginationChange = (current) => { + this.setState({ + current, + }); + }; + + onChange = (selectedItems) => { + console.log('onChange callback', selectedItems); + }; + + renderOper = () => { + return 详情; + }; + + renderStat = (value) => { + console.log(value); + return ( +

+ + {value.success} + + + {value.error} + + + {value.uncover} + +

+ ); + }; + + render() { + const dataSource = getData(); + const { current } = this.state; + + return ( +

状态:

+ +

+ + + + + + +

+ +

+ 详情 + + 申请权限 +

+ ); + }; + + render() { + const dataSource = getData(); + const { current } = this.state; + + return ( +

页面名称:

+ +

+ + + + + + + + + +

+ +

+ ); + } +} + +const styles = { + container: { + margin: '10px 0', + }, + tableHead: { + display: 'flex', + alignItems: 'center', + marginBottom: '20px', + }, + label: { + marginRight: '10px', + }, + link: { + margin: '0 5px', + color: 'rgba(49, 128, 253, 0.65)', + cursor: 'pointer', + textDecoration: 'none', + }, + separator: { + margin: '0 8px', + display: 'inline-block', + height: '12px', + width: '1px', + verticalAlign: 'middle', + background: '#e8e8e8', + }, + pagination: { + marginTop: '20px', + textAlign: 'right', + }, +}; diff --git a/src/pages/MonitorDetail/components/TrackTab/TrackTab.jsx b/src/pages/MonitorDetail/components/TrackTab/TrackTab.jsx new file mode 100644 index 000000000..295cd7b0a --- /dev/null +++ b/src/pages/MonitorDetail/components/TrackTab/TrackTab.jsx @@ -0,0 +1,63 @@ +import React, { Component } from 'react'; +import { Tab, DatePicker } from '@icedesign/base'; +import IceContainer from '@icedesign/container'; +import Track from './Track'; +import Scheme from './Scheme'; + +const TabPane = Tab.TabPane; + +const tabs = [ + { tab: '埋点维度', key: 'track', content: }, + { tab: '方案维度', key: 'scheme', content: }, +]; + +function handleChange(key) { + console.log('change', key); +} + +function handleClick(key) { + console.log('click', key); +} + +export default class TrackTab extends Component { + static displayName = 'TrackTab'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + renderTabExtraContent = () => { + return ; + }; + + render() { + return ( + + + {tabs.map((item) => { + return ( + + {item.content} + + ); + })} + + + ); + } +} + +const styles = { + container: { + margin: '20px', + padding: '10px 0', + }, +}; diff --git a/src/pages/MonitorDetail/components/TrackTab/index.js b/src/pages/MonitorDetail/components/TrackTab/index.js new file mode 100644 index 000000000..be9bd6aa6 --- /dev/null +++ b/src/pages/MonitorDetail/components/TrackTab/index.js @@ -0,0 +1,3 @@ +import TrackTab from './TrackTab'; + +export default TrackTab; diff --git a/src/pages/MonitorDetail/components/TrackTable/TableFilter.jsx b/src/pages/MonitorDetail/components/TrackTable/TableFilter.jsx new file mode 100644 index 000000000..5e649e1d6 --- /dev/null +++ b/src/pages/MonitorDetail/components/TrackTable/TableFilter.jsx @@ -0,0 +1,136 @@ +/* eslint react/no-string-refs:0 */ +import React, { Component } from 'react'; +import { Grid, Input, Button, Select, DatePicker } from '@icedesign/base'; +import { + FormBinderWrapper as IceFormBinderWrapper, + FormBinder as IceFormBinder, + FormError as IceFormError, +} from '@icedesign/form-binder'; + +const { Row, Col } = Grid; + +export default class Filter extends Component { + static displayName = 'Filter'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + value: {}, + }; + } + + formChange = (value) => { + console.log('value', value); + this.setState({ + value, + }); + }; + + render() { + return ( + + + +

+ 页面名称： + + + +

+ +

+ + +

+ 事件 ID： + + + +

+ +

+ + +

+ 事件名称： + + + +

+ +

+ + +

+ 类型： + + + +

+ +

+ + +

+ 日期： + + + +

+ +

+ {/* + +

+ + + 名称 + + + + 表名 + + + + +

+ + */} +

+ +

异常详情列表

+ + + + + + +

+ +

+ ); + } +} + +const styles = { + container: { + margin: '0 20px', + padding: '0 0 20px', + }, + title: { + margin: '0', + padding: '10px 20px', + fonSize: '16px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + color: 'rgba(0,0,0,.85)', + fontWeight: '500', + borderBottom: '1px solid #ededed', + }, + link: { + margin: '0 5px', + color: 'rgba(49, 128, 253, 0.65)', + cursor: 'pointer', + textDecoration: 'none', + }, + separator: { + margin: '0 8px', + display: 'inline-block', + height: '12px', + width: '1px', + verticalAlign: 'middle', + background: '#e8e8e8', + }, + pagination: { + textAlign: 'right', + }, + filterCol: { + display: 'flex', + alignItems: 'center', + marginBottom: '20px', + }, + + filterTitle: { + width: '68px', + textAlign: 'right', + marginRight: '12px', + fontSize: '14px', + }, +}; diff --git a/src/pages/MonitorDetail/components/TrackTable/index.js b/src/pages/MonitorDetail/components/TrackTable/index.js new file mode 100644 index 000000000..e6e428e1f --- /dev/null +++ b/src/pages/MonitorDetail/components/TrackTable/index.js @@ -0,0 +1,3 @@ +import TrackTable from './TrackTable'; + +export default TrackTable; diff --git a/src/pages/MonitorDetail/index.js b/src/pages/MonitorDetail/index.js new file mode 100644 index 000000000..6020c03ee --- /dev/null +++ b/src/pages/MonitorDetail/index.js @@ -0,0 +1,3 @@ +import MonitorDetail from './MonitorDetail'; + +export default MonitorDetail; diff --git a/src/pages/NotFound/NotFound.jsx b/src/pages/NotFound/NotFound.jsx new file mode 100644 index 000000000..f1f003d9b --- /dev/null +++ b/src/pages/NotFound/NotFound.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; +import BasicNotFound from '../../components/BasicNotFound'; + +export default class NotFound extends Component { + static displayName = 'NotFound'; + + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( +

+ +

+ ); + } +} diff --git a/src/pages/NotFound/index.js b/src/pages/NotFound/index.js new file mode 100644 index 000000000..2d0c48553 --- /dev/null +++ b/src/pages/NotFound/index.js @@ -0,0 +1,3 @@ +import NotFound from './NotFound'; + +export default NotFound; diff --git a/src/pages/Page10/Page10.jsx b/src/pages/Page10/Page10.jsx new file mode 100644 index 000000000..5f163707a --- /dev/null +++ b/src/pages/Page10/Page10.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; +import ComplexFilter from './components/ComplexFilter'; + +export default class Page10 extends Component { + static displayName = 'Page10'; + + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( +

+ +

+ ); + } +} diff --git a/src/pages/Page10/Page10.scss b/src/pages/Page10/Page10.scss new file mode 100644 index 000000000..c62c9ba90 --- /dev/null +++ b/src/pages/Page10/Page10.scss @@ -0,0 +1,2 @@ +.page10-page { +} diff --git a/src/pages/Page10/components/ComplexFilter/ComplexFilter.jsx b/src/pages/Page10/components/ComplexFilter/ComplexFilter.jsx new file mode 100644 index 000000000..2196c16f7 --- /dev/null +++ b/src/pages/Page10/components/ComplexFilter/ComplexFilter.jsx @@ -0,0 +1,153 @@ +import React, { Component } from 'react'; +import IceContainer from '@icedesign/container'; +import { Select, Grid } from '@icedesign/base'; +import './ComplexFilter.scss'; + +const { Row, Col } = Grid; +const { Combobox, Option } = Select; + +export default class ComplexFilter extends Component { + static displayName = 'ComplexFilter'; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + currentFilterType: 'article', + categories: ['type1', 'type3'], + }; + } + + render() { + const { currentFilterType, categories } = this.state; + const FILTERS = [ + { type: 'article', text: '文章' }, + { type: 'app', text: '应用' }, + { type: 'other', text: '其他' }, + ]; + + const CATEGORIES = [ + { type: 'all', text: '全部' }, + { type: 'type1', text: '类目一' }, + { type: 'type2', text: '类目二' }, + { type: 'type3', text: '类目三' }, + { type: 'type4', text: '类目四' }, + ]; + return ( +

+ + {FILTERS.map((item, idx) => ( +

{ + this.setState({ + currentFilterType: item.type, + }); + }} + > + {item.text} +

+ ))} + + + +

+ 所属类目： + {CATEGORIES.map((cat, idx) => ( + -1 ? 'active' : '' + }`} + onClick={() => { + const isInCategory = categories.indexOf(cat.type) > -1; + if (isInCategory) { + this.setState({ + categories: categories.filter( + (item) => item !== cat.type + ), + }); + } else { + this.setState({ + categories: [...categories, cat.type], + }); + } + }} + key={idx} + > + {cat.text} + + ))} +

+ + + + 所有者： + console.log('blur')} + /> + + + + 活跃用户： + + + + + 好评度： + + + + +

+ ); + } +} + +const styles = { + tabFilterContainer: { + display: 'flex', + flexDirection: 'row', + paddingBottom: 0, + }, + filterBelonging: { paddingBottom: '10px', borderBottom: '1px solid #F4F4F4' }, + filterBelongingLabel: { + fontSize: '14px', + color: '#333', + marginRight: '19px', + }, + filterForm: { + marginTop: '20px', + }, + combobox: { width: '200px', marginRight: '25px' }, + select: { width: '50px', marginRight: '25px' }, + col: { + display: 'flex', + alignItems: 'center', + marginBottom: '15px', + }, +}; diff --git a/src/pages/Page10/components/ComplexFilter/ComplexFilter.scss b/src/pages/Page10/components/ComplexFilter/ComplexFilter.scss new file mode 100644 index 000000000..2520efdb0 --- /dev/null +++ b/src/pages/Page10/components/ComplexFilter/ComplexFilter.scss @@ -0,0 +1,30 @@ +@charset "UTF-8"; + +.complex-filter { + .tab-filter-item { + cursor: pointer; + text-align: center; + border-bottom: 3px solid #fff; + width: 40px; + margin: 0 20px; + white-space: nowrap; + padding-bottom: 15px; + &:hover, + &.active { + color: #3080fe; + border-bottom-color: #3080fe; + } + } + + .filter-belonging-item { + cursor: pointer; + font-size: 14px; + color: #666; + margin-right: 20px; + &.active, + &:hover { + color: #000; + font-weight: bold; + } + } +} diff --git a/src/pages/Page10/components/ComplexFilter/index.js b/src/pages/Page10/components/ComplexFilter/index.js new file mode 100644 index 000000000..cd432f954 --- /dev/null +++ b/src/pages/Page10/components/ComplexFilter/index.js @@ -0,0 +1,3 @@ +import ComplexFilter from './ComplexFilter'; + +export default ComplexFilter; diff --git a/src/pages/Page10/index.js b/src/pages/Page10/index.js new file mode 100644 index 000000000..ddc30094d --- /dev/null +++ b/src/pages/Page10/index.js @@ -0,0 +1,2 @@ +import Page10 from './Page10'; +export default Page10; diff --git a/src/pages/Resource/Builder.jsx b/src/pages/Resource/Builder.jsx new file mode 100644 index 000000000..5dffb84f5 --- /dev/null +++ b/src/pages/Resource/Builder.jsx @@ -0,0 +1,146 @@ +import React, { Component } from 'react'; +import IceContainer from '@icedesign/container'; +import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend } from 'bizcharts'; +import BuilderTable from './components/BuilderTable'; + +import PieChart from './PieChart'; +export default class Builder extends Component { + static displayName = 'Builder'; + + constructor(props) { + super(props); + this.state = {}; + } + + renderTrafficTypes = () => { + const data = [ + { status: '激活', count: 356 }, + { status: '保持', count: 235 }, + { status: '关闭', count: 245 }, + ]; + let total = 0; + data.forEach((item) => { + total += item.count; + }); + const precentages = {}; + data.forEach((item) => { + precentages[item.status] = item.count / total; + }); + + const cols = { + count: { + min: 0, + }, + }; + return ( + +

+ + + + + { + return `${text} (${(precentages[text] * 100).toFixed(2)}%)`; + }} + name="status" + itemWidth={100} + /> + + + + + +

+ + ); + }; + + render() { + return ( +

+ + {this.renderTrafficTypes()} +

+ +

+ ); + } +} + +const styles = { + row: { + margin: '20px 10px', + }, + container: { + margin: '0', + padding: '0', + }, + title: { + margin: '0', + padding: '15px 20px', + fonSize: '16px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + color: 'rgba(0,0,0,.85)', + fontWeight: '500', + borderBottom: '1px solid #eee', + }, + summary: { + padding: '20px', + }, + item: { + height: '32px', + lineHeight: '32px', + }, + label: { + display: 'inline-block', + fontWeight: '500', + minWidth: '74px', + }, +}; diff --git a/src/pages/Resource/PieChart.jsx b/src/pages/Resource/PieChart.jsx new file mode 100644 index 000000000..40d42a807 --- /dev/null +++ b/src/pages/Resource/PieChart.jsx @@ -0,0 +1,87 @@ +import React, { Component } from 'react'; +import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend } from 'bizcharts'; +import DataSet from '@antv/data-set'; + +export default class PieChart extends Component { + render() { + const { DataView } = DataSet; + const data = [ + { + item: '事件一', + count: 40, + }, + { + item: '事件二', + count: 21, + }, + { + item: '事件三', + count: 17, + }, + { + item: '事件四', + count: 13, + }, + { + item: '事件五', + count: 9, + }, + ]; + const dv = new DataView(); + dv.source(data).transform({ + type: 'percent', + field: 'count', + dimension: 'item', + as: 'percent', + }); + const cols = { + percent: { + formatter: (val) => { + val = `${val * 100}%`; + return val; + }, + }, + }; + return ( + + + + + + { + percent = `${percent * 100}%`; + return { + name: item, + value: percent, + }; + }, + ]} + style={{ + lineWidth: 1, + stroke: '#fff', + }} + > + + + + ); + } +} diff --git a/src/pages/Resource/components/BuilderTable/BuilderTable.css b/src/pages/Resource/components/BuilderTable/BuilderTable.css new file mode 100644 index 000000000..110a04671 --- /dev/null +++ b/src/pages/Resource/components/BuilderTable/BuilderTable.css @@ -0,0 +1,12 @@ + +.next-table .highlight-row td{ + background: #f76867; + color: #ffffff; + border: none; +} + +.next-table .highlight-row-yellow td{ + background: #e4dc7d; + color: #ffffff; + border: none; +} \ No newline at end of file diff --git a/src/pages/Resource/components/BuilderTable/BuilderTable.jsx b/src/pages/Resource/components/BuilderTable/BuilderTable.jsx new file mode 100644 index 000000000..5dccbac4c --- /dev/null +++ b/src/pages/Resource/components/BuilderTable/BuilderTable.jsx @@ -0,0 +1,98 @@ +import React, { Component } from 'react'; +import IceContainer from '@icedesign/container'; +import CompositeFilter from '../CompositeFilter'; +import './BuilderTable.css'; + + +export default class BuilderTable extends Component { + static displayName = 'BuilderTable'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + renderState = (value) => { + return ( +

+ + {value} +

+ ); + }; + + renderOper = () => { + return ( +

+ 查看 +

+ ); + }; + + columnsConfig = () => { + return [ + { + title: '内容', + dataIndex: 'builder', + key: 'builder', + }, + { + title: '时间', + dataIndex: 'description', + key: 'description', + }, + { + title: '详情', + dataIndex: 'detail', + key: 'detail', + cell: this.renderOper, + }, + ]; + }; + + render() { + return ( + +

资源清单

+ + + + + ); + } +} + +const styles = { + tableHead: { + margin: '0 0 20px', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + }, + tableTitle: { + height: '20px', + lineHeight: '20px', + color: '#333', + fontSize: '18px', + fontWeight: 'bold', + paddingLeft: '12px', + borderLeft: '4px solid #666', + }, + circle: { + display: 'inline-block', + background: '#28a745', + width: '8px', + height: '8px', + borderRadius: '50px', + marginRight: '4px', + }, + stateText: { + color: '#28a745', + }, +}; diff --git a/src/pages/Resource/components/BuilderTable/index.js b/src/pages/Resource/components/BuilderTable/index.js new file mode 100644 index 000000000..3067d3ab2 --- /dev/null +++ b/src/pages/Resource/components/BuilderTable/index.js @@ -0,0 +1,3 @@ +import BuilderTable from './BuilderTable'; + +export default BuilderTable; diff --git a/src/pages/Resource/components/CompositeFilter/CompositeFilter.jsx b/src/pages/Resource/components/CompositeFilter/CompositeFilter.jsx new file mode 100644 index 000000000..4807dd0ce --- /dev/null +++ b/src/pages/Resource/components/CompositeFilter/CompositeFilter.jsx @@ -0,0 +1,169 @@ +import React, { Component } from 'react'; +import { Search, Tab, DatePicker, Table, Pagination } from '@icedesign/base'; +import IceContainer from '@icedesign/container'; +import { enquireScreen } from 'enquire-js'; + +const TabPane = Tab.TabPane; + +export default class CompositeFilter extends Component { + static displayName = 'CompositeFilter'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + isMobile: false, + dataSource: [] + }; + } + + componentDidMount() { + this.enquireScreenRegister(); + } + + enquireScreenRegister = () => { + const mediaCondition = 'only screen and (max-width: 720px)'; + + enquireScreen((mobile) => { + this.setState({ + isMobile: mobile, + }); + }, mediaCondition); + }; + + onTabChange = (key) => { + console.log(key) + this.setState({ + key: key + }); + if(key == 'video') { + const getData = () => { + return Array.from({ length: 20 }).map((item, index) => { + return { + id: index + 1, + builder: `交换机机架式交换机24网络交换机百兆`, + createTime: '192.168.1.109', + state: 'TP-LINK TL-SF1024S', + }; + }); + }; + this.setState({ + dataSource: getData() + }); + } else if(key == 'pic') { + const getData = () => { + return Array.from({ length: 20 }).map((item, index) => { + return { + id: index + 1, + builder: `OPM-ESJSLAJD-ZOHKNAS.JJDIOS.COM`, + createTime: '192.168.1.109', + state: 'Windows 8', + }; + }); + }; + this.setState({ + dataSource: getData() + }); + } else if (key == 'storage') { + const getData = () => { + return Array.from({ length: 20 }).map((item, index) => { + return { + id: index + 1, + builder: `aggr0`, + createTime: '855', + state: '814.2', + }; + }); + }; + this.setState({ + dataSource: getData() + }); + } else { + this.setState({ + dataSource: [] + }); + } + }; + + onTagChange = (key, selected) => { + console.log(`Tag: ${key} is ${selected ? 'selected' : 'unselected'}`); + }; + + onDateChange = (value) => { + console.log(value); + }; + + onSearch = (value) => { + console.log(value); + } + + render() { + console.log(this.state.key) + return ( +

+ + + + + + + + + + {this.state.key == 'storage' ? + + + + +

+ : + + + + {this.state.key == 'video' ? + : + + } +

+ } + +

+ ); + } +} + +const styles = { + filterCard: { + position: 'relative', + padding: 10, + }, + tagList: { + marginTop: '10px', + }, + extraFilter: { + marginTop: '8px', + display: 'flex', + flexDirection: 'row', + }, + search: { + marginLeft: '12px', + }, +}; diff --git a/src/pages/Resource/components/CompositeFilter/index.js b/src/pages/Resource/components/CompositeFilter/index.js new file mode 100644 index 000000000..17df872b2 --- /dev/null +++ b/src/pages/Resource/components/CompositeFilter/index.js @@ -0,0 +1,3 @@ +import CompositeFilter from './CompositeFilter'; + +export default CompositeFilter; diff --git a/src/pages/Resource/components/TableFilter/TableFilter.jsx b/src/pages/Resource/components/TableFilter/TableFilter.jsx new file mode 100644 index 000000000..f20271745 --- /dev/null +++ b/src/pages/Resource/components/TableFilter/TableFilter.jsx @@ -0,0 +1,115 @@ +import React, { Component } from 'react'; +import { Button, DatePicker, Select, Input } from '@icedesign/base'; + +export default class TableFilter extends Component { + static displayName = 'TableFilter'; + + constructor(props) { + super(props); + this.state = { + startValue: null, + endValue: null, + endOpen: false, + }; + } + + disabledStartDate = (startValue) => { + const { endValue } = this.state; + if (!startValue || !endValue) { + return false; + } + return startValue.valueOf() > endValue.valueOf(); + }; + + disabledEndDate = (endValue) => { + const { startValue } = this.state; + if (!endValue || !startValue) { + return false; + } + return endValue.valueOf() <= startValue.valueOf(); + }; + + onChange = (field, value) => { + this.setState({ + [field]: value, + }); + }; + + onStartChange = (value) => { + this.onChange('startValue', value); + }; + + onEndChange = (value) => { + this.onChange('endValue', value); + }; + + handleStartOpenChange = (open) => { + if (!open) { + this.setState({ endOpen: true }); + } + }; + + handleEndOpenChange = (open) => { + this.setState({ endOpen: open }); + }; + + render() { + const { startValue, endValue, endOpen } = this.state; + return ( +

+ 责任人： + +

+ 创建时间： + + + +

+ 状态： + +

+ +

+ ); + } +} + +const styles = { + tableFilter: { + display: 'flex', + background: '#f4f4f4', + padding: '15px 0', + marginBottom: '20px', + }, + filterItem: { + display: 'flex', + alignItems: 'center', + marginLeft: '15px', + }, + submitButton: { + marginLeft: '15px', + }, +}; diff --git a/src/pages/Resource/components/TableFilter/index.js b/src/pages/Resource/components/TableFilter/index.js new file mode 100644 index 000000000..785f11f60 --- /dev/null +++ b/src/pages/Resource/components/TableFilter/index.js @@ -0,0 +1,3 @@ +import TableFilter from './TableFilter'; + +export default TableFilter; diff --git a/src/pages/Resource/index.js b/src/pages/Resource/index.js new file mode 100644 index 000000000..2f3c3eb7e --- /dev/null +++ b/src/pages/Resource/index.js @@ -0,0 +1,3 @@ +import Builder from './Builder'; + +export default Builder; diff --git a/src/pages/Task/Task.jsx b/src/pages/Task/Task.jsx new file mode 100644 index 000000000..8529a99ba --- /dev/null +++ b/src/pages/Task/Task.jsx @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; +import TrackTable from './components/TrackTable'; + +export default class Dashboard extends Component { + static displayName = 'Dashboard'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( +

+ +

+ ); + } +} diff --git a/src/pages/Task/components/BaseInfo/BaseInfo.jsx b/src/pages/Task/components/BaseInfo/BaseInfo.jsx new file mode 100644 index 000000000..54dfbe82f --- /dev/null +++ b/src/pages/Task/components/BaseInfo/BaseInfo.jsx @@ -0,0 +1,182 @@ +import React, { Component } from 'react'; + +import IceContainer from '@icedesign/container'; +import { Grid } from '@icedesign/base'; +import PieChart from './PieChart'; +import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend } from 'bizcharts'; +import { DataView } from '@antv/data-set'; +const { Row, Col } = Grid; + +export default class BaseInfo extends Component { + static displayName = 'BaseInfo'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + renderUserStatistics = () => { + const data = [ + { type: '等待链接', count: 151, date: '02-21' }, + { type: '关闭连接', count: 532, date: '02-21' }, + { type: '持久连接', count: 1834, date: '02-21' }, + + { type: '等待链接', count: 251, date: '02-22' }, + { type: '关闭连接', count: 732, date: '02-22' }, + { type: '持久连接', count: 2534, date: '02-22' }, + + { type: '等待链接', count: 311, date: '02-23' }, + { type: '关闭连接', count: 932, date: '02-23' }, + { type: '持久连接', count: 1234, date: '02-23' }, + + { type: '等待链接', count: 221, date: '02-24' }, + { type: '关闭连接', count: 632, date: '02-24' }, + { type: '持久连接', count: 2534, date: '02-24' }, + + { type: '等待链接', count: 121, date: '02-25' }, + { type: '关闭连接', count: 532, date: '02-25' }, + { type: '持久连接', count: 2114, date: '02-25' }, + + { type: '等待链接', count: 221, date: '02-26' }, + { type: '关闭连接', count: 632, date: '02-26' }, + { type: '持久连接', count: 2534, date: '02-26' }, + + { type: '等待链接', count: 311, date: '02-27' }, + { type: '关闭连接', count: 932, date: '02-27' }, + { type: '持久连接', count: 1234, date: '02-27' }, + ]; + const dv = new DataView() + .source(data) + .transform({ + type: 'fill-rows', + groupBy: ['type'], + orderBy: ['date'], + }) + .transform({ + type: 'impute', + field: 'count', + method: 'value', + value: 0, + }); + const cols = { + date: { + tickInterval: 10, + nice: false, + }, + count: { + // nice: false, + min: -500, + }, + }; + return ( + +

+ + + + + + + +

+ + ); + }; + + render() { + return ( + + + + {/*

应用版本详细信息

*/} + {this.renderUserStatistics()} + + + + +

内存使用率

+ +

+ + + + ); + } +} + +const styles = { + row: { + margin: '20px 10px', + }, + container: { + margin: '0', + padding: '0', + }, + title: { + margin: '0', + padding: '15px 20px', + fonSize: '16px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + color: 'rgba(0,0,0,.85)', + fontWeight: '500', + borderBottom: '1px solid #eee', + }, + summary: { + padding: '20px', + }, + item: { + height: '32px', + lineHeight: '32px', + }, + label: { + display: 'inline-block', + fontWeight: '500', + minWidth: '74px', + }, +}; diff --git a/src/pages/Task/components/BaseInfo/PieChart.jsx b/src/pages/Task/components/BaseInfo/PieChart.jsx new file mode 100644 index 000000000..a94340285 --- /dev/null +++ b/src/pages/Task/components/BaseInfo/PieChart.jsx @@ -0,0 +1,83 @@ +import React, { Component } from 'react'; +import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend } from 'bizcharts'; +import DataSet from '@antv/data-set'; + +export default class PieChart extends Component { + render() { + const { DataView } = DataSet; + const data = [ + { + item: 'JAVA', + count: 40, + }, + { + item: 'WEB', + count: 30, + }, + { + item: 'TOMCAT', + count: 17, + }, + { + item: 'REDIS', + count: 13, + } + ]; + const dv = new DataView(); + dv.source(data).transform({ + type: 'percent', + field: 'count', + dimension: 'item', + as: 'percent', + }); + const cols = { + percent: { + formatter: (val) => { + val = `${val * 100}%`; + return val; + }, + }, + }; + return ( + + + + + + { + percent = `${percent * 100}%`; + return { + name: item, + value: percent, + }; + }, + ]} + style={{ + lineWidth: 1, + stroke: '#fff', + }} + > + + + + ); + } +} diff --git a/src/pages/Task/components/BaseInfo/index.js b/src/pages/Task/components/BaseInfo/index.js new file mode 100644 index 000000000..67e9a8f14 --- /dev/null +++ b/src/pages/Task/components/BaseInfo/index.js @@ -0,0 +1,3 @@ +import BaseInfo from './BaseInfo'; + +export default BaseInfo; diff --git a/src/pages/Task/components/TabChart/BasicLine.jsx b/src/pages/Task/components/TabChart/BasicLine.jsx new file mode 100644 index 000000000..c14d9df6f --- /dev/null +++ b/src/pages/Task/components/TabChart/BasicLine.jsx @@ -0,0 +1,67 @@ +import React, { Component } from 'react'; +import { Chart, Axis, Geom, Tooltip } from 'bizcharts'; + +export default class BasicLine extends Component { + static displayName = 'BasicLine'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + render() { + // 参考：https://alibaba.github.io/BizCharts/ + // 数据源 + const data = [ + { year: '2011', value: 30 }, + { year: '2012', value: 40 }, + { year: '2013', value: 35 }, + { year: '2014', value: 50 }, + { year: '2015', value: 49 }, + { year: '2016', value: 60 }, + { year: '2017', value: 70 }, + { year: '2018', value: 90 }, + { year: '2019', value: 100 }, + ]; + + const cols = { + value: { min: 0 }, + year: { range: [0, 1] }, + }; + + return ( +

+ + + + + + + +

+ ); + } +} + +const styles = { + point: { + stroke: '#fff', + lineWidth: 1, + }, +}; diff --git a/src/pages/Task/components/TabChart/SeriesLine.jsx b/src/pages/Task/components/TabChart/SeriesLine.jsx new file mode 100644 index 000000000..0887ec129 --- /dev/null +++ b/src/pages/Task/components/TabChart/SeriesLine.jsx @@ -0,0 +1,90 @@ +import React, { Component } from 'react'; +import { Chart, Axis, Geom, Tooltip } from 'bizcharts'; +import { DataSet } from '@antv/data-set'; + +export default class SeriesLine extends Component { + static displayName = 'SeriesLine'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + render() { + // 参考：https://alibaba.github.io/BizCharts/ + // 数据源 + const data = [ + { month: 'Jan', '读取请求': 7.0, '持久连接': 20 ,'发送响应内容': 4, "关闭连接": 7.0 , "等待连接": 5.0 }, + { month: 'Feb', '读取数据': 6.9, '持久连接': 22 ,'发送响应内容': 20, "关闭连接": 7.0 , "等待连接": 7.0 }, + { month: 'Mar', '读取数据': 9.5, '持久连接': 24 ,'发送响应内容': 34, "关闭连接": 7.0 , "等待连接": 37.0 }, + { month: 'Apr', '读取数据': 14.5, '持久连接': 30 ,'发送响应内容': 46, "关闭连接": 7.0, "等待连接": 3.0 }, + { month: 'May', '读取数据': 18.4, '持久连接': 50 ,'发送响应内容': 26, "关闭连接": 7.0, "等待连接": 69.0 }, + { month: 'Jun', '读取数据': 21.5, '持久连接': 65,'发送响应内容': 12 , "关闭连接": 7.0 , "等待连接": 13.0 }, + { month: 'Jul', '读取数据': 25.2, '持久连接': 70,'发送响应内容': 79 , "关闭连接": 7.0 , "等待连接": 25.0 }, + { month: 'Aug', '读取数据': 26.5, '持久连接': 80,'发送响应内容': 46 , "关闭连接": 7.0 , "等待连接": 47.0 }, + { month: 'Sep', '读取数据': 23.3, '持久连接': 85 ,'发送响应内容': 20, "关闭连接": 7.0, "等待连接": 14.0 }, + { month: 'Oct', '读取数据': 18.3, '持久连接': 90 ,'发送响应内容': 25, "关闭连接": 7.0, "等待连接": 7.0 }, + { month: 'Nov', '读取数据': 13.9, '持久连接': 80 ,'发送响应内容': 20, "关闭连接": 7.0 , "等待连接": 9.0 }, + { month: 'Dec', '读取数据': 9.6, '持久连接': 70 ,'发送响应内容': 11, "关闭连接": 7.0, "等待连接": 7.0 }, + ]; + + // DataSet https://github.com/alibaba/BizCharts/blob/master/doc/tutorial/dataset.md#dataset + const ds = new DataSet(); + const dv = ds.createView().source(data); + dv.transform({ + type: 'fold', + fields: ['读取数据', '持久连接', '发送响应内容', '关闭连接', '等待连接'], + key: 'city', + value: 'temperature', + }); + + // 定义度量 + const cols = { + month: { + range: [0, 1], + }, + }; + + return ( +

+ + + `${val}` }} /> + + + + +

+ ); + } +} + +const styles = { + point: { + stroke: '#fff', + lineWidth: 1, + }, +}; diff --git a/src/pages/Task/components/TabChart/TabChart.jsx b/src/pages/Task/components/TabChart/TabChart.jsx new file mode 100644 index 000000000..a5821953c --- /dev/null +++ b/src/pages/Task/components/TabChart/TabChart.jsx @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import IceContainer from '@icedesign/container'; +import { Tab } from '@icedesign/base'; +import SeriesLine from './SeriesLine'; +import BasicLine from './BasicLine'; + +const TabPane = Tab.TabPane; + +export default class TabChart extends Component { + static displayName = 'TabChart'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + handleChange = (key) => { + console.log('change', key); + }; + + render() { + return ( +

+ + + + + + + +

+ ); + } +} + +const styles = { + container: { + marginBottom: '20px', + }, + card: { + padding: '0 20px', + }, +}; diff --git a/src/pages/Task/components/TabChart/index.js b/src/pages/Task/components/TabChart/index.js new file mode 100644 index 000000000..218126274 --- /dev/null +++ b/src/pages/Task/components/TabChart/index.js @@ -0,0 +1,3 @@ +import TabChart from './TabChart'; + +export default TabChart; diff --git a/src/pages/Task/components/TrackTab/Scheme.jsx b/src/pages/Task/components/TrackTab/Scheme.jsx new file mode 100644 index 000000000..657e83a57 --- /dev/null +++ b/src/pages/Task/components/TrackTab/Scheme.jsx @@ -0,0 +1,153 @@ +import React, { Component } from 'react'; +import { Checkbox, Table, Pagination } from '@icedesign/base'; + +const { Group: CheckboxGroup } = Checkbox; + +const getData = () => { + return Array.from({ length: 10 }).map(() => { + return { + schemeName: '手淘商品详情', + time: '2018-08-28 11:49:38', + leader: '淘小宝', + stat: { + success: '289', + error: '23', + uncover: '136', + }, + }; + }); +}; + +const checkboxOptions = [ + { + value: 'success', + label: '成功', + }, + { + value: 'error', + label: '错误', + }, + { + value: 'uncover', + label: '未覆盖', + }, +]; + +export default class TableFilter extends Component { + static displayName = 'TableFilter'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + current: 1, + }; + } + + handlePaginationChange = (current) => { + this.setState({ + current, + }); + }; + + onChange = (selectedItems) => { + console.log('onChange callback', selectedItems); + }; + + renderOper = () => { + return 详情; + }; + + renderStat = (value) => { + console.log(value); + return ( +

+ + {value.success} + + + {value.error} + + + {value.uncover} + +

+ ); + }; + + render() { + const dataSource = getData(); + const { current } = this.state; + + return ( +

状态:

+ +

+ + + + + + +

+ +

+ 详情 + + 申请权限 +

+ ); + }; + + render() { + const dataSource = getData(); + const { current } = this.state; + + return ( +

页面名称:

+ +

+ + + + + + + + + +

+ +

+ ); + } +} + +const styles = { + container: { + margin: '10px 0', + }, + tableHead: { + display: 'flex', + alignItems: 'center', + marginBottom: '20px', + }, + label: { + marginRight: '10px', + }, + link: { + margin: '0 5px', + color: 'rgba(49, 128, 253, 0.65)', + cursor: 'pointer', + textDecoration: 'none', + }, + separator: { + margin: '0 8px', + display: 'inline-block', + height: '12px', + width: '1px', + verticalAlign: 'middle', + background: '#e8e8e8', + }, + pagination: { + marginTop: '20px', + textAlign: 'right', + }, +}; diff --git a/src/pages/Task/components/TrackTab/TrackTab.jsx b/src/pages/Task/components/TrackTab/TrackTab.jsx new file mode 100644 index 000000000..295cd7b0a --- /dev/null +++ b/src/pages/Task/components/TrackTab/TrackTab.jsx @@ -0,0 +1,63 @@ +import React, { Component } from 'react'; +import { Tab, DatePicker } from '@icedesign/base'; +import IceContainer from '@icedesign/container'; +import Track from './Track'; +import Scheme from './Scheme'; + +const TabPane = Tab.TabPane; + +const tabs = [ + { tab: '埋点维度', key: 'track', content: }, + { tab: '方案维度', key: 'scheme', content: }, +]; + +function handleChange(key) { + console.log('change', key); +} + +function handleClick(key) { + console.log('click', key); +} + +export default class TrackTab extends Component { + static displayName = 'TrackTab'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + renderTabExtraContent = () => { + return ; + }; + + render() { + return ( + + + {tabs.map((item) => { + return ( + + {item.content} + + ); + })} + + + ); + } +} + +const styles = { + container: { + margin: '20px', + padding: '10px 0', + }, +}; diff --git a/src/pages/Task/components/TrackTab/index.js b/src/pages/Task/components/TrackTab/index.js new file mode 100644 index 000000000..be9bd6aa6 --- /dev/null +++ b/src/pages/Task/components/TrackTab/index.js @@ -0,0 +1,3 @@ +import TrackTab from './TrackTab'; + +export default TrackTab; diff --git a/src/pages/Task/components/TrackTable/TableFilter.jsx b/src/pages/Task/components/TrackTable/TableFilter.jsx new file mode 100644 index 000000000..5e649e1d6 --- /dev/null +++ b/src/pages/Task/components/TrackTable/TableFilter.jsx @@ -0,0 +1,136 @@ +/* eslint react/no-string-refs:0 */ +import React, { Component } from 'react'; +import { Grid, Input, Button, Select, DatePicker } from '@icedesign/base'; +import { + FormBinderWrapper as IceFormBinderWrapper, + FormBinder as IceFormBinder, + FormError as IceFormError, +} from '@icedesign/form-binder'; + +const { Row, Col } = Grid; + +export default class Filter extends Component { + static displayName = 'Filter'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + value: {}, + }; + } + + formChange = (value) => { + console.log('value', value); + this.setState({ + value, + }); + }; + + render() { + return ( + + + +

+ 页面名称： + + + +

+ +

+ + +

+ 事件 ID： + + + +

+ +

+ + +

+ 事件名称： + + + +

+ +

+ + +

+ 类型： + + + +

+ +

+ + +

+ 日期： + + + +

+ +

+ + + + ); + } +} + +const styles = { + container: { + margin: '20px', + padding: '0', + }, + title: { + margin: '0', + padding: '20px', + fonSize: '16px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + color: 'rgba(0,0,0,.85)', + fontWeight: '500', + borderBottom: '1px solid #eee', + }, + formRow: { + padding: '10px 20px', + }, + formItem: { + display: 'flex', + alignItems: 'center', + margin: '10px 0', + }, + formLabel: { + minWidth: '70px', + }, +}; diff --git a/src/pages/Task/components/TrackTable/TrackTable.jsx b/src/pages/Task/components/TrackTable/TrackTable.jsx new file mode 100644 index 000000000..59851ac1c --- /dev/null +++ b/src/pages/Task/components/TrackTable/TrackTable.jsx @@ -0,0 +1,473 @@ +import React, { Component } from 'react'; +import { Table, Pagination, Button, Loading, Dialog, Select, Form, Field, Input, Feedback, Grid} from '@icedesign/base'; +import IceContainer from '@icedesign/container'; +import FoundationSymbol from 'foundation-symbol'; +import { withRouter } from 'react-router-dom'; +import { + FormBinderWrapper as IceFormBinderWrapper, + FormBinder as IceFormBinder, +} from '@icedesign/form-binder'; +const { Row, Col } = Grid; +import '../../../../css/common.css'; +import {httpUrl, pageSize, isNull} from '../../../../common'; +const FormItem = Form.Item; +@withRouter +export default class TrackTable extends Component { + static displayName = 'TrackTable'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + loadingVisible: true, + current: 1, + total: 1, + dataSource: [], + visible: false, + defaultSelectValue: '0', + addData: [], + selectedRowKeys: [], + title: '', + registrar: -2, + extState: -2 + }; + this.field = new Field(this); + } + + componentDidMount () { + this.exceptionsList() + } + + + // 权限管理列表 + exceptionsList (pageNow, registrar, extState) { + let that = this; + if (isNull(pageNow)) { + pageNow = 1; + } + + if (isNull(registrar)) { + registrar = -2; + } + + if (isNull(extState)) { + extState = -2; + } + + httpUrl('GET', host + 'exceptions?page=' + pageNow + '&limit=' + pageSize + '&extState=' + extState + '®istrar=' + registrar, '','', res => { + var list = res.exceptions; + for (var i = 0; i < list.length; i++) { + list[i].key = i + 1; + } + that.setState({ + dataSource : list, + loadingVisible: false + }) + if (pageNow == 1) { + that.setState({ + total : res.total + }) + } + }, res => { + if(res == 'error') { + this.props.path.history.push("/login"); + } + }) + } + + handlePaginationChange = (current) => { + this.setState({ + current: current, + loadingVisible: true + }); + this.exceptionsList(current) + }; + + add () { + let that = this; + that.field.setValue('filePath', ''); + that.field.setValue('userType', ''); + this.setState({ + visible : true, + defaultSelectValue: '0', + title: '新增' + }) + } + + edit () { + let that = this; + var addData = this.state.addData; + if (isNull(addData)) { + Feedback.toast.error('请选择要编辑的项'); + return; + } + that.setState({ + visible: true, + title: '编辑', + defaultSelectValue: addData.filePermission + }) + that.field.setValue('filePath', addData.filePath); + that.field.setValue('userType', addData.userType); + } + + delete () { + let that = this; + var addData = this.state.addData; + if (isNull(addData)) { + Feedback.toast.error('请选择要删除的项'); + return; + } + Dialog.confirm({ + content: "您确定删除吗？", + onOk: (res) => { + var deports = [] + for (var i = 0; i < addData.length; i++) { + deports = deports.concat(addData[i].id) + } + var data = { + "id": deports + } + httpUrl('POST', host + 'exceptions', data,'', res => { + Feedback.toast.success('删除成功'); + that.setState({ + selectedRowKeys: [] + }) + that.exceptionsList(1, that.state.registrar, that.state.extState) + }, res => { + if(res == 'error') { + this.props.path.history.push("/login"); + } + }) + } + }); + + + } + + onSelect (value) { + this.setState({ + defaultSelectValue: value + }) + } + + + handleSubmit () { + var that = this; + this.field.validate((errors, values) => { + if (errors) { + console.log('Errors in form!!!'); + return; + } + + if(this.state.title == '新增') { + var data = { + "filePath": values.filePath, + "userType": values.userType, + "filePermission": that.state.defaultSelectValue + } + httpUrl('POST', host + 'admin/permission/add', data,'', res => { + Feedback.toast.success('添加成功'); + setTimeout(function () { + that.setState({ + visible: false, + selectedRowKeys: [] + }) + that.queryPermissionList() + },500) + }, res => { + if(res == 'error') { + this.props.path.history.push("/login"); + } + }) + } else { + var addData = this.state.addData + var data = { + 'id': addData.id, + "filePath": values.filePath, + "userType": values.userType, + "filePermission": that.state.defaultSelectValue + } + httpUrl('POST', host + 'admin/permission/update', data,'', res => { + Feedback.toast.success('修改成功'); + setTimeout(function () { + that.setState({ + visible: false, + selectedRowKeys: [] + }) + that.queryPermissionList() + },500) + }, res => { + if(res == 'error') { + this.props.path.history.push("/login"); + } + }) + } + }) + } + + onClose () { + this.setState({ + visible : false + }) + } + + // 查看详情 + detail (record) { + this.props.history.push("/MonitorDetail?groupId=" + record.groupId + '&unitId=' + record.unitId) + } + + // 选择异常情况 + registrarSelect (value) { + this.setState({ + registrar: value + }) + } + + // 选择异常状态 + extStateSelect (value) { + this.setState({ + extState: value + }) + } + + // 搜索 + search () { + this.exceptionsList(1, this.state.registrar, this.state.extState) + } + + filePermission = (value, index, record) => { + var html = ''; + if(record.registrar == '0') { + html = TxManager通知事务 + } else if(record.registrar== '1'){ + html = TxClient查询事务状态 + } else if(record.registrar== '2'){ + html = 事务发起方通知事务组 + } else if(record.registrar== '-1'){ + html = 未知 + } else if(record.registrar== '3'){ + html = TCC模式事务清理失败 + } + return html + } + + operation = (value, index, record) => { + var html = ''; + if(record.exState == '1') { + html = - + } else { + html = 详情 + } + return html + } + + exState = (value, index, record) => { + var html = ''; + if(record.exState == '0') { + html = + } else { + html = + } + return html + } + + handleRowSelection (ids, records) { + this.setState({ + selectedRowKeys: ids + }) + } + + handleRowSelect (selected, record, records) { + this.setState({ + addData: [record] + }) + } + + handleRowSelectAll (selected, record, records) { + this.setState({ + addData: record + }) + } + + render() { + const rowSelection = { + onChange: this.handleRowSelection.bind(this), + onSelect: this.handleRowSelect.bind(this), + onSelectAll: this.handleRowSelectAll.bind(this), + selectedRowKeys: this.state.selectedRowKeys + }; + const dataSource = this.state.dataSource; + const init = this.field.init; + const formItemLayout = { + labelCol: { + fixedSpan: 6, + }, + wrapperCol: { + span: 14, + }, + }; + return ( +

+ + + +

+ 异常情况 +

+ +

+ 异常状态 +

+ +

+ + +

异常记录列表

+ {/* + */} + +

+ +

+ + + + + + + + + + +

+ + +

+ ); + } +} + +const styles = { + container: { + margin: '0 20px', + padding: '0 0 20px', + }, + title: { + margin: '0', + padding: '10px 20px', + fonSize: '16px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + color: 'rgba(0,0,0,.85)', + fontWeight: '500', + borderBottom: '1px solid #ededed', + }, + link: { + margin: '0 5px', + color: 'rgba(49, 128, 253, 0.65)', + cursor: 'pointer', + textDecoration: 'none', + }, + separator: { + margin: '0 8px', + display: 'inline-block', + height: '12px', + width: '1px', + verticalAlign: 'middle', + background: '#e8e8e8', + }, + pagination: { + textAlign: 'right', + }, +}; diff --git a/src/pages/Task/components/TrackTable/index.js b/src/pages/Task/components/TrackTable/index.js new file mode 100644 index 000000000..e6e428e1f --- /dev/null +++ b/src/pages/Task/components/TrackTable/index.js @@ -0,0 +1,3 @@ +import TrackTable from './TrackTable'; + +export default TrackTable; diff --git a/src/pages/Task/index.js b/src/pages/Task/index.js new file mode 100644 index 000000000..6dc333ef8 --- /dev/null +++ b/src/pages/Task/index.js @@ -0,0 +1,3 @@ +import Task from './Task'; + +export default Task; diff --git a/src/pages/TxClient/Task.jsx b/src/pages/TxClient/Task.jsx new file mode 100644 index 000000000..8529a99ba --- /dev/null +++ b/src/pages/TxClient/Task.jsx @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; +import TrackTable from './components/TrackTable'; + +export default class Dashboard extends Component { + static displayName = 'Dashboard'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( +

+ +

+ ); + } +} diff --git a/src/pages/TxClient/components/BaseInfo/BaseInfo.jsx b/src/pages/TxClient/components/BaseInfo/BaseInfo.jsx new file mode 100644 index 000000000..54dfbe82f --- /dev/null +++ b/src/pages/TxClient/components/BaseInfo/BaseInfo.jsx @@ -0,0 +1,182 @@ +import React, { Component } from 'react'; + +import IceContainer from '@icedesign/container'; +import { Grid } from '@icedesign/base'; +import PieChart from './PieChart'; +import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend } from 'bizcharts'; +import { DataView } from '@antv/data-set'; +const { Row, Col } = Grid; + +export default class BaseInfo extends Component { + static displayName = 'BaseInfo'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + renderUserStatistics = () => { + const data = [ + { type: '等待链接', count: 151, date: '02-21' }, + { type: '关闭连接', count: 532, date: '02-21' }, + { type: '持久连接', count: 1834, date: '02-21' }, + + { type: '等待链接', count: 251, date: '02-22' }, + { type: '关闭连接', count: 732, date: '02-22' }, + { type: '持久连接', count: 2534, date: '02-22' }, + + { type: '等待链接', count: 311, date: '02-23' }, + { type: '关闭连接', count: 932, date: '02-23' }, + { type: '持久连接', count: 1234, date: '02-23' }, + + { type: '等待链接', count: 221, date: '02-24' }, + { type: '关闭连接', count: 632, date: '02-24' }, + { type: '持久连接', count: 2534, date: '02-24' }, + + { type: '等待链接', count: 121, date: '02-25' }, + { type: '关闭连接', count: 532, date: '02-25' }, + { type: '持久连接', count: 2114, date: '02-25' }, + + { type: '等待链接', count: 221, date: '02-26' }, + { type: '关闭连接', count: 632, date: '02-26' }, + { type: '持久连接', count: 2534, date: '02-26' }, + + { type: '等待链接', count: 311, date: '02-27' }, + { type: '关闭连接', count: 932, date: '02-27' }, + { type: '持久连接', count: 1234, date: '02-27' }, + ]; + const dv = new DataView() + .source(data) + .transform({ + type: 'fill-rows', + groupBy: ['type'], + orderBy: ['date'], + }) + .transform({ + type: 'impute', + field: 'count', + method: 'value', + value: 0, + }); + const cols = { + date: { + tickInterval: 10, + nice: false, + }, + count: { + // nice: false, + min: -500, + }, + }; + return ( + +

+ + + + + + + +

+ + ); + }; + + render() { + return ( + + + + {/*

应用版本详细信息

*/} + {this.renderUserStatistics()} + + + + +

内存使用率

+ +

+ + + + ); + } +} + +const styles = { + row: { + margin: '20px 10px', + }, + container: { + margin: '0', + padding: '0', + }, + title: { + margin: '0', + padding: '15px 20px', + fonSize: '16px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + color: 'rgba(0,0,0,.85)', + fontWeight: '500', + borderBottom: '1px solid #eee', + }, + summary: { + padding: '20px', + }, + item: { + height: '32px', + lineHeight: '32px', + }, + label: { + display: 'inline-block', + fontWeight: '500', + minWidth: '74px', + }, +}; diff --git a/src/pages/TxClient/components/BaseInfo/PieChart.jsx b/src/pages/TxClient/components/BaseInfo/PieChart.jsx new file mode 100644 index 000000000..a94340285 --- /dev/null +++ b/src/pages/TxClient/components/BaseInfo/PieChart.jsx @@ -0,0 +1,83 @@ +import React, { Component } from 'react'; +import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend } from 'bizcharts'; +import DataSet from '@antv/data-set'; + +export default class PieChart extends Component { + render() { + const { DataView } = DataSet; + const data = [ + { + item: 'JAVA', + count: 40, + }, + { + item: 'WEB', + count: 30, + }, + { + item: 'TOMCAT', + count: 17, + }, + { + item: 'REDIS', + count: 13, + } + ]; + const dv = new DataView(); + dv.source(data).transform({ + type: 'percent', + field: 'count', + dimension: 'item', + as: 'percent', + }); + const cols = { + percent: { + formatter: (val) => { + val = `${val * 100}%`; + return val; + }, + }, + }; + return ( + + + + + + { + percent = `${percent * 100}%`; + return { + name: item, + value: percent, + }; + }, + ]} + style={{ + lineWidth: 1, + stroke: '#fff', + }} + > + + + + ); + } +} diff --git a/src/pages/TxClient/components/BaseInfo/index.js b/src/pages/TxClient/components/BaseInfo/index.js new file mode 100644 index 000000000..67e9a8f14 --- /dev/null +++ b/src/pages/TxClient/components/BaseInfo/index.js @@ -0,0 +1,3 @@ +import BaseInfo from './BaseInfo'; + +export default BaseInfo; diff --git a/src/pages/TxClient/components/TabChart/BasicLine.jsx b/src/pages/TxClient/components/TabChart/BasicLine.jsx new file mode 100644 index 000000000..c14d9df6f --- /dev/null +++ b/src/pages/TxClient/components/TabChart/BasicLine.jsx @@ -0,0 +1,67 @@ +import React, { Component } from 'react'; +import { Chart, Axis, Geom, Tooltip } from 'bizcharts'; + +export default class BasicLine extends Component { + static displayName = 'BasicLine'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + render() { + // 参考：https://alibaba.github.io/BizCharts/ + // 数据源 + const data = [ + { year: '2011', value: 30 }, + { year: '2012', value: 40 }, + { year: '2013', value: 35 }, + { year: '2014', value: 50 }, + { year: '2015', value: 49 }, + { year: '2016', value: 60 }, + { year: '2017', value: 70 }, + { year: '2018', value: 90 }, + { year: '2019', value: 100 }, + ]; + + const cols = { + value: { min: 0 }, + year: { range: [0, 1] }, + }; + + return ( +

+ + + + + + + +

+ ); + } +} + +const styles = { + point: { + stroke: '#fff', + lineWidth: 1, + }, +}; diff --git a/src/pages/TxClient/components/TabChart/SeriesLine.jsx b/src/pages/TxClient/components/TabChart/SeriesLine.jsx new file mode 100644 index 000000000..0887ec129 --- /dev/null +++ b/src/pages/TxClient/components/TabChart/SeriesLine.jsx @@ -0,0 +1,90 @@ +import React, { Component } from 'react'; +import { Chart, Axis, Geom, Tooltip } from 'bizcharts'; +import { DataSet } from '@antv/data-set'; + +export default class SeriesLine extends Component { + static displayName = 'SeriesLine'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + render() { + // 参考：https://alibaba.github.io/BizCharts/ + // 数据源 + const data = [ + { month: 'Jan', '读取请求': 7.0, '持久连接': 20 ,'发送响应内容': 4, "关闭连接": 7.0 , "等待连接": 5.0 }, + { month: 'Feb', '读取数据': 6.9, '持久连接': 22 ,'发送响应内容': 20, "关闭连接": 7.0 , "等待连接": 7.0 }, + { month: 'Mar', '读取数据': 9.5, '持久连接': 24 ,'发送响应内容': 34, "关闭连接": 7.0 , "等待连接": 37.0 }, + { month: 'Apr', '读取数据': 14.5, '持久连接': 30 ,'发送响应内容': 46, "关闭连接": 7.0, "等待连接": 3.0 }, + { month: 'May', '读取数据': 18.4, '持久连接': 50 ,'发送响应内容': 26, "关闭连接": 7.0, "等待连接": 69.0 }, + { month: 'Jun', '读取数据': 21.5, '持久连接': 65,'发送响应内容': 12 , "关闭连接": 7.0 , "等待连接": 13.0 }, + { month: 'Jul', '读取数据': 25.2, '持久连接': 70,'发送响应内容': 79 , "关闭连接": 7.0 , "等待连接": 25.0 }, + { month: 'Aug', '读取数据': 26.5, '持久连接': 80,'发送响应内容': 46 , "关闭连接": 7.0 , "等待连接": 47.0 }, + { month: 'Sep', '读取数据': 23.3, '持久连接': 85 ,'发送响应内容': 20, "关闭连接": 7.0, "等待连接": 14.0 }, + { month: 'Oct', '读取数据': 18.3, '持久连接': 90 ,'发送响应内容': 25, "关闭连接": 7.0, "等待连接": 7.0 }, + { month: 'Nov', '读取数据': 13.9, '持久连接': 80 ,'发送响应内容': 20, "关闭连接": 7.0 , "等待连接": 9.0 }, + { month: 'Dec', '读取数据': 9.6, '持久连接': 70 ,'发送响应内容': 11, "关闭连接": 7.0, "等待连接": 7.0 }, + ]; + + // DataSet https://github.com/alibaba/BizCharts/blob/master/doc/tutorial/dataset.md#dataset + const ds = new DataSet(); + const dv = ds.createView().source(data); + dv.transform({ + type: 'fold', + fields: ['读取数据', '持久连接', '发送响应内容', '关闭连接', '等待连接'], + key: 'city', + value: 'temperature', + }); + + // 定义度量 + const cols = { + month: { + range: [0, 1], + }, + }; + + return ( +

+ + + `${val}` }} /> + + + + +

+ ); + } +} + +const styles = { + point: { + stroke: '#fff', + lineWidth: 1, + }, +}; diff --git a/src/pages/TxClient/components/TabChart/TabChart.jsx b/src/pages/TxClient/components/TabChart/TabChart.jsx new file mode 100644 index 000000000..a5821953c --- /dev/null +++ b/src/pages/TxClient/components/TabChart/TabChart.jsx @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import IceContainer from '@icedesign/container'; +import { Tab } from '@icedesign/base'; +import SeriesLine from './SeriesLine'; +import BasicLine from './BasicLine'; + +const TabPane = Tab.TabPane; + +export default class TabChart extends Component { + static displayName = 'TabChart'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + handleChange = (key) => { + console.log('change', key); + }; + + render() { + return ( +

+ + + + + + + +

+ ); + } +} + +const styles = { + container: { + marginBottom: '20px', + }, + card: { + padding: '0 20px', + }, +}; diff --git a/src/pages/TxClient/components/TabChart/index.js b/src/pages/TxClient/components/TabChart/index.js new file mode 100644 index 000000000..218126274 --- /dev/null +++ b/src/pages/TxClient/components/TabChart/index.js @@ -0,0 +1,3 @@ +import TabChart from './TabChart'; + +export default TabChart; diff --git a/src/pages/TxClient/components/TrackTab/Scheme.jsx b/src/pages/TxClient/components/TrackTab/Scheme.jsx new file mode 100644 index 000000000..657e83a57 --- /dev/null +++ b/src/pages/TxClient/components/TrackTab/Scheme.jsx @@ -0,0 +1,153 @@ +import React, { Component } from 'react'; +import { Checkbox, Table, Pagination } from '@icedesign/base'; + +const { Group: CheckboxGroup } = Checkbox; + +const getData = () => { + return Array.from({ length: 10 }).map(() => { + return { + schemeName: '手淘商品详情', + time: '2018-08-28 11:49:38', + leader: '淘小宝', + stat: { + success: '289', + error: '23', + uncover: '136', + }, + }; + }); +}; + +const checkboxOptions = [ + { + value: 'success', + label: '成功', + }, + { + value: 'error', + label: '错误', + }, + { + value: 'uncover', + label: '未覆盖', + }, +]; + +export default class TableFilter extends Component { + static displayName = 'TableFilter'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + current: 1, + }; + } + + handlePaginationChange = (current) => { + this.setState({ + current, + }); + }; + + onChange = (selectedItems) => { + console.log('onChange callback', selectedItems); + }; + + renderOper = () => { + return 详情; + }; + + renderStat = (value) => { + console.log(value); + return ( +

+ + {value.success} + + + {value.error} + + + {value.uncover} + +

+ ); + }; + + render() { + const dataSource = getData(); + const { current } = this.state; + + return ( +

状态:

+ +

+ + + + + + +

+ +

+ 详情 + + 申请权限 +

+ ); + }; + + render() { + const dataSource = getData(); + const { current } = this.state; + + return ( +

页面名称:

+ +

+ + + + + + + + + +

+ +

+ ); + } +} + +const styles = { + container: { + margin: '10px 0', + }, + tableHead: { + display: 'flex', + alignItems: 'center', + marginBottom: '20px', + }, + label: { + marginRight: '10px', + }, + link: { + margin: '0 5px', + color: 'rgba(49, 128, 253, 0.65)', + cursor: 'pointer', + textDecoration: 'none', + }, + separator: { + margin: '0 8px', + display: 'inline-block', + height: '12px', + width: '1px', + verticalAlign: 'middle', + background: '#e8e8e8', + }, + pagination: { + marginTop: '20px', + textAlign: 'right', + }, +}; diff --git a/src/pages/TxClient/components/TrackTab/TrackTab.jsx b/src/pages/TxClient/components/TrackTab/TrackTab.jsx new file mode 100644 index 000000000..295cd7b0a --- /dev/null +++ b/src/pages/TxClient/components/TrackTab/TrackTab.jsx @@ -0,0 +1,63 @@ +import React, { Component } from 'react'; +import { Tab, DatePicker } from '@icedesign/base'; +import IceContainer from '@icedesign/container'; +import Track from './Track'; +import Scheme from './Scheme'; + +const TabPane = Tab.TabPane; + +const tabs = [ + { tab: '埋点维度', key: 'track', content: }, + { tab: '方案维度', key: 'scheme', content: }, +]; + +function handleChange(key) { + console.log('change', key); +} + +function handleClick(key) { + console.log('click', key); +} + +export default class TrackTab extends Component { + static displayName = 'TrackTab'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + renderTabExtraContent = () => { + return ; + }; + + render() { + return ( + + + {tabs.map((item) => { + return ( + + {item.content} + + ); + })} + + + ); + } +} + +const styles = { + container: { + margin: '20px', + padding: '10px 0', + }, +}; diff --git a/src/pages/TxClient/components/TrackTab/index.js b/src/pages/TxClient/components/TrackTab/index.js new file mode 100644 index 000000000..be9bd6aa6 --- /dev/null +++ b/src/pages/TxClient/components/TrackTab/index.js @@ -0,0 +1,3 @@ +import TrackTab from './TrackTab'; + +export default TrackTab; diff --git a/src/pages/TxClient/components/TrackTable/TableFilter.jsx b/src/pages/TxClient/components/TrackTable/TableFilter.jsx new file mode 100644 index 000000000..5e649e1d6 --- /dev/null +++ b/src/pages/TxClient/components/TrackTable/TableFilter.jsx @@ -0,0 +1,136 @@ +/* eslint react/no-string-refs:0 */ +import React, { Component } from 'react'; +import { Grid, Input, Button, Select, DatePicker } from '@icedesign/base'; +import { + FormBinderWrapper as IceFormBinderWrapper, + FormBinder as IceFormBinder, + FormError as IceFormError, +} from '@icedesign/form-binder'; + +const { Row, Col } = Grid; + +export default class Filter extends Component { + static displayName = 'Filter'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + value: {}, + }; + } + + formChange = (value) => { + console.log('value', value); + this.setState({ + value, + }); + }; + + render() { + return ( + + + +

+ 页面名称： + + + +

+ +

+ + +

+ 事件 ID： + + + +

+ +

+ + +

+ 事件名称： + + + +

+ +

+ + +

+ 类型： + + + +

+ +

+ + +

+ 日期： + + + +

+ +

+ + + + ); + } +} + +const styles = { + container: { + margin: '20px', + padding: '0', + }, + title: { + margin: '0', + padding: '20px', + fonSize: '16px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + color: 'rgba(0,0,0,.85)', + fontWeight: '500', + borderBottom: '1px solid #eee', + }, + formRow: { + padding: '10px 20px', + }, + formItem: { + display: 'flex', + alignItems: 'center', + margin: '10px 0', + }, + formLabel: { + minWidth: '70px', + }, +}; diff --git a/src/pages/TxClient/components/TrackTable/TrackTable.jsx b/src/pages/TxClient/components/TrackTable/TrackTable.jsx new file mode 100644 index 000000000..67bbc683b --- /dev/null +++ b/src/pages/TxClient/components/TrackTable/TrackTable.jsx @@ -0,0 +1,405 @@ +import React, { Component } from 'react'; +import { Table, Pagination, Button, Loading, Dialog, Select, Form, Field, Input, Feedback} from '@icedesign/base'; +import IceContainer from '@icedesign/container'; +import FoundationSymbol from 'foundation-symbol'; +import { withRouter } from 'react-router-dom'; +import '../../../../css/common.css'; +import {httpUrl, pageSize, isNull} from '../../../../common'; +const FormItem = Form.Item; +@withRouter +export default class TrackTable extends Component { + static displayName = 'TrackTable'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = { + loadingVisible: true, + current: 1, + total: 1, + dataSource: [], + visible: false, + defaultSelectValue: '0', + addData: [], + selectedRowKeys: [], + title: '' + }; + this.field = new Field(this); + } + + componentDidMount () { + this.exceptionsList() + } + + + // 权限管理列表 + exceptionsList (pageNow) { + let that = this; + if (isNull(pageNow)) { + pageNow = 1; + } + + + httpUrl('GET', host + 'app-mods?page=' + pageNow + '&limit=' + pageSize, '','', res => { + console.log(res) + var list = res.appMods; + for (var i = 0; i < list.length; i++) { + list[i].key = i + 1; + } + that.setState({ + dataSource : list, + loadingVisible: false + }) + if (pageNow == 1) { + that.setState({ + total : res.total + }) + } + }, res => { + if(res == 'error') { + this.props.path.history.push("/login"); + } + }) + } + + handlePaginationChange = (current) => { + this.setState({ + current: current, + loadingVisible: true + }); + this.exceptionsList(current) + }; + + add () { + let that = this; + that.field.setValue('filePath', ''); + that.field.setValue('userType', ''); + this.setState({ + visible : true, + defaultSelectValue: '0', + title: '新增' + }) + } + + edit () { + let that = this; + var addData = this.state.addData; + if (isNull(addData)) { + Feedback.toast.error('请选择要编辑的项'); + return; + } + that.setState({ + visible: true, + title: '编辑', + defaultSelectValue: addData.filePermission + }) + that.field.setValue('filePath', addData.filePath); + that.field.setValue('userType', addData.userType); + } + + delete () { + let that = this; + var addData = this.state.addData; + if (isNull(addData)) { + Feedback.toast.error('请选择要删除的项'); + return; + } + Dialog.confirm({ + content: "您确定删除吗？", + onOk: (res) => { + + var data = { + "id": addData.id + } + + httpUrl('POST', host + 'admin/permission/delete', data,'', res => { + Feedback.toast.success('删除成功'); + setTimeout(function () { + that.setState({ + visible : false, + selectedRowKeys: [] + }) + that.queryPermissionList() + },500) + }, res => { + if(res == 'error') { + this.props.path.history.push("/login"); + } + }) + } + }); + + + } + + onSelect (value) { + this.setState({ + defaultSelectValue: value + }) + } + + + handleSubmit () { + var that = this; + this.field.validate((errors, values) => { + if (errors) { + console.log('Errors in form!!!'); + return; + } + + if(this.state.title == '新增') { + var data = { + "filePath": values.filePath, + "userType": values.userType, + "filePermission": that.state.defaultSelectValue + } + httpUrl('POST', host + 'admin/permission/add', data,'', res => { + Feedback.toast.success('添加成功'); + setTimeout(function () { + that.setState({ + visible: false, + selectedRowKeys: [] + }) + that.queryPermissionList() + },500) + }, res => { + if(res == 'error') { + this.props.path.history.push("/login"); + } + }) + } else { + var addData = this.state.addData + var data = { + 'id': addData.id, + "filePath": values.filePath, + "userType": values.userType, + "filePermission": that.state.defaultSelectValue + } + httpUrl('POST', host + 'admin/permission/update', data,'', res => { + Feedback.toast.success('修改成功'); + setTimeout(function () { + that.setState({ + visible: false, + selectedRowKeys: [] + }) + that.queryPermissionList() + },500) + }, res => { + if(res == 'error') { + this.props.path.history.push("/login"); + } + }) + } + }) + } + + onClose () { + this.setState({ + visible : false + }) + } + + // 查看详情 + detail (record) { + this.props.history.push("/MonitorDetail?groupId=" + record.groupId + '&unitId=' + record.unitId) + } + + + + filePermission = (value, index, record) => { + var html = ''; + if(record.registrar == '0') { + html = TxManager通知事务 + } else if(record.registrar== '1'){ + html = TxClient查询事务状态 + } else if(record.registrar== '2'){ + html = 事务发起方通知事务组 + } else if(record.registrar== '-1'){ + html = 未知 + } + return html + } + + operation = (value, index, record) => { + var html = ''; + if(record.exState == '1') { + html = - + } else { + html = 详情 + } + return html + } + + exState = (value, index, record) => { + var html = ''; + if(record.exState == '0') { + html = + } else { + html = + } + return html + } + + // 返回 + back () { + history.go(-1) + } + + handleRowSelection (ids, records) { + this.setState({ + selectedRowKeys: ids + }) + } + + handleRowSelect (selected, record, records) { + this.setState({ + addData: record + }) + } + + handleRowSelectAll (selected, record, records) { + + } + + render() { + const rowSelection = { + onChange: this.handleRowSelection.bind(this), + onSelect: this.handleRowSelect.bind(this), + onSelectAll: this.handleRowSelectAll.bind(this), + mode: 'single', + selectedRowKeys: this.state.selectedRowKeys + }; + const dataSource = this.state.dataSource; + const init = this.field.init; + const formItemLayout = { + labelCol: { + fixedSpan: 6, + }, + wrapperCol: { + span: 14, + }, + }; + return ( + + +

+ +

在线模块列表

+ {/*

+ + + +

*/} + +

+ + + + +

+ + + ); + } +} + +const styles = { + container: { + margin: '0 20px', + padding: '0 0 20px', + }, + title: { + margin: '0', + padding: '10px 20px', + fonSize: '16px', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + color: 'rgba(0,0,0,.85)', + fontWeight: '500', + borderBottom: '1px solid #ededed', + }, + link: { + margin: '0 5px', + color: 'rgba(49, 128, 253, 0.65)', + cursor: 'pointer', + textDecoration: 'none', + }, + separator: { + margin: '0 8px', + display: 'inline-block', + height: '12px', + width: '1px', + verticalAlign: 'middle', + background: '#e8e8e8', + }, + pagination: { + textAlign: 'right', + }, +}; diff --git a/src/pages/TxClient/components/TrackTable/index.js b/src/pages/TxClient/components/TrackTable/index.js new file mode 100644 index 000000000..e6e428e1f --- /dev/null +++ b/src/pages/TxClient/components/TrackTable/index.js @@ -0,0 +1,3 @@ +import TrackTable from './TrackTable'; + +export default TrackTable; diff --git a/src/pages/TxClient/index.js b/src/pages/TxClient/index.js new file mode 100644 index 000000000..6dc333ef8 --- /dev/null +++ b/src/pages/TxClient/index.js @@ -0,0 +1,3 @@ +import Task from './Task'; + +export default Task; diff --git a/src/pages/show/Task.jsx b/src/pages/show/Task.jsx new file mode 100644 index 000000000..3e6e1cd78 --- /dev/null +++ b/src/pages/show/Task.jsx @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; +export default class MonitorDetail extends Component { + static displayName = 'MonitorDetail'; + + static propTypes = {}; + + static defaultProps = {}; + + constructor(props) { + super(props); + this.state = {}; + } + + render() { + return ( +

+ 抱歉，你访问的页面不存在 +

系统日志列表

WAN链接可用性分布

构建器更新动态

最近一小时性能监控

所有节点

今日数据

平均可用性

技术支持

内存利用率设备分布

配置信息

+ 欢迎使用
{this.state.title} +

登录

应用版本详细信息

埋点统计

异常详情列表

应用版本详细信息

内存使用率

异常记录列表

应用版本详细信息

内存使用率

在线模块列表

+ 抱歉，你访问的页面不存在 +

平均可用性

技术支持

内存利用率设备分布

配置信息

+ 欢迎使用 {this.state.title} +

登录

应用版本详细信息

埋点统计

异常详情列表

应用版本详细信息

内存使用率

异常记录列表

应用版本详细信息

内存使用率

在线模块列表

+ 欢迎使用
{this.state.title} +