Compare commits
20 Commits
5a06e35d94
...
6ca46c43ae
| Author | SHA1 | Date |
|---|---|---|
wangyunfei
|
6ca46c43ae | 1 month ago |
|
wangyunfei
|
3ba0223f85 | 1 month ago |
|
wangyunfei
|
260445d936 | 1 month ago |
|
wangyunfei
|
3edb0804ae | 1 month ago |
|
wangyunfei
|
44f658e032 | 1 month ago |
|
wangyunfei
|
653a9dac0b | 1 month ago |
|
wangyunfei
|
4d91bf0039 | 1 month ago |
|
wangyunfei
|
bb60fcc834 | 1 month ago |
|
wangyunfei
|
01c7b3694d | 1 month ago |
|
wangyunfei
|
868d62b4d5 | 1 month ago |
|
wangyunfei
|
64ca98f4e1 | 1 month ago |
|
wangyunfei
|
0ca0c0d490 | 1 month ago |
|
wangyunfei
|
e99dce364a | 1 month ago |
|
wangyunfei
|
2b91701228 | 1 month ago |
|
wangyunfei
|
82b1d1d7bf | 1 month ago |
|
wangyunfei
|
3b41e0031f | 1 month ago |
|
wangyunfei
|
c0141e56cf | 1 month ago |
|
wangyunfei
|
280b691256 | 1 month ago |
|
wangyunfei
|
09999716dc | 1 month ago |
|
wangyunfei
|
f243a9d7de | 1 month ago |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 371 B |
Binary file not shown.
|
After Width: | Height: | Size: 485 B |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
@ -1,860 +1,66 @@
|
||||
import React, {Fragment, PureComponent} from 'react';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
PlusOutlined,
|
||||
SearchOutlined,
|
||||
RedoOutlined,
|
||||
DownOutlined,
|
||||
ExclamationCircleFilled,
|
||||
UpOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import {connect, history} from '@umijs/max';
|
||||
import {Button, Card, Divider, Dropdown, message, Modal, Popconfirm, Space, Switch, Tag,Row,Col} from 'antd';
|
||||
import StandardTable from '@/components/StandardTable';
|
||||
import React, { useState } from 'react';
|
||||
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
|
||||
import styles from './SafeMajorHazardList.less';
|
||||
import ResponsibilityImplementation from './module/ResponsibilityImplementation'; //责任落实
|
||||
import OnlineMonitoring from './module/OnlineMonitoring'; //在线监测预警
|
||||
import RiskAssessment from './module/RiskAssessment'; //风险管控
|
||||
import EvaluationReport from './module/EvaluationReport'; //评估报告
|
||||
|
||||
import { MyIcon } from "@/components/Icon"
|
||||
import style from "@/global.less";
|
||||
import StaffSheetCreateForm from './form/StaffSheetCreateForm'; //新增表单
|
||||
import StaffSheetUpdateForm from './form/StaffSheetUpdateForm'; //修改表单
|
||||
import StaffSheetViewForm from './form/StaffSheetViewForm'; //查看表单
|
||||
import StaffSheetRenderSimpleForm from './form/StaffSheetRenderSimpleForm'; //简单查询表单
|
||||
import StaffSheetRenderAdvancedForm from './form/StaffSheetRenderAdvancedForm'; //高级查询表单
|
||||
import styles from './StaffSheetList.less';
|
||||
import datadictionary from "@/utils/dataDictionary";
|
||||
import {formatDate} from "@/utils/formatUtils";
|
||||
import { formatDictText, checkButtonAuthority } from "@/utils/globalCommon";
|
||||
|
||||
const { confirm } = Modal;
|
||||
|
||||
//预约类型
|
||||
const sex_type = datadictionary.sex
|
||||
const user_status = datadictionary.user_status
|
||||
const sys_user_post = datadictionary.sys_user_post
|
||||
|
||||
const mockData = {
|
||||
list: [
|
||||
{
|
||||
gx: "--",
|
||||
gslx: "排班",
|
||||
ks: "中医科",
|
||||
lc: "11",
|
||||
kssj: "08:00",
|
||||
jssj: "18:00",
|
||||
cxsc: "8",
|
||||
sjly: ""
|
||||
},
|
||||
{
|
||||
gx: "--",
|
||||
gslx: "考勤",
|
||||
ks: "中医科",
|
||||
lc: "11",
|
||||
kssj: "07:00",
|
||||
jssj: "20:00",
|
||||
cxsc: "11",
|
||||
sjly: ""
|
||||
},
|
||||
{
|
||||
gx: "照顾A",
|
||||
gslx: "照顾",
|
||||
ks: "中医科",
|
||||
lc: "11",
|
||||
kssj: "09:00",
|
||||
jssj: "10:00",
|
||||
cxsc: "1",
|
||||
sjly: "人工上传"
|
||||
},
|
||||
{
|
||||
gx: "照顾B",
|
||||
gslx: "照顾",
|
||||
ks: "中医科",
|
||||
lc: "11",
|
||||
kssj: "10:00",
|
||||
jssj: "11:00",
|
||||
cxsc: "1",
|
||||
sjly: "人工上传"
|
||||
},
|
||||
{
|
||||
gx: "照顾C",
|
||||
gslx: "照顾",
|
||||
ks: "中医科",
|
||||
lc: "11",
|
||||
kssj: "11:00",
|
||||
jssj: "13:00",
|
||||
cxsc: "2",
|
||||
sjly: "人工上传"
|
||||
},
|
||||
{
|
||||
gx: "接病人D",
|
||||
gslx: "接送",
|
||||
ks: "急诊",
|
||||
lc: "1",
|
||||
kssj: "14:00",
|
||||
jssj: "16:00",
|
||||
cxsc: "2",
|
||||
sjly: "his"
|
||||
},
|
||||
{
|
||||
gx: "照顾A",
|
||||
gslx: "照顾",
|
||||
ks: "心脏内科",
|
||||
lc: "9",
|
||||
kssj: "16:00",
|
||||
jssj: "18:00",
|
||||
cxsc: "2",
|
||||
sjly: "his"
|
||||
},
|
||||
{
|
||||
gx: "送病人B",
|
||||
gslx: "接送",
|
||||
ks: "急诊",
|
||||
lc: "1",
|
||||
kssj: "18:00",
|
||||
jssj: "20:00",
|
||||
cxsc: "2",
|
||||
sjly: "his"
|
||||
},
|
||||
{
|
||||
gx: "照顾C",
|
||||
gslx: "照顾",
|
||||
ks: "中医科",
|
||||
lc: "11",
|
||||
kssj: "20:00",
|
||||
jssj: "21:00",
|
||||
cxsc: "1",
|
||||
sjly: "系统采集"
|
||||
},
|
||||
],
|
||||
pagination: {},
|
||||
}
|
||||
@connect(({ staffsheet, loading }) => ({
|
||||
staffsheet,
|
||||
loading: loading.models.staffsheet,
|
||||
}))
|
||||
const SafeMajorHazardList = () => {
|
||||
const [activeModule, setActiveModule] = useState('responsibility');
|
||||
|
||||
class StaffSheetList extends PureComponent {
|
||||
state = {
|
||||
modalVisible: false,
|
||||
updateModalVisible: false,
|
||||
viewModalVisible: false,
|
||||
expandForm: false,
|
||||
selectedRows: [],
|
||||
formValues: {},
|
||||
updateFormValues: {},
|
||||
viewFormValues: {},
|
||||
toggleExpand: false,
|
||||
const handleModuleClick = (module) => {
|
||||
setActiveModule(module)
|
||||
}
|
||||
|
||||
columns = [
|
||||
{
|
||||
title: '工序',
|
||||
dataIndex: 'gx',
|
||||
key: 'gx',
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
}, {
|
||||
title: '工时类型',
|
||||
dataIndex: 'gslx',
|
||||
key: 'gslx',
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},{
|
||||
title: '科室',
|
||||
dataIndex: 'ks',
|
||||
key: 'ks',
|
||||
width: 80,
|
||||
}, {
|
||||
title: '楼层',
|
||||
dataIndex: 'lc',
|
||||
key: 'lc',
|
||||
width: 80,
|
||||
},{
|
||||
title: '开始时间',
|
||||
dataIndex: 'kssj',
|
||||
key: 'kssj',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '结束时间',
|
||||
dataIndex: 'jssj',
|
||||
key: 'jssj',
|
||||
width: 100,
|
||||
}, {
|
||||
title: '持续时长(小时)',
|
||||
dataIndex: 'cxsc',
|
||||
key: 'cxsc',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: <div className={styles.timeGraphic}>
|
||||
<span>6</span>
|
||||
<span>7</span>
|
||||
<span>8</span>
|
||||
<span>9</span>
|
||||
<span>10</span>
|
||||
<span>11</span>
|
||||
<span>12</span>
|
||||
<span>13</span>
|
||||
<span>14</span>
|
||||
<span>15</span>
|
||||
<span>16</span>
|
||||
<span>17</span>
|
||||
<span>18</span>
|
||||
<span>19</span>
|
||||
<span>20</span>
|
||||
<span>21</span>
|
||||
<span>22</span>
|
||||
<span>23</span>
|
||||
<span>0</span>
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
</div>,
|
||||
dataIndex: 'tj',
|
||||
key: 'tj',
|
||||
width: 750,
|
||||
render: (text, record,index) => {
|
||||
console.log(record,77777)
|
||||
if(index == 0) {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={styles.pbsjStyle}></div>
|
||||
<div className={styles.pbsjStyle} style={{marginLeft: 73}}></div>
|
||||
</Fragment>
|
||||
)
|
||||
} else if(index == 1) {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={styles.kqsjStyle}></div>
|
||||
<div className={styles.kqsjStyle} style={{marginLeft: 36,width: 232}}></div>
|
||||
</Fragment>
|
||||
)
|
||||
} else if(index == 2) {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={styles.xzStyle}></div>
|
||||
<div className={styles.zjgsStyle}></div>
|
||||
</Fragment>
|
||||
)
|
||||
} else if(index == 3) {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={styles.zjgsStyle} style={{marginLeft: 118}}></div>
|
||||
</Fragment>
|
||||
)
|
||||
} else if(index == 4) {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={styles.zjgsStyle} style={{marginLeft: 148, width: 60}}></div>
|
||||
</Fragment>
|
||||
)
|
||||
} else if(index == 5) {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={styles.zjgsStyle} style={{marginLeft: 246, width: 60}}></div>
|
||||
</Fragment>
|
||||
)
|
||||
} else if(index == 6) {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={styles.zjgsStyle} style={{marginLeft: 310, width: 60}}></div>
|
||||
</Fragment>
|
||||
)
|
||||
} else if(index == 7) {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={styles.zjgsStyle} style={{marginLeft: 370, width: 60}}></div>
|
||||
</Fragment>
|
||||
)
|
||||
} else if(index == 8) {
|
||||
return (
|
||||
<Fragment>
|
||||
<div className={styles.zjgsStyle} style={{marginLeft: 430, width: 30}}></div>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '数据来源',
|
||||
dataIndex: 'sjly',
|
||||
key: 'sjly',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
render: (text, record) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<a className={style.iconstyle}> 修改 </a>
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
componentDidMount() {
|
||||
// const { dispatch, staffsheet: { params } } = this.props
|
||||
|
||||
// dispatch({
|
||||
// type: 'timesheet/query_page_for_prouser',
|
||||
// })
|
||||
|
||||
// this.setState({
|
||||
// expandForm: params?.expandForm || false,
|
||||
// })
|
||||
}
|
||||
|
||||
handleStandardTableChange = (pagination, sorter) => {
|
||||
const { dispatch } = this.props
|
||||
const { formValues } = this.state
|
||||
|
||||
const params = {
|
||||
currentPage: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
...formValues
|
||||
}
|
||||
|
||||
sorter.field && (params.sorter = `${sorter.field}_${sorter.order}`)
|
||||
|
||||
// dispatch({
|
||||
// type: 'prouser/query_page_for_prouser',
|
||||
// payload: params
|
||||
// })
|
||||
}
|
||||
|
||||
handleFormReset = () => {
|
||||
const { dispatch } = this.props
|
||||
this.setState({
|
||||
formValues: {}
|
||||
})
|
||||
|
||||
// dispatch({
|
||||
// type: 'prouser/query_page_for_prouser',
|
||||
// payload: {
|
||||
// resetFlag: true
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
toggleForm = () => {
|
||||
const { expandForm } = this.state
|
||||
this.setState({
|
||||
expandForm: !expandForm
|
||||
})
|
||||
}
|
||||
|
||||
handleSelectRows = rows => {
|
||||
this.setState({
|
||||
selectedRows: rows
|
||||
})
|
||||
}
|
||||
|
||||
handleSearch = values => {
|
||||
const { dispatch } = this.props
|
||||
const { expandForm } = this.state
|
||||
|
||||
this.setState({
|
||||
formValues: values
|
||||
})
|
||||
|
||||
// dispatch({
|
||||
// type: 'prouser/query_page_for_prouser',
|
||||
// payload: {
|
||||
// ...values,
|
||||
// resetFlag: true,
|
||||
// expandForm
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
handleModalVisible = flag => {
|
||||
this.setState({
|
||||
modalVisible: !!flag
|
||||
})
|
||||
}
|
||||
|
||||
handleUpdateModalVisible = (flag, record) => {
|
||||
this.setState({
|
||||
updateModalVisible: !!flag,
|
||||
updateFormValues: record || {}
|
||||
})
|
||||
}
|
||||
|
||||
handleViewModalVisible = (flag, record) => {
|
||||
this.setState({
|
||||
viewModalVisible: !!flag,
|
||||
viewFormValues: record || {}
|
||||
})
|
||||
}
|
||||
|
||||
handleAdd = fields => {
|
||||
const { dispatch } = this.props
|
||||
|
||||
dispatch({
|
||||
type: 'prouser/insert_for_prouser',
|
||||
payload: {
|
||||
user_id: fields.user_id,
|
||||
user_name: fields.user_name,
|
||||
user_name_cn: fields.user_name_cn,
|
||||
user_name_en: fields.user_name_en,
|
||||
password: fields.password,
|
||||
email: fields.email,
|
||||
phone: fields.phone,
|
||||
landline: fields.landline,
|
||||
sex: fields.sex,
|
||||
avatar: fields.avatar,
|
||||
sign: fields.sign,
|
||||
tags: fields.tags,
|
||||
id_card: fields.id_card,
|
||||
birthday: fields.birthday,
|
||||
job_status: fields.job_status,
|
||||
hiredate: fields.hiredate,
|
||||
departure_time: fields.departure_time,
|
||||
user_type: fields.user_type,
|
||||
emp_no: fields.emp_no,
|
||||
access_card_no: fields.access_card_no,
|
||||
country: fields.country,
|
||||
province: fields.province,
|
||||
city: fields.city,
|
||||
address: fields.address,
|
||||
work_addr: fields.work_addr,
|
||||
floor: fields.floor,
|
||||
inprovince: fields.inprovince,
|
||||
// dept_code: fields.dept_code,
|
||||
// dept_name: fields.dept_name,
|
||||
inner_dept_code: fields.inner_dept_code,
|
||||
org_code: fields.org_code,
|
||||
org_name: fields.org_name,
|
||||
inner_org_code: fields.inner_org_code,
|
||||
posts: fields.posts,
|
||||
wx_openid: fields.wx_openid,
|
||||
wx_mpopenid: fields.wx_mpopenid,
|
||||
wx_miniopenid: fields.wx_miniopenid,
|
||||
wx_unionid: fields.wx_unionid,
|
||||
mobile_imei: fields.mobile_imei,
|
||||
device_num: fields.device_num,
|
||||
al_taobao: fields.al_taobao,
|
||||
al_alipay: fields.al_alipay,
|
||||
al_dingding: fields.al_dingding,
|
||||
is_system_user: fields.is_system_user,
|
||||
mgr_type: fields.mgr_type,
|
||||
pwd_security_level: fields.pwd_security_level,
|
||||
pwd_update_date: fields.pwd_update_date,
|
||||
last_login_ip: fields.last_login_ip,
|
||||
last_login_date: fields.last_login_date,
|
||||
freeze_date: fields.freeze_date,
|
||||
freeze_cause: fields.freeze_cause,
|
||||
zindex: fields.zindex,
|
||||
wx_msg: fields.wx_msg,
|
||||
email_msg: fields.email_msg,
|
||||
system_msg: fields.system_msg,
|
||||
remarks: fields.remarks,
|
||||
status: fields.status,
|
||||
creator: fields.creator,
|
||||
create_date: fields.create_date,
|
||||
updater: fields.updater,
|
||||
update_date: fields.update_date
|
||||
},
|
||||
callback: (res) => {
|
||||
if(res.success == true) {
|
||||
message.success('添加成功')
|
||||
this.handleModalVisible()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
handleDeleteRecord = record => {
|
||||
const { dispatch } = this.props
|
||||
|
||||
dispatch({
|
||||
type: 'prouser/delete_by_primarykey_for_prouser',
|
||||
payload: {
|
||||
recordid: record.user_id
|
||||
},
|
||||
callback: res => {
|
||||
if (res.success) {
|
||||
message.success('删除成功')
|
||||
|
||||
this.setState({
|
||||
selectedRows: []
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
handleUpdate = fields => {
|
||||
const { dispatch } = this.props
|
||||
|
||||
dispatch({
|
||||
type: 'prouser/update_for_prouser',
|
||||
payload: {
|
||||
user_id: fields.user_id,
|
||||
user_name: fields.user_name,
|
||||
user_name_cn: fields.user_name_cn,
|
||||
user_name_en: fields.user_name_en,
|
||||
password: fields.password,
|
||||
email: fields.email,
|
||||
phone: fields.phone,
|
||||
landline: fields.landline,
|
||||
sex: fields.sex,
|
||||
avatar: fields.avatar,
|
||||
sign: fields.sign,
|
||||
tags: fields.tags,
|
||||
id_card: fields.id_card,
|
||||
birthday: fields.birthday,
|
||||
job_status: fields.job_status,
|
||||
hiredate: fields.hiredate,
|
||||
departure_time: fields.departure_time,
|
||||
user_type: fields.user_type,
|
||||
emp_no: fields.emp_no,
|
||||
access_card_no: fields.access_card_no,
|
||||
country: fields.country,
|
||||
province: fields.province,
|
||||
city: fields.city,
|
||||
address: fields.address,
|
||||
work_addr: fields.work_addr,
|
||||
floor: fields.floor,
|
||||
inprovince: fields.inprovince,
|
||||
// dept_code: fields.dept_code,
|
||||
// dept_name: fields.dept_name,
|
||||
inner_dept_code: fields.inner_dept_code,
|
||||
org_code: fields.org_code,
|
||||
org_name: fields.org_name,
|
||||
inner_org_code: fields.inner_org_code,
|
||||
posts: fields.posts,
|
||||
wx_openid: fields.wx_openid,
|
||||
wx_mpopenid: fields.wx_mpopenid,
|
||||
wx_miniopenid: fields.wx_miniopenid,
|
||||
wx_unionid: fields.wx_unionid,
|
||||
mobile_imei: fields.mobile_imei,
|
||||
device_num: fields.device_num,
|
||||
al_taobao: fields.al_taobao,
|
||||
al_alipay: fields.al_alipay,
|
||||
al_dingding: fields.al_dingding,
|
||||
is_system_user: fields.is_system_user,
|
||||
mgr_type: fields.mgr_type,
|
||||
pwd_security_level: fields.pwd_security_level,
|
||||
pwd_update_date: fields.pwd_update_date,
|
||||
last_login_ip: fields.last_login_ip,
|
||||
last_login_date: fields.last_login_date,
|
||||
freeze_date: fields.freeze_date,
|
||||
freeze_cause: fields.freeze_cause,
|
||||
zindex: fields.zindex,
|
||||
wx_msg: fields.wx_msg,
|
||||
email_msg: fields.email_msg,
|
||||
system_msg: fields.system_msg,
|
||||
remarks: fields.remarks,
|
||||
status: fields.status,
|
||||
creator: fields.creator,
|
||||
create_date: fields.create_date,
|
||||
updater: fields.updater,
|
||||
update_date: fields.update_date
|
||||
},
|
||||
callback: (res) => {
|
||||
if(res.success === true) {
|
||||
message.success('修改成功')
|
||||
this.handleUpdateModalVisible()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 修改用户状态
|
||||
handleUpdateUserStatus = (fields, status, msg) => {
|
||||
const { dispatch } = this.props
|
||||
|
||||
confirm({
|
||||
title: `确定要 ${ msg } 当前用户的吗?`,
|
||||
icon: <ExclamationCircleFilled />,
|
||||
onOk() {
|
||||
dispatch({
|
||||
type: 'prouser/update_for_prouser',
|
||||
payload: {
|
||||
user_id: fields.user_id,
|
||||
status: status,
|
||||
},
|
||||
callback: (res) => {
|
||||
if(res.success === true) {
|
||||
message.success('修改成功')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 修改用户密码
|
||||
handleUpdateUserPassword = fields => {
|
||||
const { dispatch } = this.props
|
||||
confirm({
|
||||
title: '确定要重置当前用户的密码吗?',
|
||||
icon: <ExclamationCircleFilled />,
|
||||
onOk() {
|
||||
dispatch({
|
||||
type: 'prouser/resetpwd_for_prouser',
|
||||
payload: {
|
||||
user_id: fields.user_id
|
||||
},
|
||||
callback: (res) => {
|
||||
if(res.success === true) {
|
||||
message.success('重置成功')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
renderSimpleForm() {
|
||||
const { staffsheet: { params } } = this.props
|
||||
const parentMethods = {
|
||||
handleSearch: this.handleSearch,
|
||||
handleFormReset: this.handleFormReset,
|
||||
toggleForm: this.toggleForm,
|
||||
params
|
||||
}
|
||||
|
||||
return <StaffSheetRenderSimpleForm {...parentMethods} />
|
||||
}
|
||||
|
||||
renderAdvancedForm() {
|
||||
const { dispatch, prouser: { selectDeptTree, selectOrganTree, params } } = this.props
|
||||
const parentMethods = {
|
||||
handleSearch: this.handleSearch,
|
||||
handleFormReset: this.handleFormReset,
|
||||
toggleForm: this.toggleForm,
|
||||
dispatch: dispatch,
|
||||
selectDeptTree: selectDeptTree,
|
||||
selectOrganTree: selectOrganTree,
|
||||
params
|
||||
const renderModule = () => {
|
||||
switch (activeModule) {
|
||||
case 'responsibility':
|
||||
return <ResponsibilityImplementation />;
|
||||
case 'monitoring':
|
||||
return <OnlineMonitoring />;
|
||||
case 'risk':
|
||||
return <RiskAssessment />;
|
||||
case 'evaluation':
|
||||
return <EvaluationReport />;
|
||||
default:
|
||||
return <ResponsibilityImplementation />;
|
||||
}
|
||||
|
||||
return <StaffSheetRenderAdvancedForm {...parentMethods} />
|
||||
}
|
||||
|
||||
renderForm() {
|
||||
const { expandForm } = this.state
|
||||
return expandForm ? this.renderAdvancedForm() : this.renderSimpleForm()
|
||||
}
|
||||
|
||||
handleCollapse = () => {
|
||||
const { toggleExpand } = this.state
|
||||
this.setState({
|
||||
toggleExpand: !toggleExpand
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
staffsheet: {
|
||||
data,
|
||||
selectDeptTree,
|
||||
selectOrganTree
|
||||
},
|
||||
loading,
|
||||
dispatch
|
||||
} = this.props
|
||||
const {
|
||||
selectedRows,
|
||||
modalVisible,
|
||||
updateModalVisible,
|
||||
viewModalVisible,
|
||||
updateFormValues,
|
||||
viewFormValues,
|
||||
toggleExpand
|
||||
} = this.state
|
||||
|
||||
const parentMethods = {
|
||||
handleAdd: this.handleAdd,
|
||||
handleModalVisible: this.handleModalVisible,
|
||||
dispatch: dispatch,
|
||||
loading,
|
||||
selectDeptTree: selectDeptTree,
|
||||
selectOrganTree: selectOrganTree
|
||||
}
|
||||
|
||||
const updateMethods = {
|
||||
handleUpdateModalVisible: this.handleUpdateModalVisible,
|
||||
handleUpdate: this.handleUpdate,
|
||||
dispatch: dispatch,
|
||||
loading,
|
||||
selectDeptTree: selectDeptTree,
|
||||
selectOrganTree: selectOrganTree
|
||||
}
|
||||
|
||||
const viewMethods = {
|
||||
handleViewModalVisible: this.handleViewModalVisible
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card bordered={false}>
|
||||
<div className={styles.proUsertableList}>
|
||||
<div className={styles.proUsertableListForm}>{this.renderForm()}</div>
|
||||
<Divider style={{ borderColor: '#cccccc',margin:0 }}>
|
||||
<div className={styles.summaryButton} onClick={() => this.handleCollapse()}>
|
||||
{toggleExpand ? <><UpOutlined /> 收起</> : <><DownOutlined /> 展开</>}
|
||||
</div>
|
||||
</Divider>
|
||||
<div style={{display: toggleExpand?'block':'none'}}>
|
||||
<div className={styles.summaryContent}>
|
||||
<div style={{paddingLeft: 0}}>
|
||||
<div className={styles.titleLabel}>名称</div>
|
||||
<div className={styles.titleVal}>张三</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>考勤类型</div>
|
||||
<div className={styles.titleVal}>排班制</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>出勤人效(件/小时)</div>
|
||||
<div className={styles.titleVal}>10000</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>作业人效(件/小时)</div>
|
||||
<div className={styles.titleVal}>12000</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>人效出勤工时(小时)</div>
|
||||
<div className={styles.titleVal}>8</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>出勤工时占比(%)</div>
|
||||
<div className={styles.titleVal}>100%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.summaryContent}>
|
||||
<div style={{paddingLeft: 0}}>
|
||||
<div className={styles.titleLabel}>工号</div>
|
||||
<div className={styles.titleVal}>123456</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>在职时长(小时)</div>
|
||||
<div className={styles.titleVal}>1200</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>外出就餐时长(小时)</div>
|
||||
<div className={styles.titleVal}>0</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>直接作业工时(小时)</div>
|
||||
<div className={styles.titleVal}>7</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>间接作业工时(小时)</div>
|
||||
<div className={styles.titleVal}>1</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>闲置工时(小时)</div>
|
||||
<div className={styles.titleVal}>0</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.summaryContent}>
|
||||
<div style={{paddingLeft: 0}}>
|
||||
<div className={styles.titleLabel}>工作性质</div>
|
||||
<div className={styles.titleVal}>外包</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>总件数(件)</div>
|
||||
<div className={styles.titleVal}>9000</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>离岗休息时长(小时)</div>
|
||||
<div className={styles.titleVal}>0</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>直接作业工时占比(%)</div>
|
||||
<div className={styles.titleVal}>84</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>闲置工时占比(%)</div>
|
||||
<div className={styles.titleVal}>0</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className={styles.titleLabel}>闲置工时(小时)</div>
|
||||
<div className={styles.titleVal}>0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.operateContent}>
|
||||
<div>
|
||||
<Button type='primary' style={{marginRight: 50}}>
|
||||
同步
|
||||
</Button>
|
||||
<Button type='primary' danger>
|
||||
考勤排查
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{display: 'inline-block'}}>
|
||||
<div className={styles.workClass} style={{background: '#faf07a'}}></div>
|
||||
排班时间
|
||||
</div>
|
||||
<div style={{display: 'inline-block'}}>
|
||||
<div className={styles.workClass} style={{background: '#9cc5fc'}}></div>
|
||||
考勤时间
|
||||
</div>
|
||||
<div style={{display: 'inline-block'}}>
|
||||
<div className={styles.workClass} style={{background: '#aa02cf'}}></div>
|
||||
修改状态
|
||||
</div>
|
||||
<div style={{display: 'inline-block'}}>
|
||||
<div className={styles.workClass} style={{background: '#454545'}}></div>
|
||||
闲置工时
|
||||
</div>
|
||||
<div style={{display: 'inline-block'}}>
|
||||
<div className={styles.workClass} style={{background: '#8ddd15'}}></div>
|
||||
直接工时
|
||||
</div>
|
||||
<div style={{display: 'inline-block'}}>
|
||||
<div className={styles.workClass} style={{background: '#cecece'}}></div>
|
||||
离岗休息
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: 'flex',justifyContent: "space-between"}}>
|
||||
<div>共20项</div>
|
||||
</div>
|
||||
<StandardTable
|
||||
rowKey={'user_id'}
|
||||
selectedRows={selectedRows}
|
||||
loading={loading}
|
||||
data={mockData}
|
||||
columns={this.columns}
|
||||
onSelectRow={this.handleSelectRows}
|
||||
onChange={this.handleStandardTableChange}
|
||||
scroll={{ x: 1000,y: 600 }}
|
||||
showTotal={(total, range) => total}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{modalVisible && <StaffSheetCreateForm {...parerntMethods} modalVisible={modalVisible} />}
|
||||
|
||||
{updateFormValues && Object.keys(updateFormValues).length ? (
|
||||
<StaffSheetUpdateForm
|
||||
{...updateMethods}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={updateFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{viewFormValues && Object.keys(viewFormValues).length ? (
|
||||
<StaffSheetViewForm
|
||||
{...viewMethods}
|
||||
viewModalVisible={viewModalVisible}
|
||||
values={viewFormValues}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default StaffSheetList
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.TopButton}>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === "responsibility" ? styles.active : ""}`}
|
||||
onClick={() => handleModuleClick("responsibility")}
|
||||
>责任落实
|
||||
</Button>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === "monitoring" ? styles.active : ""}`}
|
||||
onClick={() => handleModuleClick("monitoring")}
|
||||
>在线监测预警
|
||||
</Button>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === "risk" ? styles.active : ""}`}
|
||||
onClick={() => handleModuleClick("risk")}
|
||||
>风险管控
|
||||
</Button>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === "evaluation" ? styles.active : ""}`}
|
||||
onClick={() => handleModuleClick("evaluation")}
|
||||
>评估报告及隐患处理
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
{renderModule()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SafeMajorHazardList;
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
.container {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 89vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.TopButton {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-left: 6px;
|
||||
|
||||
.TopButtonItem {
|
||||
background-color: transparent !important;
|
||||
color: #333333 !important;
|
||||
font-size: 14px !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px 10px !important;
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
line-height: 1.2 !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:hover {
|
||||
color: #333333 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: #2E4CD4 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #2E4CD4 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
// ======== 内容区域样式 ========
|
||||
flex: 1; // ======== 占据剩余空间 ========
|
||||
overflow-y: auto; // ======== 允许垂直滚动 ========
|
||||
padding: 0; // ======== 无内边距 ========
|
||||
}
|
||||
}
|
||||
@ -1,128 +0,0 @@
|
||||
@import '~@/utils/utils.less';
|
||||
|
||||
.proUsertableList {
|
||||
.proUsertableListOperator {
|
||||
margin-bottom: 16px;
|
||||
button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.editColumn {
|
||||
> div:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.proUsertableListForm {
|
||||
height: 45px;
|
||||
:global {
|
||||
.ant-form-item {
|
||||
display: flex;
|
||||
margin-right: 0;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.ant-form-item-label {
|
||||
// width: 80px;
|
||||
// padding-right: 8px;
|
||||
line-height: 32px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ant-form-item-control {
|
||||
line-height: 32px;
|
||||
width: calc(100% - 80px);
|
||||
|
||||
.ant-form-item-control-input-content {
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
> .ant-row {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-form-item-control-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summaryButton {
|
||||
width: 80px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
background-color: #eff1f3;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.summaryContent {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
> div {
|
||||
flex: 2;
|
||||
height: 60px;
|
||||
border-right: 2px solid #eeeeee;
|
||||
padding-left: 10px;
|
||||
// background-color: #1890FF
|
||||
}
|
||||
.titleLabel {
|
||||
color: #b2b2b2;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.titleVal {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.operateContent {
|
||||
display: flex;
|
||||
margin: 20px 0;
|
||||
justify-content: space-between;
|
||||
.workClass {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pbsjStyle {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 40px;
|
||||
margin-left: 56px;
|
||||
background-color: #faf07a;
|
||||
}
|
||||
.kqsjStyle {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
height: 40px;
|
||||
margin-left: 29px;
|
||||
background-color: #9cc5fc;
|
||||
}
|
||||
.xzStyle {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
margin-left: 29px;
|
||||
background-color: #454545;
|
||||
}
|
||||
|
||||
.zjgsStyle {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background-color: #8ddd15;
|
||||
}
|
||||
|
||||
.timeGraphic {
|
||||
span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,634 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Card, Result, CheckCircleOutlined, Button } from 'antd';
|
||||
import * as echarts from 'echarts';
|
||||
import StandardTable from '@/components/StandardTable';
|
||||
import styles from './EvaluationReport.less';
|
||||
|
||||
import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png';
|
||||
import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png';
|
||||
import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png';
|
||||
|
||||
|
||||
const EvaluationReport = () => {
|
||||
const trendChartRef = useRef(null);
|
||||
const pieChartRef = useRef(null);
|
||||
const barChartRef = useRef(null);
|
||||
|
||||
// 表格相关状态
|
||||
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
|
||||
const [selectedRows, setSelectedRows] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [dataSource, setDataSource] = useState([]);
|
||||
const [pagination, setPagination] = useState({
|
||||
current: 1,
|
||||
pageSize: 5,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
// 隐患趋势分析折线图
|
||||
useEffect(() => {
|
||||
if (trendChartRef.current) {
|
||||
const chart = echarts.init(trendChartRef.current);
|
||||
|
||||
const option = {
|
||||
color: ['#FF4D4F', '#FAAD14', '#52C41A'],
|
||||
legend: {
|
||||
data: ['重大隐患', '一般隐患', '轻微隐患'],
|
||||
top: "5px",
|
||||
left: "center",
|
||||
itemGap: 20,
|
||||
textStyle: {
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '20%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: {
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '重大隐患',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#FF4D4F'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FF4D4F',
|
||||
borderColor: '#FF4D4F',
|
||||
borderWidth: 2
|
||||
},
|
||||
data: [12, 8, 15, 10, 18, 14, 20, 16, 22, 19, 25, 21]
|
||||
},
|
||||
{
|
||||
name: '一般隐患',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#FAAD14'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FAAD14',
|
||||
borderColor: '#FAAD14',
|
||||
borderWidth: 2
|
||||
},
|
||||
data: [25, 30, 28, 35, 32, 38, 40, 36, 42, 38, 45, 41]
|
||||
},
|
||||
{
|
||||
name: '轻微隐患',
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: '#52C41A'
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#52C41A',
|
||||
borderColor: '#52C41A',
|
||||
borderWidth: 2
|
||||
},
|
||||
data: [45, 50, 48, 55, 52, 58, 60, 56, 62, 58, 65, 61]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
|
||||
const handleResize = () => {
|
||||
if (chart && !chart.isDisposed()) {
|
||||
chart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chart && !chart.isDisposed()) {
|
||||
chart.dispose();
|
||||
}
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 隐患类型分布玫瑰饼图
|
||||
useEffect(() => {
|
||||
if (pieChartRef.current) {
|
||||
const chart = echarts.init(pieChartRef.current);
|
||||
|
||||
const option = {
|
||||
color: ['#FF4D4F', '#FAAD14', '#52C41A', '#1890FF', '#722ED1', '#13C2C2'],
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
top: 'center',
|
||||
textStyle: {
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '隐患类型',
|
||||
type: 'pie',
|
||||
radius: ['20%', '70%'],
|
||||
center: ['60%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}: {c}',
|
||||
fontSize: 10
|
||||
},
|
||||
data: [
|
||||
{ value: 35, name: '设备故障' },
|
||||
{ value: 28, name: '操作失误' },
|
||||
{ value: 22, name: '环境因素' },
|
||||
{ value: 18, name: '管理缺陷' },
|
||||
{ value: 15, name: '设计缺陷' },
|
||||
{ value: 12, name: '其他' }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
|
||||
const handleResize = () => {
|
||||
if (chart && !chart.isDisposed()) {
|
||||
chart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chart && !chart.isDisposed()) {
|
||||
chart.dispose();
|
||||
}
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 隐患整改情况柱状图
|
||||
useEffect(() => {
|
||||
if (barChartRef.current) {
|
||||
const chart = echarts.init(barChartRef.current);
|
||||
|
||||
const option = {
|
||||
color: ['#FF4D4F', '#FAAD14', '#1890FF', '#52C41A', '#722ED1'],
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
top: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['待处理', '处理中', '待审核', '已完成', '已关闭'],
|
||||
axisLabel: {
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
fontSize: 10
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
data: [25, 18, 12, 35, 8],
|
||||
itemStyle: {
|
||||
borderRadius: [4, 4, 0, 0]
|
||||
},
|
||||
barWidth: '60%'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
chart.setOption(option);
|
||||
|
||||
const handleResize = () => {
|
||||
if (chart && !chart.isDisposed()) {
|
||||
chart.resize();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
if (chart && !chart.isDisposed()) {
|
||||
chart.dispose();
|
||||
}
|
||||
};
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 表格列定义
|
||||
const columns = [
|
||||
{
|
||||
title: '编号',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
width: 80,
|
||||
render: (text, record, index) => {
|
||||
const page = pagination.current || 1;
|
||||
const pageSize = pagination.pageSize || 5;
|
||||
const number = (page - 1) * pageSize + index + 1;
|
||||
return `0${number}`.slice(-2);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '报告名称',
|
||||
dataIndex: 'reportName',
|
||||
key: 'reportName',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '上传时间',
|
||||
dataIndex: 'uploadTime',
|
||||
key: 'uploadTime',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '版本',
|
||||
dataIndex: 'version',
|
||||
key: 'version',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
width: 100,
|
||||
render: (text) => {
|
||||
const statusMap = {
|
||||
'已完成': { color: '#52C41A', bg: '#F6FFED' },
|
||||
'处理中': { color: '#FAAD14', bg: '#FFFBE6' },
|
||||
'待审核': { color: '#1890FF', bg: '#E6F7FF' }
|
||||
};
|
||||
const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
|
||||
return (
|
||||
<span style={{
|
||||
color: status.color,
|
||||
backgroundColor: status.bg,
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px'
|
||||
}}>
|
||||
{text}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '上传人',
|
||||
dataIndex: 'uploader',
|
||||
key: 'uploader',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
width: 80,
|
||||
render: (_, record) => (
|
||||
<div>
|
||||
<Button type="link" size="small" style={{ padding: 0 }}>
|
||||
下载
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
// 模拟数据
|
||||
const mockData = [
|
||||
{
|
||||
key: '1',
|
||||
id: '001',
|
||||
reportName: '2024年第一季度安全评估报告',
|
||||
type: '季度报告',
|
||||
uploadTime: '2024-01-15 08:30:25',
|
||||
version: 'V1.0',
|
||||
status: '已完成',
|
||||
uploader: '张三',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
id: '002',
|
||||
reportName: '重大危险源专项评估报告',
|
||||
type: '专项报告',
|
||||
uploadTime: '2024-01-15 09:15:10',
|
||||
version: 'V2.1',
|
||||
status: '处理中',
|
||||
uploader: '李四',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
id: '003',
|
||||
reportName: '年度安全风险评估报告',
|
||||
type: '年度报告',
|
||||
uploadTime: '2024-01-15 10:45:30',
|
||||
version: 'V1.5',
|
||||
status: '待审核',
|
||||
uploader: '王五',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
id: '004',
|
||||
reportName: '设备安全评估报告',
|
||||
type: '设备报告',
|
||||
uploadTime: '2024-01-15 11:20:45',
|
||||
version: 'V1.2',
|
||||
status: '已完成',
|
||||
uploader: '赵六',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
id: '005',
|
||||
reportName: '应急预案评估报告',
|
||||
type: '应急报告',
|
||||
uploadTime: '2024-01-15 12:10:20',
|
||||
version: 'V3.0',
|
||||
status: '已完成',
|
||||
uploader: '孙七',
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
id: '006',
|
||||
reportName: '环境安全评估报告',
|
||||
type: '环境报告',
|
||||
uploadTime: '2024-01-15 13:25:15',
|
||||
version: 'V1.8',
|
||||
status: '处理中',
|
||||
uploader: '周八',
|
||||
},
|
||||
{
|
||||
key: '7',
|
||||
id: '007',
|
||||
reportName: '人员安全培训评估报告',
|
||||
type: '培训报告',
|
||||
uploadTime: '2024-01-15 14:10:30',
|
||||
version: 'V2.3',
|
||||
status: '待审核',
|
||||
uploader: '吴九',
|
||||
},
|
||||
{
|
||||
key: '8',
|
||||
id: '008',
|
||||
reportName: '消防安全评估报告',
|
||||
type: '消防报告',
|
||||
uploadTime: '2024-01-15 15:45:20',
|
||||
version: 'V1.1',
|
||||
status: '已完成',
|
||||
uploader: '郑十',
|
||||
},
|
||||
{
|
||||
key: '9',
|
||||
id: '009',
|
||||
reportName: '化学品安全评估报告',
|
||||
type: '化学品报告',
|
||||
uploadTime: '2024-01-15 16:30:45',
|
||||
version: 'V2.0',
|
||||
status: '处理中',
|
||||
uploader: '钱十一',
|
||||
},
|
||||
{
|
||||
key: '10',
|
||||
id: '010',
|
||||
reportName: '职业健康安全评估报告',
|
||||
type: '职业健康报告',
|
||||
uploadTime: '2024-01-15 17:15:10',
|
||||
version: 'V1.6',
|
||||
status: '已完成',
|
||||
uploader: '陈十二',
|
||||
},
|
||||
{
|
||||
key: '11',
|
||||
id: '011',
|
||||
reportName: '安全管理制度评估报告',
|
||||
type: '制度报告',
|
||||
uploadTime: '2024-01-15 18:20:35',
|
||||
version: 'V1.3',
|
||||
status: '待审核',
|
||||
uploader: '刘十三',
|
||||
},
|
||||
{
|
||||
key: '12',
|
||||
id: '012',
|
||||
reportName: '安全投入评估报告',
|
||||
type: '投入报告',
|
||||
uploadTime: '2024-01-15 19:05:50',
|
||||
version: 'V1.9',
|
||||
status: '已完成',
|
||||
uploader: '黄十四',
|
||||
},
|
||||
];
|
||||
|
||||
// 初始化数据
|
||||
useEffect(() => {
|
||||
setPagination(prev => ({ ...prev, total: mockData.length }));
|
||||
}, []);
|
||||
|
||||
// 根据分页获取当前页数据
|
||||
const getCurrentPageData = () => {
|
||||
const { current, pageSize } = pagination;
|
||||
const startIndex = (current - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
return mockData.slice(startIndex, endIndex);
|
||||
};
|
||||
|
||||
// 表格选择变化
|
||||
const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
|
||||
setSelectedRowKeys(newSelectedRowKeys);
|
||||
setSelectedRows(newSelectedRows);
|
||||
};
|
||||
|
||||
// 分页变化处理
|
||||
const handleTableChange = (pagination) => {
|
||||
setPagination(prev => ({
|
||||
...prev,
|
||||
current: pagination.current,
|
||||
pageSize: pagination.pageSize,
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.Econtainer}>
|
||||
{/* 第一个大块 - 高度16% */}
|
||||
<div className={styles.EcontainerTop}>
|
||||
<div className={styles.sectionContent}>
|
||||
<div className={styles.blocksContainer}>
|
||||
{/* 块1 */}
|
||||
<div className={styles.blockItem}>
|
||||
<div className={styles.blockLeft}>
|
||||
<div className={styles.blockTitle}>总危险源数量</div>
|
||||
<div className={styles.blockNumber}>65</div>
|
||||
<div className={styles.blockChange}>
|
||||
<span className={styles.arrow}>↑</span>
|
||||
较昨日 +2
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.blockRight}>
|
||||
<img src={img1} alt="总危险源数量" className={styles.blockImage} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 块2 */}
|
||||
<div className={styles.blockItem}>
|
||||
<div className={styles.blockLeft}>
|
||||
<div className={styles.blockTitle}>高风险设备</div>
|
||||
<div className={styles.blockNumber}>65</div>
|
||||
<div className={styles.blockChange}>
|
||||
<span className={styles.arrow}>↑</span>
|
||||
较昨日 +2
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.blockRight}>
|
||||
<img src={img2} alt="高风险设备" className={styles.blockImage} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 块3 */}
|
||||
<div className={styles.blockItem}>
|
||||
<div className={styles.blockLeft}>
|
||||
<div className={styles.blockTitle}>今日预警次数</div>
|
||||
<div className={styles.blockNumber}>65</div>
|
||||
<div className={styles.blockChange}>
|
||||
<span className={styles.arrow}>↑</span>
|
||||
较昨日 +2
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.blockRight}>
|
||||
<img src={img3} alt="今日预警次数" className={styles.blockImage} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 块4 */}
|
||||
<div className={styles.blockItem}>
|
||||
<div className={styles.blockLeft}>
|
||||
<div className={styles.blockTitle}>未处理预警</div>
|
||||
<div className={styles.blockNumber}>65</div>
|
||||
<div className={styles.blockChange}>
|
||||
<span className={styles.arrow}>↑</span>
|
||||
较昨日 +2
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.blockRight}>
|
||||
<img src={img1} alt="未处理预警" className={styles.blockImage} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 第二个大块 - 三个图表块 */}
|
||||
<div className={styles.EcontainerMiddle}>
|
||||
<div className={styles.sectionContent}>
|
||||
{/* 第一个小块 - 隐患趋势分析 */}
|
||||
<div className={styles.chartBlock}>
|
||||
<div className={styles.chartTitle}>
|
||||
<div className={styles.titleIcon}></div>
|
||||
<div>隐患趋势分析</div>
|
||||
</div>
|
||||
<div className={styles.chartContainer} ref={trendChartRef}></div>
|
||||
</div>
|
||||
|
||||
{/* 第二个小块 - 隐患类型分布 */}
|
||||
<div className={styles.chartBlock}>
|
||||
<div className={styles.chartTitle}>
|
||||
<div className={styles.titleIcon}></div>
|
||||
<div>隐患类型分布</div>
|
||||
</div>
|
||||
<div className={styles.chartContainer} ref={pieChartRef}></div>
|
||||
</div>
|
||||
|
||||
{/* 第三小块 - 隐患整改情况 */}
|
||||
<div className={styles.chartBlock}>
|
||||
<div className={styles.chartTitle}>
|
||||
<div className={styles.titleIcon}></div>
|
||||
<div>隐患整改情况</div>
|
||||
</div>
|
||||
<div className={styles.chartContainer} ref={barChartRef}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 第三大块 - 评估报告表格 */}
|
||||
<div className={styles.EcontainerBottom}>
|
||||
{/* 首行 左侧标题左对齐 右侧按钮右对齐 */}
|
||||
<div className={styles.tableHeader}>
|
||||
<div className={styles.tableTitle}>
|
||||
<div className={styles.titleIcon}></div>
|
||||
<div>评估报告</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 表格 5行8列 带页码 每页5条数据 */}
|
||||
<div className={styles.tableContainer}>
|
||||
<StandardTable
|
||||
columns={columns}
|
||||
data={{
|
||||
list: getCurrentPageData(),
|
||||
pagination: pagination
|
||||
}}
|
||||
loading={loading}
|
||||
selectionType="checkbox"
|
||||
onSelectRow={onSelectChange}
|
||||
onChange={handleTableChange}
|
||||
pagination={{
|
||||
...pagination,
|
||||
showSizeChanger: false,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) =>
|
||||
`共 ${total} 条`,
|
||||
}}
|
||||
scroll={{ x: 1000 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EvaluationReport;
|
||||
@ -0,0 +1,225 @@
|
||||
.Econtainer {
|
||||
padding: 8px 6px 0px 6px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
// 第一个大块 - 高度16%
|
||||
.EcontainerTop {
|
||||
height: 16%;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sectionContent {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.blocksContainer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
|
||||
.blockItem {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 92.55%);
|
||||
border-radius: 4px;
|
||||
border: 2px solid #FFFFFF;
|
||||
|
||||
.blockLeft {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 15px;
|
||||
padding-left: 20px;
|
||||
gap: 8px;
|
||||
|
||||
.blockTitle {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.blockNumber {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.blockChange {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #1269FF;
|
||||
line-height: 1.2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.arrow {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.checkIcon {
|
||||
font-size: 16px;
|
||||
color: #1269FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blockRight {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
border-radius: 0 4px 4px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.blockImage {
|
||||
height: 130%;
|
||||
object-fit: contain;
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 第二个大块 - 三个图表块
|
||||
.EcontainerMiddle {
|
||||
height: 30%;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sectionContent {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
|
||||
.chartBlock {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
|
||||
border: 2px solid #fff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
.chartTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
padding: 10px 15px 5px 15px;
|
||||
|
||||
.titleIcon {
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
|
||||
.chartContainer {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 120%;
|
||||
// // min-height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 第三大块 - 评估报告表格
|
||||
.EcontainerBottom {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
|
||||
.tableHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.tableTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
.titleIcon {
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableContainer {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
:global(.ant-table-wrapper) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global(.ant-table) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global(.ant-table-container) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:global(.ant-table-body) {
|
||||
height: calc(100% - 55px); // 减去表头高度
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
:global(.ant-table-tbody > tr > td) {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:global(.ant-table-thead > tr > th) {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
:global(.ant-pagination) {
|
||||
margin-top: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,919 @@
|
||||
.Ocontainer {
|
||||
padding: 8px 6px 0px 6px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.OcontainerTop {
|
||||
display: flex;
|
||||
|
||||
height: 50%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.OcontainerTopLeft {
|
||||
width: 72%;
|
||||
height: 100%;
|
||||
// background-color: pink;
|
||||
margin-right: 10px;
|
||||
// display: flex;
|
||||
|
||||
.OcontainerTopLeftTop {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
.alarmO {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-color: #F4F7FF;
|
||||
border: 1px solid #AED3FF;
|
||||
border-bottom: 0px solid #AED3FF;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 31px 0px #5382FE33 inset;
|
||||
display: flex;
|
||||
|
||||
.alarmOLeft {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alarmORight {
|
||||
flex: 1;
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 2px;
|
||||
gap: 18px;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
color: #333333;
|
||||
|
||||
.alarmORightText1 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
|
||||
.alarmORightText2 {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.alarmORightText3 {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.alarmTw {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-color: #FFF5f4;
|
||||
border: 1px solid #FFC5BC;
|
||||
border-bottom: 0px solid #FFC5BC;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 31px 0px #FE5F4C33 inset;
|
||||
display: flex;
|
||||
|
||||
.alarmTwLeft {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alarmTwRight {
|
||||
flex: 1;
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 2px;
|
||||
gap: 18px;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
color: #333333;
|
||||
|
||||
.alarmTwRightText1 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.alarmTwRightText2 {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.alarmTwRightText3 {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alarmTh {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-color: #FFF7F2;
|
||||
border: 1px solid #FFD9B2;
|
||||
border-bottom: 0px solid #FFD9B2;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 31px 0px #FD883C33 inset;
|
||||
display: flex;
|
||||
|
||||
.alarmThLeft {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alarmThRight {
|
||||
flex: 1;
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 2px;
|
||||
gap: 18px;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
color: #333333;
|
||||
|
||||
.alarmThRightText1 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.alarmThRightText2 {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.alarmThRightText3 {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alarmF {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-color: #EFF9FF;
|
||||
border: 1px solid #89E1FF;
|
||||
border-bottom: 0px solid #89E1FF;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 2px 31px 0px #22A4FD33 inset;
|
||||
display: flex;
|
||||
|
||||
.alarmFLeft {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alarmFRight {
|
||||
flex: 1;
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 2px;
|
||||
gap: 18px;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 12px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
color: #333333;
|
||||
|
||||
.alarmFRightText1 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.alarmFRightText2 {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.alarmFRightText3 {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.OcontainerTopLeftBottom {
|
||||
margin-top: 12px;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
|
||||
.OcontainerTopLeftBottomTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// padding: 8px 15px;
|
||||
padding: 8px 15px 0px 15px;
|
||||
|
||||
.titleLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-style: Medium;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
|
||||
|
||||
.titleIcon {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
|
||||
.titleRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-style: Medium;
|
||||
font-size: 13px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
|
||||
|
||||
.selectBox {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
outline: none;
|
||||
|
||||
&:focus {
|
||||
border-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.OcontainerTopLeftBottomChart {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.OcontainerTopRight {
|
||||
flex: 1;
|
||||
height: calc(100% - 3.3px);
|
||||
background-color: #fff;
|
||||
background-image: url('@/assets/safe_majorHazard/online_monitoring/backTopRight.png');
|
||||
background-size: 100% auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
||||
.realTimeDataHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 15px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.titleLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-style: Medium;
|
||||
font-size: 14px;
|
||||
line-height: 100%;
|
||||
letter-spacing: 0%;
|
||||
|
||||
.titleIcon {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
|
||||
.totalCount {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.dataItem {
|
||||
height: 23%;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #89E1FF;
|
||||
border-radius: 2px;
|
||||
margin: 0 15px;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
// color: #666;
|
||||
background-color: #EFF9FF;
|
||||
|
||||
&:last-child {
|
||||
// margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.dataItem1 {
|
||||
height: 25%;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #89E1FF;
|
||||
border-radius: 4px;
|
||||
margin: 0 15px;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0px 15px;
|
||||
background-color: #EFF9FF;
|
||||
|
||||
.dataItemLeft {
|
||||
width: 65%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.areaName {
|
||||
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
.rValue {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 0.2;
|
||||
}
|
||||
|
||||
.codeNumber {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.dataItemRight {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.circleContainer {
|
||||
position: relative;
|
||||
height: 80%;
|
||||
aspect-ratio: 1; // 强制宽高比1:1
|
||||
|
||||
.outerCircle {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(51, 176, 253, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.innerCircle {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
background-color: rgba(4, 128, 251, 0.8);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.levelText {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.4;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.riskText {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 300;
|
||||
font-size: 8px;
|
||||
color: #FFFFFF;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataItem2 {
|
||||
height: 25%;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(255, 197, 188, 1);
|
||||
border-radius: 4px;
|
||||
margin: 0 15px;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0px 15px;
|
||||
background-color: #fff5f4;
|
||||
|
||||
.dataItemLeft {
|
||||
width: 65%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.areaName {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
.rValue {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 0.2;
|
||||
}
|
||||
|
||||
.codeNumber {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.dataItemRight {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.circleContainer {
|
||||
position: relative;
|
||||
height: 80%;
|
||||
aspect-ratio: 1;
|
||||
|
||||
.outerCircle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(254, 214, 209, 1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.innerCircle {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
background-color: rgba(253, 41, 14, 1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.levelText {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.4;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.riskText {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 300;
|
||||
font-size: 8px;
|
||||
color: #FFFFFF;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataItem3 {
|
||||
height: 25%;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(255, 217, 178, 1);
|
||||
border-radius: 4px;
|
||||
margin: 0 15px;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0px 15px;
|
||||
background-color: #fef6f1;
|
||||
|
||||
.dataItemLeft {
|
||||
width: 65%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.areaName {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
.rValue {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 0.2;
|
||||
}
|
||||
|
||||
.codeNumber {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.dataItemRight {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.circleContainer {
|
||||
position: relative;
|
||||
height: 80%;
|
||||
aspect-ratio: 1;
|
||||
|
||||
.outerCircle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 234, 218, 1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.innerCircle {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
background-color: rgba(252, 103, 18, 1);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.levelText {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.4;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.riskText {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 300;
|
||||
font-size: 8px;
|
||||
color: #FFFFFF;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataItem4 {
|
||||
height: 25%;
|
||||
flex-shrink: 0;
|
||||
border: 1px solid #89E1FF;
|
||||
border-radius: 4px;
|
||||
margin: 0 15px;
|
||||
margin-bottom: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0px 15px;
|
||||
background-color: #EFF9FF;
|
||||
|
||||
.dataItemLeft {
|
||||
width: 65%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
|
||||
.areaName {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #333333;
|
||||
line-height: 2.2;
|
||||
}
|
||||
|
||||
.rValue {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
line-height: 0.2;
|
||||
}
|
||||
|
||||
.codeNumber {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.dataItemRight {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.circleContainer {
|
||||
position: relative;
|
||||
height: 80%;
|
||||
aspect-ratio: 1;
|
||||
|
||||
.outerCircle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(51, 176, 253, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.innerCircle {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
background-color: rgba(4, 128, 251, 0.8);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.levelText {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
color: #FFFFFF;
|
||||
line-height: 1.4;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.riskText {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 300;
|
||||
font-size: 8px;
|
||||
color: #FFFFFF;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.OcontainerBottom {
|
||||
background-color: #fff;
|
||||
flex: 1;
|
||||
padding: 8px 15px 5px 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tableHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
// border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.tableTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
.titleIcon {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
|
||||
.tableActions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
// 自定义按钮样式
|
||||
:global(.ant-btn) {
|
||||
background-color: #ffffff !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5 !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: #ffffff !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #e6e6e6 !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// 主要按钮样式
|
||||
&.ant-btn-primary {
|
||||
background-color: #ffffff !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5 !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: #ffffff !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #e6e6e6 !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 危险按钮样式
|
||||
&.ant-btn-dangerous {
|
||||
background-color: #ffffff !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5 !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: #ffffff !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: #e6e6e6 !important;
|
||||
border-color: #DFE4F6 !important;
|
||||
color: #333333 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 禁用状态
|
||||
&:disabled {
|
||||
background-color: #f5f5f5 !important;
|
||||
border-color: #d9d9d9 !important;
|
||||
color: #bfbfbf !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableContainer {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
:global(.ant-table) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:global(.ant-table-thead > tr > th) {
|
||||
background-color: #f5f5fa;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.ant-table-tbody > tr > td) {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.ant-table-tbody > tr:hover > td) {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
:global(.ant-pagination) {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
.containerR {
|
||||
padding: 8px 6px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.containerOne {
|
||||
height: 30%;
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
background-color: aqua;
|
||||
gap: 12px;
|
||||
|
||||
.containerOneLeft{
|
||||
background-color: #999;
|
||||
width:58%;
|
||||
// margin-right: 12px;
|
||||
}
|
||||
.containerOneRight{
|
||||
background-color: #999;
|
||||
width:42%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.containerTwo{
|
||||
flex: 1;
|
||||
background-color: blue;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,418 @@
|
||||
.Rcontainer {
|
||||
padding: 8px 6px 0px 6px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
|
||||
// 第一个div - 高度20%
|
||||
.RcontainerTop {
|
||||
height: 16%;
|
||||
// background-color: #fff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sectionContent {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// padding: 15px;
|
||||
|
||||
.blocksContainer {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
|
||||
.blockItem {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 92.55%);
|
||||
border-radius: 4px;
|
||||
border: 2px solid #FFFFFF;
|
||||
|
||||
.blockLeft {
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 15px;
|
||||
padding-left: 20px;
|
||||
gap: 8px;
|
||||
|
||||
.blockTitle {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.blockNumber {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
color: #333333;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.blockChange {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #1269FF;
|
||||
line-height: 1.2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.arrow {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.checkIcon {
|
||||
font-size: 16px;
|
||||
color: #1269FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blockRight {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
border-radius: 0 4px 4px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.blockImage {
|
||||
// width: 80%;
|
||||
height: 130%;
|
||||
// height: 80%;
|
||||
object-fit: contain;
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 第二个div - 高度30%
|
||||
.RcontainerMiddle {
|
||||
height: 30%;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sectionContent {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
height: 100%;
|
||||
|
||||
|
||||
|
||||
.middleBlock1 {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
|
||||
|
||||
border: 2px solid #fff;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
padding: 0px 10px 10px 2px;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
.block1Header {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
|
||||
.block1Title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
.titleIcon {
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
|
||||
.block1Select {
|
||||
width: 100px;
|
||||
|
||||
:global(.ant-select-selector) {
|
||||
height: 28px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
:global(.ant-select-selection-item) {
|
||||
line-height: 26px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.riskLegend {
|
||||
position: absolute;
|
||||
Top: 18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
z-index: 10;
|
||||
|
||||
.legendItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
.legendDot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.legendText {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block1Chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-top: 20px;
|
||||
|
||||
.mapImage {
|
||||
margin-top: 7%;
|
||||
width: 90%;
|
||||
height: 77%;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.middleBlock2 {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
// background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
|
||||
// border: 2px solid #fff;
|
||||
background-color: #fff;
|
||||
// border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: PingFang SC;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
padding: 5px 10px 5px 10px;
|
||||
|
||||
.middleBlock2Title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// margin-bottom: 10px;
|
||||
|
||||
.titleLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
.titleIcon {
|
||||
width: 3px;
|
||||
height: 14px;
|
||||
background-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
|
||||
.titleRight {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.middleBlock2Chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// min-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 第三个div - 占满剩余位置
|
||||
.RcontainerBottom {
|
||||
flex: 1; // 占满剩余空间
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sectionContent {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
padding: 0;
|
||||
|
||||
.leftBlock {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background: url('@/assets/safe_majorHazard/online_monitoring/risk3.png') no-repeat center center;
|
||||
background-size: cover;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 15px;
|
||||
|
||||
.leftBlockTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
.titleIcon {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
|
||||
.leftBlockImage {
|
||||
height: 40%;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
.leftBlockItem {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
// background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
font-family: PingFang SC;
|
||||
|
||||
.itemTitle {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.itemValue {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rightBlock {
|
||||
width: 68%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tableHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 15px 5px 15px;
|
||||
|
||||
.tableTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
|
||||
.titleIcon {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableContainer {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
:global(.ant-table) {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:global(.ant-table-thead > tr > th) {
|
||||
background-color: #f5f5fa;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.ant-table-tbody > tr > td) {
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.ant-table-tbody > tr:hover > td) {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
:global(.ant-pagination) {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue