Skip to content

S
station-elec-manage-view
Commit 3dd53237 authored by 王海涛's avatar 王海涛
Browse files
Options

结构优化

parent 5ad1eb8b
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 880 deletions
src/view/contingencyPlan/index.jsx deleted 100644 → 0
View file @ 5ad1eb8b
import React from 'react';
import { Select, Input, Tree } from 'amos-antd';
import '../../styles/view/disaster/plan.scss';
import staticImg from './../../consts/image';
import { getPlanData } from '../../services/disasterApi';
const Search = Input.Search;
const Option = Select.Option;
const TreeNode = Tree.TreeNode;
/**
* 应急预案组件
*
* @class ContingencyPlan
* @extends {Component}
*/
class ContingencyPlan extends React.Component {
constructor(props) {
super(props);
this.state = {
type: '',
id: 0,
treeData: []
};
}
componentDidMount() {
this.fetchPlanData();
}
onSelect = (selectedKeys, info) => {
console.log('selected', selectedKeys, info);
this.setState({ id: selectedKeys[0] });
};
handleChange = (value) => {
console.log(`selected ${value}`);
this.setState({ type: value });
}
handleSearch = (value) => {
const { type } = this.state;
const payload = {
type,
keyword: value
};
console.log(payload);
}
fetchPlanData = () => {
getPlanData().then(res => {
console.log(res);
this.setState({ treeData: res.planData });
});
}
renderTreeNodes = (data) => {
return data.map((item) => {
if (item.children) {
return (
<TreeNode selectable={false} title={item.title} key={item.key}>
{this.renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode title={item.title} key={item.key} />;
});
}
render() {
const { id, treeData = [] } = this.state;
return (
<div>
<div className="layout">
<div className="lefts">
<div className="left-top">
<div className="date">
<span>类型：</span>
<Select defaultValue="1" onChange={this.handleChange}>
<Option value="1">应急预案</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled">Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
</div>
<div className="search">
<span>搜索：</span>
<Search
placeholder=""
style={{ width: '63.5%', margin: '0 4px' }}
onSearch={value => this.handleSearch(value)}
/>
</div>
</div>
<div className="scroll-box">
<div style={{ height: '680px', margin: '27px 0 0 31px' }} className="lefts-content">
<Tree showLine showIcon onSelect={this.onSelect}>
{this.renderTreeNodes(treeData)}
</Tree>
</div>
</div>
</div>
<div className="rights">
<div className="info-title">
<div style={{ background: 'rgba(0,0,0,0.57)', width: 188, zIndex: 999 }}>
<div className="title-bg">{id !== 0 ? '预案播放' : '预案同步'}</div>
</div>
</div>
<div className="right-content">
{id === 0 ?
<div className="history">
<div> <img src={staticImg.disasterImg.empty} alt="" /> </div>
<div className="desc">请选择一个预案</div>
</div>
:
<div style={{ margin: 18, height: '66vh' }}>
<img src={staticImg.disasterImg.people} alt="" width='100%' height='100%' />
</div>}
<div className="right-bottom">
<div className="plan" style={{ background: 'rgba(0,185,255,0.59)' }}>
<img src={staticImg.disasterImg.player} alt="" height='40' width='40' />
<div className="plan-text">播放</div>
</div>
<div className="plan">
<img src={staticImg.disasterImg.stops} alt="" height='40' width='40' />
<div className="plan-text">暂停</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default ContingencyPlan;
\ No newline at end of file
src/view/disasterSituation/DeviceInfos.js deleted 100644 → 0
View file @ 5ad1eb8b
import React, { Component } from 'react';
import PropTypes from 'prop-types';
/**
* 左侧设备信息组件
*
* @class DisasterInfo
* @extends {Component}
*/
class DeviceInfos extends Component {
render() {
const { deviceData = [] } = this.props;
return (
<div className="info-card">
<div className="info-item">
{
deviceData.map((item, index) =>
(<div className="item-detail" key={index}>
<div>{(item || {}).title}</div> <div className={index % 2 === 1 ? 'deco' : 'dec'}>{item.status}</div>
</div>)
)
}
</div>
</div>
);
}
}
DeviceInfos.propTypes = {
deviceData: PropTypes.array
};
export default DeviceInfos;
\ No newline at end of file
src/view/disasterSituation/DisasterContents.js deleted 100644 → 0
View file @ 5ad1eb8b
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import staticImg from './../../consts/image';
/**
* 灾情内容切换组件
*
* @class DisasterContents
* @extends {Component}
*/
class DisasterContents extends Component {
render() {
const { contentSwitch, handleChange } = this.props;
const ImgView = (props) => {
return (
<div style={{ margin: 18, height: '66vh' }}>
<img src={props.imgSrc} alt="" width='100%' height='100%' />
</div>
);
};
const ImgSwitch = (props) => {
return (
<div className={`plan ${props.contentSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
<img src={props.imgSrc} alt="" height='40' width='40' />
<div className="plan-text">{props.text}</div>
</div>
);
};
console.log(contentSwitch);
return (
<div>
{
contentSwitch === 0 ? <ImgView imgSrc={staticImg.disasterImg.people} /> : null
}
{
contentSwitch === 1 ? <ImgView imgSrc={staticImg.disasterImg.miao} /> : null
}
{
contentSwitch === 2 ?
<div className="history">
<div> <img src={staticImg.disasterImg.plays} alt="" width='110' height='110' /> </div>
<div className="desc">预案播放完毕记录已保存</div>
</div> : null
}
<div className="right-bottom">
<ImgSwitch contentSwitch={contentSwitch} imgSrc={staticImg.disasterImg.right} text='获取预案' handleChange={handleChange} flag={0} />
<ImgSwitch contentSwitch={contentSwitch} imgSrc={staticImg.disasterImg.left} text='关闭预案' handleChange={handleChange} flag={1} />
<ImgSwitch contentSwitch={contentSwitch} imgSrc={staticImg.disasterImg.middle} text='录制预案' handleChange={handleChange} flag={2} />
</div>
</div>
);
}
}
DisasterContents.propTypes = {
contentSwitch: PropTypes.number,
handleChange: PropTypes.func
};
export default DisasterContents;
\ No newline at end of file
src/view/disasterSituation/DisasterInfos.js deleted 100644 → 0
View file @ 5ad1eb8b
import React, { Component } from 'react';
import PropTypes from 'prop-types';
/**
* 左侧灾情信息组件
*
* @class DisasterInfo
* @extends {Component}
*/
class DisasterInfos extends Component {
render() {
const { disasterInfo = {} } = this.props;
const DisasterDetail = (props) => {
return (
<div className="item-detail">
<div>{props.title}</div> <div className={props.class}>{props.disasterInfo}</div>
</div>
);
};
return (
<div className="info-card">
<div className="info-item">
<DisasterDetail title='发生时间' disasterInfo={disasterInfo.time} class='dec' />
<DisasterDetail title='着火区域' disasterInfo={disasterInfo.area} class='deco' />
<DisasterDetail title='着火部分' disasterInfo={disasterInfo.part} class='dec' />
<DisasterDetail title='救援人员' disasterInfo={disasterInfo.people} class='deco' />
<DisasterDetail title='救援车辆' disasterInfo={disasterInfo.car} class='dec' />
<DisasterDetail title='应急预案' disasterInfo={disasterInfo.emergency} class='deco' />
</div>
</div>
);
}
}
DisasterInfos.propTypes = {
disasterInfo: PropTypes.object
};
export default DisasterInfos;
\ No newline at end of file
src/view/disasterSituation/ModelContents.js deleted 100644 → 0
View file @ 5ad1eb8b
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import staticImg from './../../consts/image';
/**
* 图纸内容切换组件
*
* @class ModelContents
* @extends {Component}
*/
class ModelContents extends Component {
render() {
const { modelSwitch, handleChangeModel } = this.props;
const ImgView = (props) => {
return (
<div style={{ margin: 18, height: '66vh' }}>
<img src={props.imgSrc} alt="" width='100%' height='100%' />
</div>
);
};
const ImgSwitch = (props) => {
return (
<div className={`three ${props.modelSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
<img src={props.imgSrc} alt="" height='40' width='40' />
<div className="plan-text">{props.text}</div>
</div>
);
};
console.log(modelSwitch);
return (
<div>
{
modelSwitch === 0 ? <ImgView imgSrc={staticImg.disasterImg.miao} /> : null
}
{
modelSwitch === 1 ? <ImgView imgSrc={staticImg.disasterImg.tu} /> : null
}
{
modelSwitch === 2 ? <ImgView imgSrc={staticImg.disasterImg.people} /> : null
}
<div className="right-bottom">
<ImgSwitch modelSwitch={modelSwitch} imgSrc={staticImg.disasterImg.d1} text='实体' handleChange={handleChangeModel} flag={0} />
<ImgSwitch modelSwitch={modelSwitch} imgSrc={staticImg.disasterImg.d2} text='线框' handleChange={handleChangeModel} flag={1} />
<ImgSwitch modelSwitch={modelSwitch} imgSrc={staticImg.disasterImg.d3} text='透明' handleChange={handleChangeModel} flag={2} />
</div>
</div>
);
}
}
ModelContents.propTypes = {
modelSwitch: PropTypes.number,
handleChangeModel: PropTypes.func
};
export default ModelContents;
\ No newline at end of file
src/view/disasterSituation/NoDisaster.js deleted 100644 → 0
View file @ 5ad1eb8b
import React, { Component } from 'react';
import staticImg from './../../consts/image';
/**
* 无灾情页面组件
*
* @class DisasterInfo
* @extends {Component}
*/
class NoDisaster extends Component {
render() {
return (
<div>
<div className="history">
<div> <img src={staticImg.disasterImg.empty} alt="" /> </div>
<div className="desc">暂无火灾</div>
</div>
<div className="right-bottom">
<div className="plan" style={{ background: 'rgba(0,185,255,0.59)' }}>
<img src={staticImg.disasterImg.right} alt="" height='40' width='40' />
<div className="plan-text">获取预案</div>
</div>
<div className="plan">
<img src={staticImg.disasterImg.left} alt="" height='40' width='40' />
<div className="plan-text">关闭预案</div>
</div>
<div className="plan">
<img src={staticImg.disasterImg.middle} alt="" height='40' width='40' />
<div className="plan-text">录制预案</div>
</div>
</div>
</div>
);
}
}
export default NoDisaster;
\ No newline at end of file
src/view/disasterSituation/PaperContents.js deleted 100644 → 0
View file @ 5ad1eb8b
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'amos-framework';
import staticImg from './../../consts/image';
/**
* 图纸内容切换组件
*
* @class PaperContents
* @extends {Component}
*/
class PaperContents extends Component {
render() {
const { paperSwitch, handleChangePaper, handleToLeft, handleToRight } = this.props;
const ImgView = (props) => {
return (
<div style={{ margin: 18, height: '66vh' }}>
<img src={props.imgSrc} alt="" width='100%' height='100%' />
</div>
);
};
const ImgSwitch = (props) => {
return (
<div className={`plan ${props.paperSwitch === props.flag ? 'bg-style' : null}`} onClick={() => props.handleChange(props.flag)}>
<img src={props.imgSrc} alt="" height='65' width='118' />
</div>
);
};
console.log(paperSwitch);
return (
<div>
{
paperSwitch === 0 ? <ImgView imgSrc={staticImg.disasterImg.tu} /> : null
}
{
paperSwitch === 1 ? <ImgView imgSrc={staticImg.disasterImg.miao} /> : null
}
{
paperSwitch === 2 ? <ImgView imgSrc={staticImg.disasterImg.people} /> : null
}
<div className="right-bottom">
<div className="to-left" onClick={() => handleToLeft(paperSwitch)}>
<Icon icon="left" style={{ fontSize: 40, color: 'rgba(82,222,252)', fontWeight: 'bolder' }} />
</div>
<ImgSwitch paperSwitch={paperSwitch} imgSrc={staticImg.disasterImg.tu} handleChange={handleChangePaper} flag={0} />
<ImgSwitch paperSwitch={paperSwitch} imgSrc={staticImg.disasterImg.tu} handleChange={handleChangePaper} flag={1} />
<ImgSwitch paperSwitch={paperSwitch} imgSrc={staticImg.disasterImg.tu} handleChange={handleChangePaper} flag={2} />
<div className="to-right" onClick={() => handleToRight(paperSwitch)}>
<Icon icon="right" style={{ fontSize: 40, color: 'rgba(82,222,252)', fontWeight: 'bolder' }} />
</div>
</div>
</div>
);
}
}
PaperContents.propTypes = {
paperSwitch: PropTypes.number,
handleChangePaper: PropTypes.func,
handleToLeft: PropTypes.func,
handleToRight: PropTypes.func
};
export default PaperContents;
\ No newline at end of file
src/view/disasterSituation/SwitchInfo.js deleted 100644 → 0
View file @ 5ad1eb8b
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import staticImg from './../../consts/image';
/**
* 左侧设备信息组件
*
* @class SwitchInfo
* @extends {Component}
*/
class SwitchInfo extends Component {
render() {
const { flag, switchFlag, contactInfo, deviceInfo } = this.props;
return (
<div>
<div className="info-titles">
<div className="text-bg">
<div className="title-bg">
{flag ? '现场联系人' : '消防设备信息'}
</div>
</div>
</div>
<div className="info-card">
{switchFlag ? <div>
{
flag ?
<div className="contacts">
{contactInfo.map((item) => {
return (
<div className="contact" key={item.phone}>
<div className="img_bg"><img src={staticImg.disasterImg.gfh} alt="" weight="80" height="80" /></div>
<div className="contact-detail">
<div className="job">{item.position}</div>
<div className="name">{item.name} {item.phone}</div>
</div>
</div>
);
})}
</div>
:
<div>
{deviceInfo.map((item,index) => {
return (
<div className="device" key={item.id}>
<div className="front" />
<div className="device-name">{item.name}</div>
<div className="device-des">{item.value}</div>
</div>
);
})}
</div>
}
</div> :
<div className="contacts">
{contactInfo.map((item, index) => {
return (
<div className="contact" key={item.phone}>
<div className="img_bg" />
<div className="contact-detail">
<div className="job" />
<div className="name" />
</div>
</div>
);
})}
</div>
}
</div>
</div>
);
}
}
SwitchInfo.propTypes = {
flag: PropTypes.bool,
switchFlag: PropTypes.bool,
contactInfo: PropTypes.array,
deviceInfo: PropTypes.array
};
export default SwitchInfo;
\ No newline at end of file
src/view/disasterSituation/index.js deleted 100644 → 0
View file @ 5ad1eb8b
import React from 'react';
import { Tabs } from 'amos-framework';
import './../../styles/view/disaster/index.scss';
import staticImg from './../../consts/image';
import { getDisasterInfo, getDeviceInfo, getContectInfo, getDeviceDetail } from '../../services/disasterApi';
import NoDisaster from './NoDisaster';
import DisasterInfos from './DisasterInfos';
import DeviceInfos from './DeviceInfos';
import SwitchInfo from './SwitchInfo';
import DisasterContents from './DisasterContents';
import PaperContents from './PaperContents';
import ModelContents from './ModelContents';
const { TabList, Tab, TabPanel } = Tabs;
/**
* 灾情实况组件主界面
*
* @class DisasterSituation
* @extends {Component}
*/
class DisasterSituation extends React.Component {
constructor(props) {
super(props);
this.state = {
// 控制左侧菜单切换
flag: true,
switchFlag: true,
// 灾情信息数据
disasterInfo: {},
// 联系人数据
contactInfo: [],
// 设备数据
deviceInfo: [],
deviceData: [],
contentSwitch: 0,
paperSwitch: 0,
modelSwitch: 0
};
}
componentDidMount() {
this.fetchDisasterData();
this.fetchContactData();
this.fetchDeviceData();
this.fetchDeviceDetailData();
}
fetchDisasterData = () => {
getDisasterInfo().then(res => {
console.log(res);
this.setState({ disasterInfo: res });
}).catch((err) => {
console.log('请求失败');
});
}
fetchDeviceData = () => {
getDeviceInfo().then(res => {
console.log(res);
this.setState({ deviceData: res.deviceInfo });
});
}
fetchContactData = () => {
getContectInfo().then(res => {
console.log(res);
this.setState({ contactInfo: res.contactInfo });
});
}
fetchDeviceDetailData = () => {
getDeviceDetail().then(res => {
console.log(res);
this.setState({ deviceInfo: res.detailInfo });
});
}
selectDisaster = () => {
this.setState({ flag: true });
}
selectDevice = () => {
this.setState({ flag: false });
}
handleSwitch = () => {
this.setState({
switchFlag: !this.state.switchFlag,
flag: true,
disasterInfo: {},
deviceData: []
}, () => {
if (this.state.switchFlag) {
this.fetchDisasterData();
this.fetchContactData();
this.fetchDeviceData();
this.fetchDeviceDetailData();
}
});
}
handleChange = (flag) => {
this.setState({ contentSwitch: flag });
}
handleChangePaper = (flag) => {
this.setState({ paperSwitch: flag });
}
handleChangeModel = (flag) => {
this.setState({ modelSwitch: flag });
}
handleToLeft = (flag) => {
flag = flag - 1;
if ( flag < 0 ) { flag = 2; }
this.setState({ paperSwitch: flag });
}
handleToRight = (flag) => {
flag = flag + 1;
if ( flag > 2 ) { flag = 0; }
this.setState({ paperSwitch: flag });
}
render() {
const { flag, switchFlag, disasterInfo = {}, contactInfo = [], deviceInfo = [], deviceData = [], contentSwitch, paperSwitch, modelSwitch } = this.state;
return (
<div>
<div className="layout">
<div className="left">
<div className="title">
<div className="current">当前灾情</div>
<div className="current-name">{switchFlag ? '伊克昭换流站火灾' : '暂无火灾'}</div>
<div className="switch" onClick={this.handleSwitch}>
<img src={staticImg.disasterImg.switchs} alt="" width='40' height='40' />
</div>
</div>
<Tabs closeAnimate>
<TabList style={{ border: 'none' }}>
<Tab onClick={this.selectDisaster}>灾情信息</Tab>
<Tab onClick={this.selectDevice}>设备信息</Tab>
</TabList>
<div className="info">
<TabPanel>
<DisasterInfos disasterInfo={disasterInfo} />
</TabPanel>
<TabPanel>
<DeviceInfos deviceData={deviceData} />
</TabPanel>
</div>
<div className="info">
<SwitchInfo
flag={flag}
switchFlag={switchFlag}
contactInfo={contactInfo}
deviceInfo={deviceInfo}
/>
</div>
</Tabs>
</div>
<div className="right-view">
<Tabs closeAnimate>
<TabList>
<Tab>灾情信息</Tab>
<Tab>图纸集合</Tab>
{!flag ? <Tab>沙盘模型</Tab> : null}
<Tab>视频会商</Tab>
<Tab>现场视频</Tab>
</TabList>
<div className="right-container">
<div className="right-content">
{switchFlag ?
<div>
<TabPanel>
<DisasterContents contentSwitch={contentSwitch} handleChange={this.handleChange} />
</TabPanel>
<TabPanel>
<PaperContents
paperSwitch={paperSwitch}
handleChangePaper={this.handleChangePaper}
handleToLeft={this.handleToLeft}
handleToRight={this.handleToRight}
/>
</TabPanel>
<TabPanel>
{!flag ? <ModelContents modelSwitch={modelSwitch} handleChangeModel={this.handleChangeModel} /> : null}
</TabPanel>
</div> :
<NoDisaster />
}
</div>
</div>
</Tabs>
</div>
</div>
</div>
);
}
}
export default DisasterSituation;
\ No newline at end of file
src/view/historicalDisaster/index.jsx deleted 100644 → 0
View file @ 5ad1eb8b
import React from 'react';
import { DatePicker, Input } from 'amos-antd';
import { Icon } from 'amos-framework';
import '../../styles/view/disaster/history.scss';
import staticImg from './../../consts/image';
import { getDisasterRecord } from '../../services/disasterApi';
const Search = Input.Search;
/**
* 历史灾情组件
*
* @class HistoricalDisaster
* @extends {Component}
*/
class HistoricalDisaster extends React.Component {
constructor(props) {
super(props);
this.state = {
stratTime: '',
endTime: '',
id: 0,
disasterRecord: []
};
}
componentDidMount() {
this.fetchDisasterRecordData();
}
getStartDate = (d) => {
console.log(d);
this.setState({ stratTime: d });
}
getEndDate = (d) => {
console.log(d);
this.setState({ endTime: d });
}
fetchDisasterRecordData = () => {
getDisasterRecord().then(res => {
console.log(res);
this.setState({ disasterRecord: res.disasterRecord });
});
}
handleSearch = (value) => {
const { stratTime, endTime } = this.state;
const payload = {
stratTime,
endTime,
keyword: value
};
console.log(payload);
}
render() {
const { id, disasterRecord = [] } = this.state;
return (
<div>
<div className="layout">
<div className="lefts">
<div className="left-top">
<div className="date">
<span>日期：</span>
<DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getStartDate(d)} />
-
<DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getEndDate(d)} />
</div>
<div className="search">
<span>搜索：</span>
<Search
placeholder=""
style={{ width: '63.5%', margin: '0 4px' }}
onSearch={value => this.handleSearch(value)}
/>
</div>
</div>
<div className="scroll-box">
<div style={{ height: '72vh' }} className="lefts-content">
{disasterRecord.map((item) => {
return (
<div key={item.id} className="items" onClick={() => this.setState({ id: item.id })}>
<Icon icon="video-camera" style={{ fontSize: 20,color: '#59F0FB',marginLeft: 9 }} /> { item.name }
<span className="items-date"> {`(${item.date})`}</span>
</div>
);
})}
</div>
</div>
</div>
<div className="rights">
<div className="info-title">
<div style={{ background: 'rgba(0,0,0,0.57)', width: 188, zIndex: 999 }}>
<div className="title-bg">{id !== 0 ? '预案播放' : '预案同步'}</div>
</div>
</div>
<div className="right-content">
{id === 0 ?
<div className="history">
<div> <img src={staticImg.disasterImg.empty} alt="" /> </div>
<div className="desc">请选择历史灾情</div>
</div>
:
<div style={{ margin: 18, height: '66vh' }}>
<img src={staticImg.disasterImg.people} alt="" width='100%' height='100%' />
</div>}
<div className="right-bottom">
<div className="plan" style={{ background: 'rgba(0,185,255,0.59)' }}>
<img src={staticImg.disasterImg.player} alt="" height='40' width='40' />
<div className="plan-text">播放</div>
</div>
<div className="plan">
<img src={staticImg.disasterImg.stops} alt="" height='40' width='40' />
<div className="plan-text">暂停</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default HistoricalDisaster;
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment