You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
346 lines
9.2 KiB
346 lines
9.2 KiB
import { Link, useModel } from 'umi';
|
|
import { Card, Col, Row, Statistic, Tree, Modal } from 'antd';
|
|
import { FormattedMessage, formatMessage, } from 'umi';
|
|
import React, { Component } from 'react';
|
|
import { PoweroffOutlined } from '@ant-design/icons';
|
|
import { Dispatch, Action } from 'redux';
|
|
import { connect } from 'dva';
|
|
import { StateType } from '../models/model';
|
|
import style from './style.less'
|
|
|
|
|
|
|
|
// export default function(props) {
|
|
// alert('join')
|
|
// const { id } = useModel('@@qiankunStateFromMaster') || {};
|
|
// alert(id)
|
|
// // const { id } = props;
|
|
// return (
|
|
// <div>
|
|
// <h1>Dashboard 2#</h1>
|
|
// <div>参数传递：</div>
|
|
// <div>{id}</div>
|
|
// </div>
|
|
// );
|
|
// }
|
|
|
|
|
|
|
|
const { confirm } = Modal;
|
|
|
|
interface ClassInfoComProps {
|
|
dashboardAndmonitor: StateType;
|
|
|
|
loading: boolean;
|
|
}
|
|
|
|
interface ClassInfoComState {
|
|
|
|
}
|
|
|
|
class ClassInfoCom extends Component<ClassInfoComProps,ClassInfoComState> {
|
|
|
|
|
|
state:ClassInfoComState = {
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
debugger
|
|
|
|
// const { dispatch } = this.props;
|
|
|
|
// console.log(this.props.id,'ididididdi')
|
|
// dispatch({
|
|
// type: 'dashboardAndmonitor/getClassInfo',
|
|
// payload: {
|
|
// number: this.props.id
|
|
// },
|
|
|
|
// })
|
|
}
|
|
|
|
getStatusDevice(data:any){
|
|
let dom:any = [];
|
|
data.map((item1:any)=>{
|
|
if(item1.key == "Light"){
|
|
dom.push(
|
|
<p className={style.sensingValue}>{`${item1.name}: ${item1.value}${item1.unit}`}</p>
|
|
)
|
|
}
|
|
|
|
if(item1.key == "Warning"){
|
|
dom.push(
|
|
<p className={style.sensingValue}>{`${item1.name}: ${item1.value}`}</p>
|
|
)
|
|
}
|
|
|
|
|
|
|
|
})
|
|
|
|
return dom
|
|
}
|
|
|
|
|
|
getStatusDeviceHum(data:any){
|
|
let dom:any = [];
|
|
data.map((item1:any)=>{
|
|
if(item1.key == "Temperature"){
|
|
dom.push(
|
|
<p className={style.sensingValue}>{`${item1.name}: ${item1.description} ${item1.value}${item1.unit}`}</p>
|
|
)
|
|
}
|
|
|
|
if(item1.key == "Humidity"){
|
|
dom.push(
|
|
<p className={style.sensingValue}>{`${item1.name}: ${item1.description} ${item1.value}${item1.unit}`}</p>
|
|
)
|
|
}
|
|
|
|
if(item1.key == "Warning"){
|
|
dom.push(
|
|
<p className={style.sensingValue}>{`${item1.name}: ${item1.value}`}</p>
|
|
)
|
|
}
|
|
|
|
})
|
|
|
|
return dom
|
|
}
|
|
|
|
//获取传感设备列表
|
|
getSensingList = () => {
|
|
let dom:any = [];
|
|
|
|
if(this.props.dashboardAndmonitor.classInfo.devices){
|
|
this.props.dashboardAndmonitor.classInfo.devices.map((item:any)=>{
|
|
if(item.product.number == 'fbee:0106:01'){ //光强传感器
|
|
dom.push(
|
|
<div className={style.sensingItem}>
|
|
<img src='../images/light.svg' className={style.sensingImg}/>
|
|
{this.getStatusDevice(item.data)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if(item.product.number == 'fbee:0302:01'){ //温湿度传感器
|
|
dom.push(
|
|
<div className={style.sensingItem}>
|
|
<img src='../images/humiture.svg' className={style.sensingImg}/>
|
|
{this.getStatusDeviceHum(item.data)}
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
if(item.product.number == 'fbee:0402:0d'){ //人体感应器
|
|
dom.push(
|
|
<div className={style.sensingItem}>
|
|
<img src='../images/person.svg' className={style.sensingImg}/>
|
|
<p className={style.sensingValue}>{`${item.data[0].name}: ${item.data[0].value}`}</p>
|
|
</div>
|
|
)
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
return dom;
|
|
}
|
|
|
|
|
|
//开关设备方法
|
|
handleDevices = (data:any) => {
|
|
const { dispatch } = this.props;
|
|
let status = this.getDevicesOn(data.data)
|
|
|
|
dispatch({
|
|
type: 'dashboardAndmonitor/exec',
|
|
payload: {connectionId: window['connectionId'], number:data.number, method:status == '开' ? '/Switch/Off' : '/Switch/On'}
|
|
});
|
|
}
|
|
|
|
//获取设备开关状态
|
|
getDevicesOn = (data:any) => {
|
|
let status = "";
|
|
|
|
data.map((item:any)=>{
|
|
if(item.key == 'State'){
|
|
status = item.value
|
|
}
|
|
})
|
|
|
|
return status
|
|
}
|
|
|
|
//获取设备列表
|
|
getEquList = () => {
|
|
let dom:any = [];
|
|
|
|
if(this.props.dashboardAndmonitor.classInfo.devices){
|
|
this.props.dashboardAndmonitor.classInfo.devices.map((item:any)=>{
|
|
|
|
if(item.product.number == 'fbee:0002:01'){ //一路开关
|
|
dom.push(
|
|
<Card className={style.equItem} bordered={true}>
|
|
<div className={style.equItemTop}>
|
|
{`${item.displayName}`}
|
|
</div>
|
|
<div className={style.equContent}>
|
|
<img src='/images/switch1.svg' className={style.equImgs}/>
|
|
<PoweroffOutlined style={{color:this.getDevicesOn(item.data) == "开" ? '#00DB00' : '#FF0000',fontSize:'1.8rem',marginTop:'0.7rem',cursor:'pointer'}}
|
|
onClick={() => this.handleDevices(item)}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)
|
|
|
|
}
|
|
|
|
if(item.product.number == 'fbee:0009:01'){ //插座
|
|
dom.push(
|
|
<Card className={style.equItem} bordered={true}>
|
|
<div className={style.equItemTop}>
|
|
{`${item.displayName}`}
|
|
</div>
|
|
<div className={style.equContent}>
|
|
<img src='/images/socket.svg' className={style.equImgs}/>
|
|
<PoweroffOutlined style={{color:this.getDevicesOn(item.data) == "开" ? '#00DB00' : '#FF0000',fontSize:'1.8rem',marginTop:'0.7rem',cursor:'pointer'}}
|
|
onClick={() => this.handleDevices(item)}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)
|
|
|
|
}
|
|
|
|
if(item.product.number == 'fbee:0051:01'){ //智能插座
|
|
dom.push(
|
|
<Card className={style.equItem} bordered={true}>
|
|
<div className={style.equItemTop}>
|
|
{`${item.displayName}`}
|
|
</div>
|
|
<div className={style.equContent}>
|
|
<img src='/images/socket.svg' className={style.equImgs}/>
|
|
<PoweroffOutlined style={{color:this.getDevicesOn(item.data) == "开" ? '#00DB00' : '#FF0000',fontSize:'1.8rem',marginTop:'0.7rem',cursor:'pointer'}}
|
|
onClick={() => this.handleDevices(item)}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)
|
|
|
|
}
|
|
|
|
if(item.product.number == 'fbee:000a:01'){ //门锁
|
|
dom.push(
|
|
<Card className={style.equItem} bordered={true}>
|
|
<div className={style.equItemTop}>
|
|
{`${item.displayName}`}
|
|
</div>
|
|
<div className={style.equContent}>
|
|
<img src='/images/doors.svg' className={style.equImgs}/>
|
|
<PoweroffOutlined style={{color:this.getDevicesOn(item.data) == "开" ? '#00DB00' : '#FF0000',fontSize:'1.8rem',marginTop:'0.7rem',cursor:'pointer'}}
|
|
onClick={() => this.handleDevices(item)}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)
|
|
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
return dom;
|
|
}
|
|
|
|
//场景操作方法
|
|
handleScenes = (data:any) => {
|
|
const { dispatch } = this.props;
|
|
|
|
|
|
dispatch({
|
|
type: 'dashboardAndmonitor/execScene',
|
|
payload: '"' + data.id + '"'
|
|
});
|
|
}
|
|
|
|
//获取场景操作列表
|
|
getOperInfoList = () => {
|
|
let dom:any = [];
|
|
if( this.props.dashboardAndmonitor.classInfo.scenes){
|
|
this.props.dashboardAndmonitor.classInfo.scenes.map((item:any)=>{
|
|
dom.push(
|
|
<div className={style.sensingItem} style={{minHeight:'5rem',cursor:'pointer'}} title={item.name}>
|
|
<img src='../images/button.svg' className={style.sensingImg} onClick={()=>this.handleScenes(item)}/>
|
|
<p className={style.sensingValue}>{item.name}</p>
|
|
</div>
|
|
)
|
|
})
|
|
}
|
|
|
|
|
|
return dom;
|
|
}
|
|
|
|
render() {
|
|
debugger
|
|
alert('join')
|
|
console.log(this.props.dashboardAndmonitor.classInfo)
|
|
return (
|
|
<div style={{width:'100%'}}>
|
|
<Card bordered={true}>
|
|
<Row className={style.operSpanStyle}>
|
|
传感设备
|
|
</Row>
|
|
<Row className={style.operSensing}>
|
|
{this.getSensingList()}
|
|
</Row>
|
|
</Card>
|
|
|
|
<Card bordered={true} style={{marginTop:'1rem'}}>
|
|
<Row className={style.operSpanStyle}>
|
|
场景操作
|
|
</Row>
|
|
<Row className={style.operSensing}>
|
|
{this.getOperInfoList()}
|
|
</Row>
|
|
</Card>
|
|
|
|
<Card bordered={true} style={{marginTop:'1rem'}}>
|
|
<Row className={style.operSpanStyle}>
|
|
设备
|
|
</Row>
|
|
</Card>
|
|
|
|
<Row className={style.equipmentList}>
|
|
{this.getEquList()}
|
|
</Row>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(
|
|
({
|
|
dashboardAndmonitor,
|
|
loading,
|
|
}: {
|
|
dashboardAndmonitor: StateType;
|
|
loading: {
|
|
models: { [key: string]: boolean };
|
|
};
|
|
}) => ({
|
|
dashboardAndmonitor,
|
|
loading: loading.models.dashboardAndmonitor,
|
|
}),
|
|
)(ClassInfoCom);
|