Skip to content

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

安全监管模块

parent c70e7589
Hide whitespace changes
Inline Side-by-side
Showing with 1020 additions and 35 deletions
src/consts/detailImages.js 0 → 100644
View file @ 2207aece
export default {
detaileImg: {
close: require('../assets/detailImage/close.png'),
save: require('../assets/detailImage/save.png'),
download: require('../assets/detailImage/download.png')
}
};
src/view/biz/regulate/bills/bills.scss 0 → 100644
View file @ 2207aece
@function vw($px) {
@return ($px/ 1920) * 100vw;
}
@function vh($px) {
@return ($px/ 1080) * 100vh;
}
.sefety-bg {
width: vw(1860);
height: vh(977);
margin: vh(19) auto;
.search-bgc {
height: vh(89);
background: rgba(0, 35, 51, 1);
color: white;
font-size: 0.2rem;
.top-search {
display: flex;
justify-content: center;
align-items: center;
padding-top: vh(25);
.manage-option {
margin-left: vw(80);
display: flex;
justify-content: space-between;
width: vw(400);
}
.finish-date {
margin-left: vw(40);
.ant-select-selection {
width: vw(120);
}
.ant-calendar-picker {
width: vw(128);
}
}
.ant-select-selection {
background-color: rgba(0, 185, 255, 0.3);
border-radius: 16px;
border: 0;
color: white;
font-size: 0.16rem;
}
.ant-input-search {
width: vw(290);
}
.ant-input {
background-color: rgba(0, 185, 255, 0.3);
border-radius: 16px;
font-size: 0.16rem;
color: white;
border: 0;
line-height: 16px;
}
}
}
.safety-table {
.ant-table-thead {
tr {
th {
font-size: 0.2rem !important;
font-weight: bold;
background: rgba(0, 185, 255, 0.38);
}
}
}
}
.detail-card {
padding-top: vh(46);
width: vw(1104);
margin: 0 auto;
.safety-detail {
display: flex;
justify-content: space-between;
font-size: 0.2rem;
flex-wrap: wrap;
padding-top: vh(40);
margin: 0 vw(60);
.safety-info {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: vw(16);
.safety-name {
font-weight: bold;
width: vw(120);
}
.safety-data {
background: linear-gradient(90deg,rgba(82,237,242,0.1) 0%,rgba(28,98,100,0.31) 100%);
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
width: vw(264);
height: vh(47);
line-height: vh(47);
margin-left: vw(43);
color: #00CACE;
padding-left: vw(30);
}
}
}
.table-style {
padding: vh(24) vw(60);
.ant-table-thead > tr >th{
font-size: 0.2rem;
font-weight: bold;
}
.ant-table-tbody > tr >td{
font-size: 0.2rem;
color: #00CACE;
}
}
.info-style {
display: flex;
padding: vh(37) vw(60);
font-size: 0.2rem;
font-weight: bold;
.info-left {
flex: 1;
}
.info-right {
flex: 4;
width: vw(739);
height: vh(299);
background:linear-gradient(90deg,rgba(82,237,242,0.1) 0%,rgba(28,98,100,0.31) 100%);
box-shadow:0px 3px 6px rgba(0,0,0,0.16);
padding: vh(11) vw(30);
color: #00CACE;
}
}
}
}
src/view/biz/regulate/bills/index.js
View file @ 2207aece
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input, Select, Table, Button, DatePicker } from 'amos-antd';
import CommonContainer from './../../../common/commonContainer';
import DetailContent from '../../../common/detailContent';
import CommonCard from '../../../common/commonCard/CommonCard';
import './bills.scss';
const Search = Input.Search;
const Option = Select.Option;
/**
* Bills
......@@ -10,7 +18,58 @@ import PropTypes from 'prop-types';
class Bills extends Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
detailVisible: false,
alertData: [
{ number: '1', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '2', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '3', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '4', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '5', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '6', type: '故障告警', device: '烟感探测器', description: '无信号传输' }
],
billData: [
{
number: '1',
number1: 'YHZL-2020-30',
number2: '复龙换流站',
number3: '1',
number4: '1',
number5: '1',
number6: '1',
number7: '周克宇',
number8: '13535666214',
number9: '2020 / 5 / 30',
number10: '待下发'
},
{
number: '2',
number1: 'YHZL-2020-30',
number2: '复龙换流站',
number3: '1',
number4: '1',
number5: '1',
number6: '1',
number7: '周克宇',
number8: '13535666214',
number9: '2020 / 5 / 30',
number10: '待下发'
},
{
number: '3',
number1: 'YHZL-2020-30',
number2: '复龙换流站',
number3: '1',
number4: '1',
number5: '1',
number6: '1',
number7: '周克宇',
number8: '13535666214',
number9: '2020 / 5 / 30',
number10: '待下发'
}
]
};
}
componentWillMount() {}
......@@ -19,8 +78,234 @@ class Bills extends Component {
componentWillUnmount() {}
handleDetail = (text) => {
console.log(text);
this.setState({ detailVisible: true });
}
handleClose = () => {
this.setState({ detailVisible: false });
}
render() {
return <div className="class-bills">单据管理</div>;
const { detailVisible } = this.state;
const columns = [
{
title: '序号',
dataIndex: 'number',
key: 'number'
},
{
title: '登记单号',
dataIndex: 'number1',
key: 'number'
},
{
title: '换流站',
dataIndex: 'number2',
key: 'number'
},
{
title: '需处理告警',
dataIndex: 'number3',
key: 'number'
},
{
title: '需关注风险',
dataIndex: 'number4',
key: 'number'
},
{
title: '需处理隐患',
dataIndex: 'number5',
key: 'number'
},
{
title: '需加强消防管理',
dataIndex: 'number6',
key: 'number'
},
{
title: '安全负责人',
dataIndex: 'number7',
key: 'number'
},
{
title: '联系人',
dataIndex: 'number8',
key: 'number'
},
{
title: '治理完成日期',
dataIndex: 'number9',
key: 'number'
},
{
title: '状态',
dataIndex: 'number10',
key: 'number'
},
{
title: '操作',
dataIndex: 'number11',
key: 'number',
render: (text, record) => {
return <Button onClick={() => this.handleDetail(text)}>编辑</Button>;
}
}
];
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
getCheckboxProps: record => ({
disabled: record.name === 'Disabled User' // Column configuration not to be checked
})
};
const columns1 = [
{
title: '序号',
dataIndex: 'number',
key: 'number'
},
{
title: '告警类型',
dataIndex: 'type',
key: 'type'
},
{
title: '设备名称',
dataIndex: 'device',
key: 'device'
},
{
title: '故障描述',
dataIndex: 'description',
key: 'description'
}
];
const safeInfo = [
{ title: '隐患登记单号', data: 'YHZL-2020-30' },
{ title: '隐患登记', data: 'YHZL-2020-31' },
{ title: '隐患登记单号', data: 'YHZL-2020-32' },
{ title: '隐患登记', data: 'YHZL-2020-33' },
{ title: '隐患登记单', data: 'YHZL-2020-34' },
{ title: '隐患登记单号', data: 'YHZL-2020-35' },
{ title: '隐患登记单号', data: 'YHZL-2020-36' },
{ title: '隐患登记单', data: 'YHZL-2020-37' },
{ title: '隐患登记单', data: 'YHZL-2020-38' },
{ title: '隐患登记单号', data: 'YHZL-2020-39' }
];
return (
<div className="sefety-bg">
<CommonContainer>
<div className="search-bgc">
<div className="top-search">
<Search
placeholder="搜索"
/>
<div className="finish-date">
<span>完成治理日期：</span>
<DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getStartDate(d)} />
&nbsp;-&nbsp;
<DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getEndDate(d)} />
</div>
<div className="finish-date">
<span>状态：</span>
<Select defaultValue="0">
<Option value="0">待下发</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
</div>
<div className="manage-option">
<div>删除</div>
<div>修改</div>
<div>下发</div>
<div>关闭整改</div>
</div>
</div>
</div>
<div className="safety-table">
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={this.state.billData}
/>
</div>
</CommonContainer>
<DetailContent
detailVisible={detailVisible}
handleClose={this.handleClose}
>
<div className="detail-card">
<CommonCard title="1.消防安全登记单基本信息">
<div className="safety-detail">
{safeInfo.map((item) => {
return (
<div className="safety-info" key={item.data}>
<div className="safety-name">{item.title}</div>
<div className="safety-data">{item.data}</div>
</div>
);
})}
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="2.告警信息">
<div className="table-style">
<Table
pagination={false}
columns={columns1}
dataSource={this.state.alertData}
/>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="3.风险信息">
<div className="table-style">
<Table
pagination={false}
columns={columns1}
dataSource={this.state.alertData}
/>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="4.隐患信息">
<div className="table-style">
<Table
pagination={false}
columns={columns1}
dataSource={this.state.alertData}
/>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="5.消防安全管理">
<div className="info-style">
<div className="info-left">消防安全管理</div>
<div className="info-right">按照消防管理要求，站内具备消防演练方案5个，今年完成培训次数0次，完成日常训练0次，站内消防器材保养3次，需加强消防安全培训及日常训练工作。</div>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="6.治理建议及意见">
<div className="info-style">
<div className="info-left">意见及建议</div>
<div className="info-right">请输入</div>
</div>
</CommonCard>
</div>
</DetailContent>
</div>
);
}
}
......
src/view/biz/regulate/firecontrol/index.js
View file @ 2207aece
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input, Select, Table, Button, DatePicker } from 'amos-antd';
import CommonContainer from './../../../common/commonContainer';
import DetailContent from '../../../common/detailContent';
import CommonCard from '../../../common/commonCard/CommonCard';
import '../bills/bills.scss';
const Search = Input.Search;
const Option = Select.Option;
/**
* firecontrol
......@@ -10,7 +19,58 @@ import PropTypes from 'prop-types';
class Firecontrol extends Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
detailVisible: false,
alertData: [
{ number: '1', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '2', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '3', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '4', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '5', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '6', type: '故障告警', device: '烟感探测器', description: '无信号传输' }
],
billData: [
{
number: '1',
number1: 'YHZL-2020-30',
number2: '复龙换流站',
number3: '1',
number4: '1',
number5: '1',
number6: '1',
number7: '周克宇',
number8: '13535666214',
number9: '2020 / 5 / 30',
number10: '待下发'
},
{
number: '2',
number1: 'YHZL-2020-30',
number2: '复龙换流站',
number3: '1',
number4: '1',
number5: '1',
number6: '1',
number7: '周克宇',
number8: '13535666214',
number9: '2020 / 5 / 30',
number10: '待下发'
},
{
number: '3',
number1: 'YHZL-2020-30',
number2: '复龙换流站',
number3: '1',
number4: '1',
number5: '1',
number6: '1',
number7: '周克宇',
number8: '13535666214',
number9: '2020 / 5 / 30',
number10: '待下发'
}
]
};
}
componentWillMount() {}
......@@ -19,8 +79,220 @@ class Firecontrol extends Component {
componentWillUnmount() {}
handleDetail = (text) => {
console.log(text);
this.setState({ detailVisible: true });
}
handleClose = () => {
this.setState({ detailVisible: false });
}
render() {
return <div>消防整改</div>;
const { detailVisible } = this.state;
const columns = [
{
title: '序号',
dataIndex: 'number',
key: 'number'
},
{
title: '登记单号',
dataIndex: 'number1',
key: 'number'
},
{
title: '换流站',
dataIndex: 'number2',
key: 'number'
},
{
title: '需处理告警',
dataIndex: 'number3',
key: 'number'
},
{
title: '需关注风险',
dataIndex: 'number4',
key: 'number'
},
{
title: '需处理隐患',
dataIndex: 'number5',
key: 'number'
},
{
title: '需加强消防管理',
dataIndex: 'number6',
key: 'number'
},
{
title: '安全负责人',
dataIndex: 'number7',
key: 'number'
},
{
title: '联系人',
dataIndex: 'number8',
key: 'number'
},
{
title: '治理完成日期',
dataIndex: 'number9',
key: 'number'
},
{
title: '状态',
dataIndex: 'number10',
key: 'number'
},
{
title: '操作',
dataIndex: 'number11',
key: 'number',
render: (text, record) => {
return <Button onClick={() => this.handleDetail(text)}>治理</Button>;
}
}
];
const columns1 = [
{
title: '序号',
dataIndex: 'number',
key: 'number'
},
{
title: '告警类型',
dataIndex: 'type',
key: 'type'
},
{
title: '设备名称',
dataIndex: 'device',
key: 'device'
},
{
title: '故障描述',
dataIndex: 'description',
key: 'description'
}
];
const safeInfo = [
{ title: '隐患登记单号', data: 'YHZL-2020-30' },
{ title: '隐患登记', data: 'YHZL-2020-31' },
{ title: '隐患登记单号', data: 'YHZL-2020-32' },
{ title: '隐患登记', data: 'YHZL-2020-33' },
{ title: '隐患登记单', data: 'YHZL-2020-34' },
{ title: '隐患登记单号', data: 'YHZL-2020-35' },
{ title: '隐患登记单号', data: 'YHZL-2020-36' },
{ title: '隐患登记单', data: 'YHZL-2020-37' },
{ title: '隐患登记单', data: 'YHZL-2020-38' },
{ title: '隐患登记单号', data: 'YHZL-2020-39' }
];
return (
<div className="sefety-bg">
<CommonContainer>
<div className="search-bgc">
<div className="top-search">
<Search
placeholder="搜索"
/>
<div className="finish-date">
<span>完成治理日期：</span>
<DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getStartDate(d)} />
&nbsp;-&nbsp;
<DatePicker format="YYYY-MM-DD" placeholder='年-月-日' onChange={(d) => this.getEndDate(d)} />
</div>
<div className="finish-date">
<span>状态：</span>
<Select defaultValue="0">
<Option value="0">待下发</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
</div>
</div>
</div>
<div className="safety-table">
<Table
columns={columns}
dataSource={this.state.billData}
/>
</div>
</CommonContainer>
<DetailContent
detailVisible={detailVisible}
handleClose={this.handleClose}
>
<div className="detail-card">
<CommonCard title="1.消防安全登记单基本信息">
<div className="safety-detail">
{safeInfo.map((item) => {
return (
<div className="safety-info" key={item.data}>
<div className="safety-name">{item.title}</div>
<div className="safety-data">{item.data}</div>
</div>
);
})}
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="2.告警信息">
<div className="table-style">
<Table
pagination={false}
columns={columns1}
dataSource={this.state.alertData}
/>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="3.风险信息">
<div className="table-style">
<Table
pagination={false}
columns={columns1}
dataSource={this.state.alertData}
/>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="4.隐患信息">
<div className="table-style">
<Table
pagination={false}
columns={columns1}
dataSource={this.state.alertData}
/>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="5.消防安全管理">
<div className="info-style">
<div className="info-left">消防安全管理</div>
<div className="info-right">按照消防管理要求，站内具备消防演练方案5个，今年完成培训次数0次，完成日常训练0次，站内消防器材保养3次，需加强消防安全培训及日常训练工作。</div>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="6.治理建议及意见">
<div className="info-style">
<div className="info-left">意见及建议</div>
<div className="info-right">请输入</div>
</div>
</CommonCard>
</div>
</DetailContent>
</div>
);
}
}
......
src/view/biz/regulate/supervise/index.js
View file @ 2207aece
......@@ -2,6 +2,8 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input, Select, Table, Button } from 'amos-antd';
import CommonContainer from './../../../common/commonContainer';
import DetailContent from '../../../common/detailContent';
import CommonCard from '../../../common/commonCard/CommonCard';
import './supervise.scss';
......@@ -37,7 +39,15 @@ class Supervise extends Component {
fireDisaster14: '0',
fireDisaster15: '0',
fireDisaster16: '0'
}]
}],
alertData: [
{ number: '1', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '2', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '3', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '4', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '5', type: '故障告警', device: '烟感探测器', description: '无信号传输' },
{ number: '6', type: '故障告警', device: '烟感探测器', description: '无信号传输' }
]
};
}
......@@ -52,6 +62,9 @@ class Supervise extends Component {
console.log(text);
this.setState({ detailVisible: true });
}
handleClose = () => {
this.setState({ detailVisible: false });
}
render() {
const { detailVisible } = this.state;
......@@ -183,6 +196,41 @@ class Supervise extends Component {
}
}
];
const columns1 = [
{
title: '序号',
dataIndex: 'number',
key: 'number'
},
{
title: '告警类型',
dataIndex: 'type',
key: 'type'
},
{
title: '设备名称',
dataIndex: 'device',
key: 'device'
},
{
title: '故障描述',
dataIndex: 'description',
key: 'description'
}
];
const safeInfo = [
{ title: '隐患登记单号', data: 'YHZL-2020-30' },
{ title: '隐患登记', data: 'YHZL-2020-31' },
{ title: '隐患登记单号', data: 'YHZL-2020-32' },
{ title: '隐患登记', data: 'YHZL-2020-33' },
{ title: '隐患登记单', data: 'YHZL-2020-34' },
{ title: '隐患登记单号', data: 'YHZL-2020-35' },
{ title: '隐患登记单号', data: 'YHZL-2020-36' },
{ title: '隐患登记单', data: 'YHZL-2020-37' },
{ title: '隐患登记单', data: 'YHZL-2020-38' },
{ title: '隐患登记单号', data: 'YHZL-2020-39' }
];
return (
<div className="sefety-bg">
<CommonContainer>
......@@ -211,15 +259,75 @@ class Supervise extends Component {
/>
</div>
</CommonContainer>
<div className="safe-detail" style={{ display: !detailVisible ? 'none' : 'block' }}>
<div className="detail-title">
<div>安全隐患登记单</div>
<div>
<div>保存</div>
<div>关闭</div>
</div>
<DetailContent
detailVisible={detailVisible}
handleClose={this.handleClose}
>
<div className="detail-card">
<CommonCard title="1.消防安全登记单基本信息">
<div className="safety-detail">
{safeInfo.map((item) => {
return (
<div className="safety-info" key={item.data}>
<div className="safety-name">{item.title}</div>
<div className="safety-data">{item.data}</div>
</div>
);
})}
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="2.告警信息">
<div className="table-style">
<Table
pagination={false}
columns={columns1}
dataSource={this.state.alertData}
/>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="3.风险信息">
<div className="table-style">
<Table
pagination={false}
columns={columns1}
dataSource={this.state.alertData}
/>
</div>
</CommonCard>
</div>
</div>
<div className="detail-card">
<CommonCard title="4.隐患信息">
<div className="table-style">
<Table
pagination={false}
columns={columns1}
dataSource={this.state.alertData}
/>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="5.消防安全管理">
<div className="info-style">
<div className="info-left">消防安全管理</div>
<div className="info-right">按照消防管理要求，站内具备消防演练方案5个，今年完成培训次数0次，完成日常训练0次，站内消防器材保养3次，需加强消防安全培训及日常训练工作。</div>
</div>
</CommonCard>
</div>
<div className="detail-card">
<CommonCard title="6.治理建议及意见">
<div className="info-style">
<div className="info-left">意见及建议</div>
<div className="info-right">请输入</div>
</div>
</CommonCard>
</div>
</DetailContent>
</div>
);
}
......
src/view/biz/regulate/supervise/supervise.scss
View file @ 2207aece
......@@ -63,25 +63,76 @@
}
}
.safe-detail {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
outline: 0;
-webkit-overflow-scrolling: touch;
background-color: white;
filter: alpha(opacity=60);
z-index: 9999;
.detail-title {
width: 100vw;
background-color: linear-gradient(90deg,rgba(82,237,242,0.1) 0%,rgba(28,98,100,0.31) 100%);
height: vh(42);
.detail-card {
padding-top: vh(46);
width: vw(1104);
margin: 0 auto;
.safety-detail {
display: flex;
justify-content: space-between;
font-size: 0.2rem;
flex-wrap: wrap;
padding-top: vh(40);
margin: 0 vw(60);
.safety-info {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: vw(16);
.safety-name {
font-weight: bold;
width: vw(120);
}
.safety-data {
background: linear-gradient(90deg,rgba(82,237,242,0.1) 0%,rgba(28,98,100,0.31) 100%);
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
width: vw(264);
height: vh(47);
line-height: vh(47);
margin-left: vw(43);
color: #00CACE;
padding-left: vw(30);
}
}
}
.table-style {
padding: vh(24) vw(60);
.ant-table-thead > tr >th{
font-size: 0.2rem;
font-weight: bold;
}
.ant-table-tbody > tr >td{
font-size: 0.2rem;
color: #00CACE;
}
}
.info-style {
display: flex;
padding: vh(37) vw(60);
font-size: 0.2rem;
font-weight: bold;
.info-left {
flex: 1;
}
.info-right {
flex: 4;
width: vw(739);
height: vh(299);
background:linear-gradient(90deg,rgba(82,237,242,0.1) 0%,rgba(28,98,100,0.31) 100%);
box-shadow:0px 3px 6px rgba(0,0,0,0.16);
padding: vh(11) vw(30);
color: #00CACE;
}
}
}
}
......
src/view/common/commonCard/index.scss
View file @ 2207aece
.common-card {
width: 95%;
height: 95%;
height: 95%;
.card-title {
display: flex;
......@@ -23,7 +23,7 @@
border-right: 0;
border-top: 0;
border-bottom: 1px solid rgb(0,0,0);
.title-shape {
background-color: transparent;
border-right: 1px solid rgba(95,255,253,1);
......@@ -32,13 +32,13 @@
height: 31px;
.title-text {
transform: skewX(-5deg);
font-size: 18px;
font-size: 0.18rem;
}
}
}
}
}
}
.card-content {
margin-top: -1px;
height: 100%;
......
src/view/common/detailContent/index.js 0 → 100644
View file @ 2207aece
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import detailImage from '../../../consts/detailImages';
import './index.scss';
class DetailContent extends Component {
constructor(props) {
super(props);
}
render() {
const { detailVisible, handleClose, children } = this.props;
return (
<div className="safe-detail" style={{ display: !detailVisible ? 'none' : 'block' }}>
<div className="detail-title">
<div className="title-text">
<div className="title-border">
安全隐患登记单
</div>
</div>
<div className="detail-option">
<div className="detail-item"><img src={detailImage.detaileImg.save} alt="" />保存</div>
<div className="detail-item"><img src={detailImage.detaileImg.download} alt="" />保存并下发</div>
<div className="detail-item" onClick={handleClose}><img src={detailImage.detaileImg.close} alt="" /></div>
</div>
</div>
{children}
</div>
);
}
}
DetailContent.propTypes = {
children: PropTypes.node,
detailVisible: PropTypes.bool,
handleClose: PropTypes.func
};
export default DetailContent;
src/view/common/detailContent/index.scss 0 → 100644
View file @ 2207aece
@function vw($px) {
@return ($px/ 1920) * 100vw;
}
@function vh($px) {
@return ($px/ 1080) * 100vh;
}
.safe-detail {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
outline: 0;
-webkit-overflow-scrolling: touch;
background: url('../../../assets/bg/biz-bg.png');
background-size: cover;
filter: alpha(opacity=60);
z-index: 999;
color: white;
padding-bottom: vh(20);
.detail-title {
width: 100vw;
background: linear-gradient(90deg,rgba(82,237,242,0.1) 0%,rgba(28,98,100,0.31) 100%);
height: vh(42);
display: flex;
justify-content: space-between;
margin-top: vh(11);
.title-text {
background: rgba(82,237,242,0.3);
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
transform: skewX(-20deg);
width: vw(257);
height: vh(42);
margin-left: vw(23);
font-size: 0.25rem;
text-align: center;
.title-border {
width: vw(180);
margin: 0 auto;
height: vh(42);
line-height: vh(42);
transform: skewX(20deg);
border-bottom: 2px solid #FFF700;
}
}
.detail-option {
text-align: center;
width: vw(499);
display: flex;
justify-content: space-between;
align-items: center;
height: vh(42);
line-height: vh(42);
font-size: 0.2rem;
.detail-item {
height: 100%;
padding: 2px;
img {
height: 100%;
margin-right: vw(10);
}
}
}
}
}
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