删除多余菜单和文件
jiangxucong
2 weeks ago
parent
6585574116
commit
76e309860a
File diff suppressed because it is too large
Load Diff
@ -1,83 +0,0 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { connect } from '@umijs/max';
|
||||
import { Tabs } from 'antd';
|
||||
|
||||
// 导入子组件
|
||||
import BasicInfoManagement from './components/BasicInfoManagement';
|
||||
import QualificationManagement from './components/QualificationManagement';
|
||||
import PersonnelBasicInfo from './components/PersonnelBasicInfo';
|
||||
|
||||
import styles from './BasicInformation.less';
|
||||
|
||||
@connect(({ staffsheet, loading }) => ({
|
||||
staffsheet,
|
||||
loading: loading.models.staffsheet,
|
||||
}))
|
||||
|
||||
class BasicInformation extends PureComponent {
|
||||
state = {
|
||||
activeTab: '1',
|
||||
}
|
||||
|
||||
// 渲染Tab内容
|
||||
renderTabContent = () => {
|
||||
const { activeTab } = this.state;
|
||||
const { staffsheet, loading, dispatch } = this.props;
|
||||
|
||||
const childProps = {
|
||||
staffsheet,
|
||||
loading,
|
||||
dispatch
|
||||
};
|
||||
|
||||
switch (activeTab) {
|
||||
case '1':
|
||||
return <BasicInfoManagement {...childProps} />;
|
||||
case '2':
|
||||
return <QualificationManagement {...childProps} />;
|
||||
case '3':
|
||||
return <PersonnelBasicInfo {...childProps} />;
|
||||
default:
|
||||
return <BasicInfoManagement {...childProps} />;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { activeTab } = this.state;
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
key: '1',
|
||||
label: '基本信息管理',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '资质证照管理',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '人员基础信息',
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* 顶部标签页 */}
|
||||
<div style={{ marginBottom: 0, background: '#EEEFF7', padding: '0 24px' }}>
|
||||
<Tabs
|
||||
activeKey={activeTab}
|
||||
onChange={(key) => this.setState({ activeTab: key })}
|
||||
items={tabItems}
|
||||
className="custom-tabs"
|
||||
style={{ marginBottom: 0 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 根据选中的Tab渲染对应的子组件 */}
|
||||
{this.renderTabContent()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BasicInformation;
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,167 +0,0 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
|
||||
import SelectDeptTree from '@/components/SelectDeptTree'
|
||||
import SelectOrganTree from '@/components/SelectOrganTree'
|
||||
import datadictionary from '@/utils/dataDictionary'
|
||||
import { formatDictOptions, verifyPhone } from '@/utils/globalCommon'
|
||||
import { NumberInput } from '@/components/NumberInput'
|
||||
import styles from '../BasicInformation.less'
|
||||
import style from '@/global.less'
|
||||
import dayjs from 'dayjs'
|
||||
import { formatDate } from '@/utils/formatUtils'
|
||||
|
||||
const { Item: FormItem } = Form
|
||||
const { TextArea } = Input
|
||||
const dictData = datadictionary
|
||||
|
||||
//新增表单
|
||||
let getDeptTreeBySelectTree
|
||||
let getOrganTreeBySelectTree
|
||||
|
||||
const BasicInfoCreateForm = (props => {
|
||||
const [form] = Form.useForm()
|
||||
|
||||
const {
|
||||
modalVisible,
|
||||
handleAdd,
|
||||
handleModalVisible,
|
||||
loading,
|
||||
dispatch,
|
||||
selectDeptTree,
|
||||
selectOrganTree
|
||||
} = props
|
||||
|
||||
// 清空和初始化逻辑可保留
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
}, [modalVisible])
|
||||
|
||||
const okHandle = () => {
|
||||
form.validateFields()
|
||||
.then(fieldsValue => {
|
||||
form.resetFields()
|
||||
handleAdd(fieldsValue)
|
||||
})
|
||||
.catch(() => { })
|
||||
}
|
||||
|
||||
const afterClose = () => {
|
||||
form.resetFields();
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={550}
|
||||
bodyStyle={{ minHeight: '200px' }}
|
||||
className={styles.createForm}
|
||||
centered
|
||||
destroyOnClose
|
||||
title='新建项目'
|
||||
open={modalVisible}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
afterClose={afterClose}
|
||||
confirmLoading={loading}
|
||||
footer={[
|
||||
<button
|
||||
key="cancel"
|
||||
onClick={() => handleModalVisible()}
|
||||
className={styles['modal-cancel-btn']}
|
||||
>取消</button>,
|
||||
<button
|
||||
key="submit"
|
||||
onClick={okHandle}
|
||||
className={styles['modal-ok-btn']}
|
||||
>确定</button>
|
||||
]}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
// layout='vertical'
|
||||
requiredMark={false}
|
||||
style={{ marginTop: 30 }}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="项目名称"
|
||||
name="projectName"
|
||||
rules={[{ required: true, message: '请输入项目名称' }]}
|
||||
>
|
||||
<Input placeholder="输入项目名称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="地理信息"
|
||||
name="location"
|
||||
rules={[{ required: true, message: '请输入位置信息' }]}
|
||||
>
|
||||
<Input placeholder="请输入位置信息" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="占地面积"
|
||||
name="area"
|
||||
rules={[{ required: true, message: '请输入面积信息' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="面积信息"
|
||||
addonAfter="m²"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="职业人数"
|
||||
name="peopleCount"
|
||||
rules={[{ required: true, message: '请输入人数' }]}
|
||||
>
|
||||
<Input placeholder="输入数量" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="组织机构"
|
||||
name="org"
|
||||
rules={[{ required: true, message: '请选择组织机构' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择"
|
||||
options={[
|
||||
{ label: '机构A', value: 'A' },
|
||||
{ label: '机构B', value: 'B' }
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="安全等级"
|
||||
name="safeLevel"
|
||||
rules={[{ required: true, message: '请选择安全等级' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择"
|
||||
options={[
|
||||
{ label: '一级', value: '1' },
|
||||
{ label: '二级', value: '2' },
|
||||
{ label: '三级', value: '3' }
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
})
|
||||
|
||||
export default BasicInfoCreateForm
|
||||
@ -1,149 +0,0 @@
|
||||
import { useEffect } from 'react'
|
||||
import { Col, Form, Input, Modal, Row, Select } from 'antd'
|
||||
import styles from '../BasicInformation.less'
|
||||
|
||||
const BasicInfoUpdateForm = (props => {
|
||||
const [form] = Form.useForm()
|
||||
|
||||
const {
|
||||
updateModalVisible,
|
||||
handleUpdate,
|
||||
handleUpdateModalVisible,
|
||||
loading,
|
||||
values = {}
|
||||
} = props
|
||||
|
||||
useEffect(() => {
|
||||
if (updateModalVisible) {
|
||||
form.setFieldsValue(values)
|
||||
}
|
||||
}, [updateModalVisible, values, form])
|
||||
|
||||
const okHandle = () => {
|
||||
form.validateFields()
|
||||
.then(fieldsValue => {
|
||||
form.resetFields()
|
||||
handleUpdate(fieldsValue)
|
||||
})
|
||||
.catch(() => { })
|
||||
}
|
||||
|
||||
const afterClose = () => {
|
||||
form.resetFields();
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={550}
|
||||
bodyStyle={{ minHeight: '200px' }}
|
||||
className={styles.createForm}
|
||||
centered
|
||||
destroyOnClose
|
||||
title='修改项目'
|
||||
open={updateModalVisible}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleUpdateModalVisible()}
|
||||
afterClose={afterClose}
|
||||
confirmLoading={loading}
|
||||
footer={[
|
||||
<button
|
||||
key="cancel"
|
||||
onClick={() => handleUpdateModalVisible()}
|
||||
className={styles['modal-cancel-btn']}
|
||||
>取消</button>,
|
||||
<button
|
||||
key="submit"
|
||||
onClick={okHandle}
|
||||
className={styles['modal-ok-btn']}
|
||||
>确定</button>
|
||||
]}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
requiredMark={false}
|
||||
style={{ marginTop: 30 }}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="项目名称"
|
||||
name="projectName"
|
||||
rules={[{ required: true, message: '请输入项目名称' }]}
|
||||
>
|
||||
<Input placeholder="输入项目名称" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="地理信息"
|
||||
name="location"
|
||||
rules={[{ required: true, message: '请输入位置信息' }]}
|
||||
>
|
||||
<Input placeholder="请输入位置信息" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="占地面积"
|
||||
name="area"
|
||||
rules={[{ required: true, message: '请输入面积信息' }]}
|
||||
>
|
||||
<Input
|
||||
placeholder="面积信息"
|
||||
addonAfter="m²"
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="职业人数"
|
||||
name="peopleCount"
|
||||
rules={[{ required: true, message: '请输入人数' }]}
|
||||
>
|
||||
<Input placeholder="输入数量" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="组织机构"
|
||||
name="org"
|
||||
rules={[{ required: true, message: '请选择组织机构' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择"
|
||||
options={[
|
||||
{ label: '机构A', value: 'A' },
|
||||
{ label: '机构B', value: 'B' }
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="安全等级"
|
||||
name="safeLevel"
|
||||
rules={[{ required: true, message: '请选择安全等级' }]}
|
||||
>
|
||||
<Select
|
||||
placeholder="请选择"
|
||||
options={[
|
||||
{ label: '一级', value: '1' },
|
||||
{ label: '二级', value: '2' },
|
||||
{ label: '三级', value: '3' }
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
})
|
||||
|
||||
export default BasicInfoUpdateForm
|
||||
@ -1,52 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Modal, Row, Col } from 'antd';
|
||||
import styles from '../BasicInformation.less';
|
||||
|
||||
const BasicInfoViewForm = (props) => {
|
||||
const { viewModalVisible, handleViewModalVisible, values = {} } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={500}
|
||||
bodyStyle={{ minHeight: '180px'}}
|
||||
className={styles.createForm}
|
||||
centered
|
||||
destroyOnClose
|
||||
title="详情"
|
||||
open={viewModalVisible}
|
||||
footer={null}
|
||||
onCancel={() => handleViewModalVisible(false)}
|
||||
>
|
||||
<Row gutter={0} style={{ marginTop: 30 }}>
|
||||
<Col span={12} style={{ marginBottom: 18 }}>
|
||||
<div className={styles['view-label']}>项目名称</div>
|
||||
<div className={styles['view-value']}>{values.projectName || '-'}</div>
|
||||
</Col>
|
||||
<Col span={12} style={{ marginBottom: 18 }}>
|
||||
<div className={styles['view-label']}>地理信息</div>
|
||||
<div className={styles['view-value']}>{values.location || '-'}</div>
|
||||
</Col>
|
||||
<Col span={12} style={{ marginBottom: 18 }}>
|
||||
<div className={styles['view-label']}>占地面积</div>
|
||||
<div className={styles['view-value']}>
|
||||
{values.area ? `${values.area}` : '-'}
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={12} style={{ marginBottom: 18 }}>
|
||||
<div className={styles['view-label']}>职业人数</div>
|
||||
<div className={styles['view-value']}>{values.staffCount || '-'}</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div className={styles['view-label']}>组织机构</div>
|
||||
<div className={styles['view-value']}>{values.organization || '-'}</div>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<div className={styles['view-label']}>安全等级</div>
|
||||
<div className={styles['view-value']}>{values.safetyLevel || '-'}</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default BasicInfoViewForm;
|
||||
@ -1,152 +0,0 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Col, DatePicker, Form, Input, Modal, Row, Select } from 'antd'
|
||||
import SelectDeptTree from '@/components/SelectDeptTree'
|
||||
import SelectOrganTree from '@/components/SelectOrganTree'
|
||||
import datadictionary from '@/utils/dataDictionary'
|
||||
import { formatDictOptions, verifyPhone } from '@/utils/globalCommon'
|
||||
import { NumberInput } from '@/components/NumberInput'
|
||||
import styles from '../BasicInformation.less'
|
||||
import style from '@/global.less'
|
||||
import dayjs from 'dayjs'
|
||||
import { formatDate } from '@/utils/formatUtils'
|
||||
|
||||
const { Item: FormItem } = Form
|
||||
const { TextArea } = Input
|
||||
const dictData = datadictionary
|
||||
|
||||
//新增表单
|
||||
let getDeptTreeBySelectTree
|
||||
let getOrganTreeBySelectTree
|
||||
|
||||
const PersonnelCreateForm = (props => {
|
||||
const [form] = Form.useForm()
|
||||
|
||||
const {
|
||||
modalVisible,
|
||||
handleAdd,
|
||||
handleModalVisible,
|
||||
loading,
|
||||
dispatch,
|
||||
selectDeptTree,
|
||||
selectOrganTree
|
||||
} = props
|
||||
|
||||
// 清空和初始化逻辑可保留
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
}, [modalVisible])
|
||||
|
||||
const okHandle = () => {
|
||||
form.validateFields()
|
||||
.then(fieldsValue => {
|
||||
form.resetFields()
|
||||
handleAdd(fieldsValue)
|
||||
})
|
||||
.catch(() => { })
|
||||
}
|
||||
|
||||
const afterClose = () => {
|
||||
form.resetFields();
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
width={550}
|
||||
bodyStyle={{ minHeight: '200px' }}
|
||||
className={styles.createForm}
|
||||
centered
|
||||
destroyOnClose
|
||||
title='新增人员'
|
||||
open={modalVisible}
|
||||
onOk={okHandle}
|
||||
onCancel={() => handleModalVisible()}
|
||||
afterClose={afterClose}
|
||||
confirmLoading={loading}
|
||||
footer={[
|
||||
<button
|
||||
key="cancel"
|
||||
onClick={() => handleModalVisible()}
|
||||
className={styles['modal-cancel-btn']}
|
||||
>取消</button>,
|
||||
<button
|
||||
key="submit"
|
||||
onClick={okHandle}
|
||||
className={styles['modal-ok-btn']}
|
||||
>确定</button>
|
||||
]}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
requiredMark={false}
|
||||
style={{ marginTop: 30 }}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="姓 名"
|
||||
name="name"
|
||||
rules={[{ required: true, message: '请输入姓名' }]}
|
||||
>
|
||||
<Input placeholder="输入姓名" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="身份证号"
|
||||
name="idNumber"
|
||||
rules={[{ required: true, message: '请输入身份证号' }]}
|
||||
>
|
||||
<Input placeholder="请输入身份证号" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="所属公司"
|
||||
name="company"
|
||||
rules={[{ required: true, message: '请输入公司名' }]}
|
||||
>
|
||||
<Input placeholder="请输入公司名" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="联系方式"
|
||||
name="phone"
|
||||
rules={[{ required: true, message: '请输入手机号' }]}
|
||||
>
|
||||
<Input placeholder="请输入手机号" />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="人员分类"
|
||||
name="personType"
|
||||
rules={[{ required: true, message: '请选择人员分类' }]}
|
||||
>
|
||||
<Select placeholder="请选择" options={[]} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="合同状态"
|
||||
name="contractStatus"
|
||||
rules={[{ required: true, message: '请选择合同状态' }]}
|
||||
>
|
||||
<Select placeholder="请选择" options={[]} />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal>
|
||||
)
|
||||
})
|
||||
|
||||
export default PersonnelCreateForm
|
||||
@ -1,113 +0,0 @@
|
||||
import { useEffect } from 'react'
|
||||
import { Button, Col, Form, Input, Row } from 'antd'
|
||||
import { UpOutlined, SearchOutlined, RedoOutlined } from '@ant-design/icons'
|
||||
import SelectDeptTree from '@/components/SelectDeptTree'
|
||||
import SelectOrganTree from '@/components/SelectOrganTree'
|
||||
import style from '@/global.less'
|
||||
|
||||
const { Item: FormItem } = Form
|
||||
let getDeptTreeBySelectTree
|
||||
let getOrganTreeBySelectTree
|
||||
|
||||
const StaffSheetRenderAdvancedForm = (props) => {
|
||||
const [form] = Form.useForm()
|
||||
const { dispatch, handleSearch, handleFormReset, toggleForm, selectDeptTree, selectOrganTree, params } = props
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({
|
||||
user_name: params?.user_name,
|
||||
user_name_cn: params?.user_name_cn,
|
||||
deptname: params?.deptname,
|
||||
orgname: params?.orgname,
|
||||
})
|
||||
}, [params])
|
||||
|
||||
const onFinish = values => {
|
||||
// if (getDeptTreeBySelectTree) {
|
||||
// values.dept_code = getDeptTreeBySelectTree.dept_code
|
||||
// values.deptname = getDeptTreeBySelectTree.title
|
||||
// }
|
||||
|
||||
if (getOrganTreeBySelectTree) {
|
||||
values.org_code = getOrganTreeBySelectTree.org_code
|
||||
values.orgname = getOrganTreeBySelectTree.title
|
||||
}
|
||||
|
||||
handleSearch(values)
|
||||
}
|
||||
|
||||
const myHandleFormReset = () => {
|
||||
form.resetFields()
|
||||
handleFormReset()
|
||||
}
|
||||
|
||||
const selectedDeptTreeValue = (deptRecord) => {
|
||||
getDeptTreeBySelectTree = deptRecord
|
||||
}
|
||||
|
||||
const selectedOrganTreeValue = (orgRecord) => {
|
||||
getOrganTreeBySelectTree = orgRecord
|
||||
}
|
||||
|
||||
const parentDeptTreeMethod = {
|
||||
dispatch: dispatch,
|
||||
selectDeptTree: selectDeptTree,
|
||||
selectedDeptTreeValue: selectedDeptTreeValue
|
||||
}
|
||||
|
||||
const parentOrganTreeMethod = {
|
||||
dispatch: dispatch,
|
||||
selectOrganTree: selectOrganTree,
|
||||
selectedOrganTreeValue: selectedOrganTreeValue
|
||||
}
|
||||
|
||||
return (
|
||||
<Form form={form} onFinish={onFinish} layout='inline'>
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }} className={style.searchInput}>
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label='用户名' name='user_name'>
|
||||
<Input placeholder='请输入' />
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label='用户名称' name='user_name_cn'>
|
||||
<Input placeholder='请输入' />
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
||||
<Col md={8} sm={24}>
|
||||
<FormItem label='机构代码' name='orgname'>
|
||||
<SelectOrganTree {...parentOrganTreeMethod} />
|
||||
</FormItem>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row gutter={{md: 8, lg: 24, xl: 48}} className={style.searchBox}>
|
||||
{/*<Col md={8} sm={24}>*/}
|
||||
{/* <FormItem label='部门名称' name='deptname'>*/}
|
||||
{/* <SelectDeptTree placeholder={'请选择部门'} {...parentDeptTreeMethod} />*/}
|
||||
{/* </FormItem>*/}
|
||||
{/*</Col>*/}
|
||||
|
||||
<Col md={24} sm={24}>
|
||||
<div className={style.searchBtn}>
|
||||
<Button type='primary' htmlType='submit'>
|
||||
查询
|
||||
</Button>
|
||||
|
||||
<Button onClick={myHandleFormReset}>
|
||||
重置
|
||||
</Button>
|
||||
|
||||
<a onClick={() => toggleForm(form)}>
|
||||
收起 <UpOutlined />
|
||||
</a>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
export default StaffSheetRenderAdvancedForm
|
||||
@ -1,81 +0,0 @@
|
||||
import { useEffect } from 'react'
|
||||
import {Button, Col, Form, Input, Row, DatePicker, Select} from 'antd'
|
||||
import {DownOutlined, RedoOutlined, SearchOutlined} from '@ant-design/icons'
|
||||
import style from '@/global.less'
|
||||
import dayjs from 'dayjs'
|
||||
const { Item: FormItem } = Form
|
||||
|
||||
const StaffSheetRenderSimpleForm = (props) => {
|
||||
const [form] = Form.useForm()
|
||||
const { handleSearch, handleFormReset, toggleForm, params } = props
|
||||
|
||||
useEffect(() => {
|
||||
form.setFieldsValue({
|
||||
user_name: params?.user_name,
|
||||
user_name_cn: params?.user_name_cn,
|
||||
})
|
||||
}, [params])
|
||||
|
||||
const onFinish = values => {
|
||||
handleSearch(values)
|
||||
}
|
||||
|
||||
const myHandleFormReset = () => {
|
||||
form.resetFields()
|
||||
handleFormReset()
|
||||
}
|
||||
|
||||
return (
|
||||
<Form form={form} onFinish={onFinish} layout='inline'>
|
||||
<Row gutter={{ md: 8, lg: 24, xl: 48 }} className={style.searchInput}>
|
||||
<Col md={4} sm={24}>
|
||||
<FormItem label='我的查询条件' name='wdcxtj'>
|
||||
<Select
|
||||
placeholder='请选择'
|
||||
options={[]}
|
||||
/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
||||
<Col md={4} sm={24}>
|
||||
<FormItem label='日期' name='rq' rules={[{ required: true, message: '请选择日期!' }]}>
|
||||
<DatePicker defaultValue={dayjs('2025-04-10', 'YYYY-MM-DD')} format='YYYY-MM-DD' />
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
||||
<Col md={4} sm={24}>
|
||||
<FormItem label='工作地点' name='gzdd'>
|
||||
<Input placeholder='请输入' />
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
||||
|
||||
<Col md={4} sm={24}>
|
||||
<FormItem label='工号' name='gh'>
|
||||
<Input placeholder='请输入' defaultValue="123456"/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
||||
<Col md={4} sm={24}>
|
||||
<FormItem label='名称' name='gh'>
|
||||
<Input placeholder='请输入'/>
|
||||
</FormItem>
|
||||
</Col>
|
||||
|
||||
<Col md={4} sm={24}>
|
||||
<div className={style.searchBtn}>
|
||||
<Button type='primary' htmlType='submit'>
|
||||
查询
|
||||
</Button>
|
||||
|
||||
<Button onClick={myHandleFormReset}>
|
||||
重置
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
export default StaffSheetRenderSimpleForm
|
||||
@ -1,32 +0,0 @@
|
||||
import MyCard from "@/pages/business_hiddentrouble/component/MyCard";
|
||||
import {Col, Row, Tabs} from "antd";
|
||||
import HiddenDangerInspection from "@/pages/business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection";
|
||||
import styles from './HiddenTrouble.less'
|
||||
import HiddenDangerRighted from "@/pages/business_hiddentrouble/component/hiddenDangerRighted/hiddenDangerRighted";
|
||||
import HiddenDangerCount from "@/pages/business_hiddentrouble/component/hiddenDangerCount/hiddenDangerCount";
|
||||
|
||||
const items = [
|
||||
{
|
||||
key: '1',
|
||||
label: '隐患检查',
|
||||
children: <HiddenDangerInspection key={1}/>,
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '隐患整改',
|
||||
children: <HiddenDangerRighted key={2}/>
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '隐患统计',
|
||||
children: <HiddenDangerCount key={3}/>,
|
||||
},
|
||||
];
|
||||
const HiddenTrouble = () => {
|
||||
return (
|
||||
<>
|
||||
<Tabs className={styles['custom-tabs']} type={'card'} defaultActiveKey="1" items={items} tabBarGutter={10} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default HiddenTrouble
|
||||
@ -1,43 +0,0 @@
|
||||
/* 移除下滑线 */
|
||||
.custom-tabs .ant-tabs-ink-bar {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 未选中状态 */
|
||||
.custom-tabs {
|
||||
.ant-tabs-tab {
|
||||
background: #f0f0f0 !important;
|
||||
border: none !important;
|
||||
border-radius: 6px !important;
|
||||
margin-right: 8px !important;
|
||||
padding: 8px 16px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 选中状态 - 背景变为蓝色 */
|
||||
.custom-tabs {
|
||||
:global(.ant-tabs-tab-active) {
|
||||
background: #2E4CD4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 选中状态 - 文字变为白色 */
|
||||
.custom-tabs :global(.ant-tabs-tab-active .ant-tabs-tab-btn) {
|
||||
color: white !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
/* 移除底部边框 */
|
||||
.custom-tabs .ant-tabs-nav::before {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.custom-tabs .ant-tabs-tab:hover {
|
||||
background: #e6e6e6 !important;
|
||||
}
|
||||
|
||||
.custom-tabs .ant-tabs-tab-active:hover {
|
||||
background: #40a9ff !important;
|
||||
}
|
||||
@ -1,325 +0,0 @@
|
||||
import Icon from "antd/es/icon";
|
||||
import {Col, Pagination, Row, Table} from "antd";
|
||||
import {Descriptions} from "antd";
|
||||
import * as echarts from 'echarts';
|
||||
import {useEffect, useRef} from "react";
|
||||
|
||||
const HourglassSvg=()=>{
|
||||
return (
|
||||
<svg width="21px" height="33px" fill="currentColor" viewBox="0 0 1024 1024">
|
||||
<title>hourglass icon</title>
|
||||
<path
|
||||
d="M768 832h-512c-17.6 0-32-14.4-32-32s14.4-32 32-32h64v-192c0-52.8 33.6-99.2 84-116.8-50.4-17.6-84-64-84-116.8v-192h-64c-17.6 0-32-14.4-32-32s14.4-32 32-32h512c17.6 0 32 14.4 32 32s-14.4 32-32 32h-64v192c0 52.8-33.6 99.2-84 116.8 50.4 17.6 84 64 84 116.8v192h64c17.6 0 32 14.4 32 32s-14.4 32-32 32zM320 192v192c0 70.4 57.6 128 128 128s128-57.6 128-128v-192h-256zM448 768c-70.4 0-128-57.6-128-128v-192h256v192c0 70.4-57.6 128-128 128z"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
const HourglassIcon=(props)=>{
|
||||
return(
|
||||
<Icon component={HourglassSvg} {...props}></Icon>
|
||||
)
|
||||
}
|
||||
|
||||
const MyCard = (props) => {
|
||||
return (
|
||||
<div style={{
|
||||
// width: '100%',
|
||||
// height: '134px',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: 'white',
|
||||
padding: '20px 20px',
|
||||
boxSizing: 'border-box',
|
||||
display:'flex',
|
||||
justifyContent:'space-between'
|
||||
}}>
|
||||
<div>
|
||||
<div>{props.title}</div>
|
||||
<div style={{fontWeight: '600', fontSize: '18px', }}>{props.num}</div>
|
||||
{props.flag === 1 && <div style={{color: '#44BB5F', fontSize: '14px'}}>
|
||||
{props.grow === 1 ? <>⬆</> : <>⬇</>} {props.data}% 较上周
|
||||
</div>}
|
||||
{props.flag===2 && <div style={{color: 'orange',fontSize:'14px'}}>
|
||||
{props.grow===1 ? <>⬆</>:<>⬇</>} {props.data}% 较上周
|
||||
</div>}
|
||||
{props.flag===3 && <div style={{color: 'red',fontSize:'14px'}}>
|
||||
{props.grow===1 ? <>⬆</>:<>⬇</>} {props.data}% 较上周
|
||||
</div>}
|
||||
</div>
|
||||
<div style={{color:props.color,height:'53px',width:'53px',backgroundColor:props.backgroundColor,borderRadius:'10px',display:'flex',justifyContent:'center',alignItems: 'center'}}>
|
||||
<HourglassSvg ></HourglassSvg>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
// 环形图
|
||||
const items = [
|
||||
{
|
||||
key: '1',
|
||||
children: '设备安全',
|
||||
color:'#868BF9',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
children: '电气安全',
|
||||
color:'#F29629',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
children: '消防安全',
|
||||
color:'#FFD85A',
|
||||
},
|
||||
{
|
||||
key: '4',
|
||||
children: '工艺安全',
|
||||
color:'#5ED6BE',
|
||||
},
|
||||
{
|
||||
key: '5',
|
||||
children: '储罐专业',
|
||||
color:'#00AAFF',
|
||||
},
|
||||
{
|
||||
key: '6',
|
||||
children: '其他',
|
||||
color:'#5FDCF7',
|
||||
},
|
||||
];
|
||||
export const PieChart=(props)=>{
|
||||
const chartRef=useRef(null)
|
||||
const data=[
|
||||
{ value: 5, name: '设备安全' ,itemStyle:{color:'#868BF9'}},
|
||||
{ value: 5, name: '电气安全',itemStyle:{color:'#F29629'} },
|
||||
{ value: 10, name: '消防安全' ,itemStyle:{color:'#FFD85A'}},
|
||||
{ value: 20, name: '工艺安全',itemStyle:{color:'#5ED6BE'} },
|
||||
{ value: 30, name: '储罐专业',itemStyle:{color:'#00AAFF'} },
|
||||
{ value: 30, name:'其他',itemStyle:{color:'#5FDCF7'}}
|
||||
]
|
||||
useEffect(() => {
|
||||
const chart=echarts.init(chartRef.current)
|
||||
const option = {
|
||||
legend: {
|
||||
show:false,
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['设备安全', '电气安全', '消防安全', '工艺安全', '储罐专业','其他']
|
||||
},
|
||||
grid:{
|
||||
top: 20,
|
||||
bottom: 20,
|
||||
left: 20,
|
||||
right: 20,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{d}%',
|
||||
position: 'outsider',
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
position:'center',
|
||||
fontSize: '15',
|
||||
fontWeight: 'bold',
|
||||
formatter: function(params) {
|
||||
return `${params.name}\n${params.percent}%`;
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
data:data,
|
||||
},
|
||||
]
|
||||
};
|
||||
chart.setOption(option)
|
||||
// 响应式调整
|
||||
const handleResize = () => {
|
||||
chart.resize();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
chart.dispose();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return(
|
||||
<div style={{backgroundColor:'#fff',borderRadius:'5px',padding:'15px',boxSizing:'border-box'}}>
|
||||
<Row>
|
||||
<Col span={9}>
|
||||
<Descriptions
|
||||
title={<><span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span> {props.title}</>}
|
||||
column={2}
|
||||
>
|
||||
{items.map((item)=>{
|
||||
return(
|
||||
<Descriptions.Item>
|
||||
<div style={{display:'flex',alignItems:'center',fontSize:'12px'}}>
|
||||
<span style={{borderBottom:'4px solid',width:'10px',marginRight:'5px',borderBottomColor:item.color }}></span>
|
||||
{item.children}
|
||||
</div>
|
||||
</Descriptions.Item>
|
||||
)
|
||||
})}
|
||||
|
||||
|
||||
</Descriptions>
|
||||
|
||||
</Col>
|
||||
<Col span={15}>
|
||||
<div ref={chartRef}
|
||||
style={{width:'100%',height:'100%',}}
|
||||
key={2}
|
||||
>
|
||||
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 柱状图
|
||||
|
||||
export const BarChart=()=>{
|
||||
const chartRef=useRef(null)
|
||||
const data=[]
|
||||
useEffect(() => {
|
||||
const chart =echarts.init(chartRef.current)
|
||||
const option = {
|
||||
grid:{
|
||||
top:20,
|
||||
bottom:20,
|
||||
right:30,
|
||||
left:30,
|
||||
},
|
||||
xAxis:{
|
||||
type: 'category',
|
||||
data:['每日','每周','每月','每季度','每半年','每年','季节性','专项'],
|
||||
axisLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color:'#D5E2FF'
|
||||
}
|
||||
},
|
||||
axisLabel:{
|
||||
show:true,
|
||||
position:'bottom',
|
||||
color:'#333'
|
||||
},
|
||||
|
||||
},
|
||||
yAxis:{
|
||||
type:'value',
|
||||
|
||||
axisLine:{
|
||||
show:true,
|
||||
min:0,
|
||||
lineStyle:{
|
||||
color:'#D5E2FF'
|
||||
}
|
||||
|
||||
},
|
||||
axisLabel: {
|
||||
show:true,
|
||||
color:'#333'
|
||||
},
|
||||
splitLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color:'#D5E2FF',
|
||||
type:'dashed'
|
||||
}
|
||||
},
|
||||
nameTextStyle:{
|
||||
color:'#000',
|
||||
fontSize:16,
|
||||
fontWeight:'600',
|
||||
}
|
||||
},
|
||||
series:[
|
||||
{
|
||||
name: '数据系列1',
|
||||
type: 'bar', // 柱状图
|
||||
data: [120, 200, 150, 80, 70,123,70,90], // 数据值
|
||||
barWidth: '20%', // 柱子宽度
|
||||
itemStyle: {
|
||||
color: '#007BFF', // 柱子颜色
|
||||
borderRadius: [4, 4, 0, 0] ,// 柱子圆角
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top', // 数据标签位置
|
||||
color: '#333'
|
||||
},
|
||||
emphasis: { // 高亮样式
|
||||
itemStyle: {
|
||||
color: '#7491db'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
chart.setOption(option)
|
||||
const handleResize = () => {
|
||||
chart.resize();
|
||||
};
|
||||
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
chart.dispose();
|
||||
};
|
||||
})
|
||||
return(
|
||||
<div style={{width: '100%', height: '100%', backgroundColor: '#fff',padding:'15px'}}>
|
||||
<div style={{fontSize:'16px',fontWeight:'600'}}><span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>检查频次分布</div>
|
||||
<div ref={chartRef} style={{width:'100%',height:'126.84px',}}>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export const MyTable=(props)=>{
|
||||
const {dataSource,columns}=props
|
||||
return (
|
||||
<>
|
||||
<Table
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
pagination={{
|
||||
total:25,
|
||||
showSizeChanger:true,
|
||||
showQuickJumper:true,
|
||||
showTotal:() => '共 25 条',
|
||||
pageSizeOptions:[5,10,20,50,100],
|
||||
defaultPageSize:5,
|
||||
style:{
|
||||
marginTop:50
|
||||
}
|
||||
}}
|
||||
style={{width:'100%'}}
|
||||
/>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default MyCard;
|
||||
@ -1,100 +0,0 @@
|
||||
import {Col, List, Row} from "antd";
|
||||
import MyCard from "@/pages/business_hiddentrouble/component/MyCard";
|
||||
|
||||
const headerList=[
|
||||
{
|
||||
title:'总隐患数',
|
||||
num:'1489',
|
||||
data:'12',
|
||||
flag:1,
|
||||
grow:1,
|
||||
backgroundColor:'#E5EEFE',
|
||||
color:'#1269FF',
|
||||
},
|
||||
{
|
||||
title:'已整改隐患',
|
||||
num:'986',
|
||||
data:'12',
|
||||
flag:1,
|
||||
grow:1,
|
||||
backgroundColor:'#D9F8E8',
|
||||
color:'#1DCE74',
|
||||
},
|
||||
{
|
||||
title:'整改率',
|
||||
num:'86%',
|
||||
data:'8',
|
||||
flag:2,
|
||||
grow:0,
|
||||
backgroundColor:'#FFF3E9',
|
||||
color:'orange',
|
||||
},
|
||||
{
|
||||
title:'按期整改率',
|
||||
num:'89%',
|
||||
data:'2',
|
||||
flag:3,
|
||||
grow:0,
|
||||
backgroundColor:'#FFE6E8',
|
||||
color:'#FF3E48',
|
||||
}
|
||||
]
|
||||
const data=[
|
||||
{name:'Q3设备故障类隐患',tip:'占比最高',num:'45%'},
|
||||
{name:'Q2安全防护隐患',tip:'显著下降',num:'32%'},
|
||||
{name:'Q4电器隐患',tip:'持续改善',num:'28%'},
|
||||
{name:'全年平均整改周期',tip:'同比缩短',num:'7天'},
|
||||
]
|
||||
const TrendAnalysis=()=>{
|
||||
return(
|
||||
<div style={{backgroundColor:'#fff',padding:'15px'}}>
|
||||
<Row gutter={10}>
|
||||
<Col span={18}>1</Col>
|
||||
<Col span={6}>
|
||||
{data.map((item,index)=>{
|
||||
return(
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<div>
|
||||
<div style={{fontSize:'16px',fontWeight:'500',color:'#333'}}>{item.name}</div>
|
||||
<div style={{fontSize:'12px',color:'#666666'}}>{item.tip}</div>
|
||||
</div>
|
||||
<div style={{display:'flex',alignItems:'center'}}>
|
||||
{item.num}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const HiddenDangerCount=()=>{
|
||||
return (
|
||||
<>
|
||||
<header style={{overflow: 'hidden', marginBottom: '10px'}}>
|
||||
<Row gutter={10}>
|
||||
{headerList.map((item, index) => {
|
||||
return <Col span={6}><MyCard {...item}></MyCard></Col>
|
||||
})}
|
||||
</Row>
|
||||
</header>
|
||||
<section style={{overflow: 'hidden', marginBottom: '10px'}}>
|
||||
<Row gutter={10}>
|
||||
<Col span={16}>
|
||||
<TrendAnalysis></TrendAnalysis>
|
||||
</Col>
|
||||
<Col span={8}>1</Col>
|
||||
</Row>
|
||||
</section>
|
||||
<footer style={{overflow: 'hidden'}}>
|
||||
<Row gutter={10}>
|
||||
<Col span={15}>2</Col>
|
||||
<Col span={9}>2</Col>
|
||||
</Row>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default HiddenDangerCount
|
||||
@ -1,198 +0,0 @@
|
||||
import {Card, Col, Row, Input, Space, Select, Upload, Button, message, Tag} from "antd";
|
||||
import './hiddenDangerInspection.less'
|
||||
import MyCard, {BarChart, MyTable, PieChart} from "@/pages/business_hiddentrouble/component/MyCard";
|
||||
import {ExportOutlined, UploadOutlined} from "@ant-design/icons";
|
||||
import {render} from "react-dom";
|
||||
const { Search } = Input;
|
||||
|
||||
const dataList=[
|
||||
{
|
||||
title:'隐患总数',
|
||||
num:'169',
|
||||
data:'12',
|
||||
flag:1,
|
||||
grow:1,
|
||||
backgroundColor:'#E5EEFE',
|
||||
color:'#1269FF',
|
||||
},
|
||||
{
|
||||
title:'已整改隐患',
|
||||
num:'169',
|
||||
data:'12',
|
||||
flag:1,
|
||||
grow:1,
|
||||
backgroundColor:'#D9F8E8',
|
||||
color:'#1DCE74',
|
||||
},
|
||||
{
|
||||
title:'整改中隐患',
|
||||
num:'169',
|
||||
data:'8',
|
||||
flag:2,
|
||||
grow:0,
|
||||
backgroundColor:'#FFF3E9',
|
||||
color:'orange',
|
||||
},
|
||||
{
|
||||
title:'超期未整改',
|
||||
num:'169',
|
||||
data:'2',
|
||||
flag:3,
|
||||
grow:0,
|
||||
backgroundColor:'#FFE6E8',
|
||||
color:'#FF3E48',
|
||||
}
|
||||
]
|
||||
export const Select1=()=>{
|
||||
return(
|
||||
<Select defaultValue="所有领域" style={{ width: 120 }}>
|
||||
<Select.Option value="sample" >所有领域</Select.Option>
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
export const Select2=()=>{
|
||||
return(
|
||||
<Select defaultValue="所有频次" style={{ width: 120 }}>
|
||||
<Select.Option value="sample">所有频次</Select.Option>
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
const props = {
|
||||
name: 'file',
|
||||
action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
|
||||
headers: {
|
||||
authorization: 'authorization-text',
|
||||
},
|
||||
onChange(info) {
|
||||
if (info.file.status !== 'uploading') {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (info.file.status === 'done') {
|
||||
message.success(`${info.file.name} file uploaded successfully`);
|
||||
} else if (info.file.status === 'error') {
|
||||
message.error(`${info.file.name} file upload failed.`);
|
||||
}
|
||||
},
|
||||
};
|
||||
export const Import=()=>{
|
||||
return(
|
||||
<Upload {...props}>
|
||||
<Button icon={<UploadOutlined />} style={{color:'#2E4CD4'}}>导入</Button>
|
||||
</Upload>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
export const Export=()=>{
|
||||
return(
|
||||
<Button icon={<ExportOutlined/>} style={{color:'#2E4CD4'}}>导出</Button>
|
||||
)
|
||||
}
|
||||
export const levelList= {
|
||||
'一般隐患':['#DAF3FF','#00AAFA'],
|
||||
'中等隐患':['#FFF3E9','#FF8800'],
|
||||
'极高隐患':['#FFE0E2','#FF3E48'],
|
||||
}
|
||||
|
||||
const columns=[
|
||||
{align:'center',title:'检查项',dataIndex:'inspectionItems',key:'inspectionItems'},
|
||||
{align:'center',title:'隐患名称',dataIndex:'name',key:'name'},
|
||||
{align:'center',title:'隐患等级',dataIndex:'level',key:'level',render:(level)=>{
|
||||
|
||||
return <Tag color={levelList[level][0]} style={{color:levelList[level][1]}}>{level}</Tag>
|
||||
}},
|
||||
{align:'center',title:'登记时间',dataIndex:'createTime',key:'createTime'},
|
||||
{align:'center',title:'隐患来源',dataIndex:'source',key:'source'},
|
||||
{align:'center',title:'隐患描述',dataIndex:'description',key:'description',ellipsis:{showTitle:true}},
|
||||
{align:'center',title:'治理类型',dataIndex:'type',key:'type'},
|
||||
{align:'center',title:'治理期限',dataIndex:'deadline',key:'deadline'},
|
||||
{align:'center',title:'整改负责人',dataIndex:'head',key:'head'},
|
||||
{align:'center',title:'隐患状态',dataIndex:'state',key:'state',render:(state)=>{return <span style={{color:'green'}}>{state}</span>}},
|
||||
{align:'center',title:'验收时间',dataIndex:'acceptanceTime',key:'acceptanceTime'},
|
||||
{align:'center',title:'操作',dataIndex:'operation',key:'operation',render:(_,record)=>{
|
||||
return <Button type={"link"}>详情</Button>
|
||||
}},
|
||||
]
|
||||
|
||||
const dataSource=[
|
||||
{key:1,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述111111111111111111111111111111111111',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:2,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'中等隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:3,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'极高隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:4,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:5,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:6,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:7,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:8,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:9,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:10,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:11,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:12,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:13,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:14,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:15,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:16,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:17,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:18,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:19,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:20,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
|
||||
]
|
||||
|
||||
|
||||
const HiddenDangerInspection=()=>{
|
||||
return(
|
||||
< >
|
||||
<header style={{overflow: 'hidden',marginBottom:'10px'}}>
|
||||
<Row gutter={10}>
|
||||
{dataList.map((item) => {
|
||||
return <Col span={6}><MyCard {...item}> </MyCard></Col>
|
||||
})}
|
||||
</Row>
|
||||
</header>
|
||||
<section style={{overflow: 'hidden',marginBottom:'10px'}}>
|
||||
<Row gutter={10}>
|
||||
<Col span={8}>
|
||||
<PieChart title={'检查领域分布'}></PieChart>
|
||||
</Col>
|
||||
<Col span={16}>
|
||||
<BarChart></BarChart>
|
||||
</Col>
|
||||
</Row>
|
||||
</section>
|
||||
<footer>
|
||||
<div style={{width:'100%',backgroundColor:'#fff',padding:'15px'}}>
|
||||
<Space direction='vertical' size={"middle"} style={{width:'100%'}}>
|
||||
<Row >
|
||||
<span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>
|
||||
<span style={{fontSize:'16px',fontWeight:'600'}}>检查频次分布</span>
|
||||
</Row>
|
||||
<Row style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<div>
|
||||
<Search placeholder="搜素检查项" style={{ width: 300 }} />
|
||||
</div>
|
||||
<div>
|
||||
<Space>
|
||||
<Select1></Select1>
|
||||
<Select2></Select2>
|
||||
<Import></Import>
|
||||
<Export></Export>
|
||||
</Space>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<MyTable dataSource={dataSource} columns={columns}></MyTable>
|
||||
</Row>
|
||||
</Space>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default HiddenDangerInspection
|
||||
@ -1,3 +0,0 @@
|
||||
|
||||
|
||||
|
||||
@ -1,318 +0,0 @@
|
||||
import {Button, Card, Col, Input, Row, Space, Steps, Tag} from "antd";
|
||||
import MyCard, {MyTable, PieChart} from "@/pages/business_hiddentrouble/component/MyCard";
|
||||
import {useEffect, useRef} from "react";
|
||||
import img1 from '../../../../assets/img/stepOne.png'
|
||||
import img2 from '../../../../assets/img/stepTwo.png'
|
||||
import img3 from '../../../../assets/img/stepThree.png'
|
||||
import img4 from '../../../../assets/img/stepFour.png'
|
||||
|
||||
import echarts from "echarts/lib/echarts";
|
||||
import {
|
||||
Export, Import,
|
||||
levelList,
|
||||
Select1, Select2
|
||||
} from "@/pages/business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection";
|
||||
import './hiddenDangerRighted.less'
|
||||
const { Search } = Input;
|
||||
const dataList=[
|
||||
{
|
||||
title:'待整改隐患',
|
||||
num:'169',
|
||||
data:'12',
|
||||
flag:1,
|
||||
grow:1,
|
||||
backgroundColor:'#E5EEFE',
|
||||
color:'#1269FF',
|
||||
},
|
||||
{
|
||||
title:'整改中隐患',
|
||||
num:'169',
|
||||
data:'12',
|
||||
flag:1,
|
||||
grow:1,
|
||||
backgroundColor:'#D9F8E8',
|
||||
color:'#1DCE74',
|
||||
},
|
||||
{
|
||||
title:'已完成整改',
|
||||
num:'169',
|
||||
data:'8',
|
||||
flag:2,
|
||||
grow:0,
|
||||
backgroundColor:'#FFF3E9',
|
||||
color:'orange',
|
||||
},
|
||||
{
|
||||
title:'整改完成率',
|
||||
num:'89%',
|
||||
data:'2',
|
||||
flag:3,
|
||||
grow:0,
|
||||
backgroundColor:'#FFE6E8',
|
||||
color:'#FF3E48',
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const columns=[
|
||||
{align:'center',title:'检查项',dataIndex:'inspectionItems',key:'inspectionItems'},
|
||||
{align:'center',title:'隐患名称',dataIndex:'name',key:'name'},
|
||||
{align:'center',title:'隐患等级',dataIndex:'level',key:'level',render:(level)=>{
|
||||
|
||||
return <Tag color={levelList[level][0]} style={{color:levelList[level][1]}}>{level}</Tag>
|
||||
}},
|
||||
{align:'center',title:'登记时间',dataIndex:'createTime',key:'createTime'},
|
||||
{align:'center',title:'隐患来源',dataIndex:'source',key:'source'},
|
||||
{align:'center',title:'隐患描述',dataIndex:'description',key:'description',ellipsis:{showTitle:true}},
|
||||
{align:'center',title:'治理类型',dataIndex:'type',key:'type'},
|
||||
{align:'center',title:'治理期限',dataIndex:'deadline',key:'deadline'},
|
||||
{align:'center',title:'整改负责人',dataIndex:'head',key:'head'},
|
||||
{align:'center',title:'隐患状态',dataIndex:'state',key:'state',render:(state)=>{return <span style={{color:'green'}}>{state}</span>}},
|
||||
{align:'center',title:'验收时间',dataIndex:'acceptanceTime',key:'acceptanceTime'},
|
||||
{align:'center',title:'操作',dataIndex:'operation',key:'operation',render:(_,record)=>{
|
||||
return <div style={{display:"flex"}}>
|
||||
<Button type={"link"}>详情</Button>
|
||||
<Button type={"link"}>验收</Button>
|
||||
</div>
|
||||
}},
|
||||
]
|
||||
|
||||
const dataSource=[
|
||||
{key:1,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述111111111111111111111111111111111111',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:2,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'中等隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:3,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'极高隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:4,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:5,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:6,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:7,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:8,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:9,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:10,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:11,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:12,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:13,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:14,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:15,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:16,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:17,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:18,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:19,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:20,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
{key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
|
||||
|
||||
]
|
||||
|
||||
|
||||
|
||||
const Qiu=(props)=>{
|
||||
return(
|
||||
<div className={'qiu'}>
|
||||
{props.num}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const items=[
|
||||
{'0': img1},
|
||||
{'1': img2},
|
||||
{'2': img3},
|
||||
{'3': img4},
|
||||
|
||||
]
|
||||
|
||||
const TrendChart=()=>{
|
||||
const TrendChart=useRef(null)
|
||||
useEffect(() => {
|
||||
const chart=echarts.init(TrendChart.current);
|
||||
const option={
|
||||
grid:{
|
||||
bottom:25,
|
||||
top:20,
|
||||
},
|
||||
legend:{
|
||||
show:true,
|
||||
left:'50%',
|
||||
top:0,
|
||||
icon: 'path://M0,0 L20,0',
|
||||
itemStyle:{
|
||||
color:'#00A0E9',
|
||||
}
|
||||
},
|
||||
xAxis:{
|
||||
type:'category',
|
||||
data:['3月','4月','5月','6月','7月','8月'],
|
||||
axisLabel:{
|
||||
color:'#000',
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'#00A0E9',
|
||||
type:'dashed',
|
||||
}
|
||||
},
|
||||
boundaryGap: false, // 关键
|
||||
axisTick: {
|
||||
show: true,
|
||||
alignWithLabel: true, // 关键
|
||||
inside: true, // 刻度朝外
|
||||
length: 100, // 足够长的长度（根据图表高度调整）
|
||||
lineStyle: {
|
||||
color: '#cccccc',
|
||||
width: 1,
|
||||
type: 'dashed',
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis:{
|
||||
type:'value',
|
||||
axisLabel:{
|
||||
color:'#000',
|
||||
type:'dashed',
|
||||
},
|
||||
axisLine:{
|
||||
show:true,
|
||||
lineStyle:{
|
||||
color:'#00A0E9',
|
||||
type:'dashed',
|
||||
}
|
||||
},
|
||||
splitLine:{
|
||||
lineStyle:{
|
||||
color:'#00A0E9',
|
||||
type:'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
series:[
|
||||
{
|
||||
name:'整改完成率',
|
||||
data:[120,200,150,80,70,110],
|
||||
type:'line',
|
||||
smooth:true,
|
||||
lineStyle:{
|
||||
color:'#00A0E9'
|
||||
},
|
||||
areaStyle:{
|
||||
color:{
|
||||
type:'linear',
|
||||
x:0,
|
||||
y:0,
|
||||
x2:0,
|
||||
y2:1,
|
||||
colorStops:[
|
||||
{offset:0,color:'#00A0E9'},
|
||||
{offset:1,color:'#99D4F5 '}
|
||||
]
|
||||
}
|
||||
},
|
||||
symbol:'none'
|
||||
}
|
||||
]
|
||||
}
|
||||
chart.setOption(option)
|
||||
// 响应式调整
|
||||
const handleResize = () => {
|
||||
chart.resize();
|
||||
};
|
||||
handleResize()
|
||||
window.addEventListener('resize', handleResize);
|
||||
|
||||
// 清理函数
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize);
|
||||
chart.dispose();
|
||||
};
|
||||
}, []);
|
||||
return(
|
||||
<div style={{padding:'10px',backgroundColor:'#fff',height:'100%',width:'100%'}}>
|
||||
<div style={{fontSize:'16px',fontWeight:'600'}}>
|
||||
<span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>隐患整改进度趋势
|
||||
</div>
|
||||
<div ref={TrendChart} style={{width:'100%',height:'136.86px'}} key={1}>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const Workflow=()=>{
|
||||
return(
|
||||
<div style={{width: '100%', height: '100%', backgroundColor: '#fff',padding:'10px'}}>
|
||||
<div style={{fontSize: '16px', fontWeight: '600'}}>
|
||||
<span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>隐患整改流程
|
||||
</div>
|
||||
<div style={{display:'flex',justifyContent:'space-around'}}>
|
||||
{items.map((item,index)=>{
|
||||
return (
|
||||
<div key={index}>
|
||||
<div className={'box'}>
|
||||
<Qiu num={index+1}></Qiu>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '136px',
|
||||
height: '111px',
|
||||
backgroundImage: `url(${item[index]})`
|
||||
}}>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const HiddenDangerRighted = () => {
|
||||
return (
|
||||
<>
|
||||
<header style={{overflow: 'hidden', marginBottom: '10px'}}>
|
||||
<Row gutter={10}>
|
||||
{dataList.map((item, index) => {
|
||||
return <Col span={6}><MyCard {...item}></MyCard></Col>
|
||||
})}
|
||||
</Row>
|
||||
</header>
|
||||
<section style={{overflow: 'hidden',marginBottom:'10px'}}>
|
||||
<Row gutter={10}>
|
||||
<Col span={8}>
|
||||
<PieChart title={'隐患整改类型'}></PieChart>
|
||||
</Col>
|
||||
<Col span={7}>
|
||||
<TrendChart></TrendChart>
|
||||
</Col>
|
||||
<Col span={9}>
|
||||
<Workflow></Workflow>
|
||||
</Col>
|
||||
</Row>
|
||||
</section>
|
||||
<footer>
|
||||
<div style={{width: '100%', backgroundColor: '#fff', padding: '15px'}}>
|
||||
<Space direction='vertical' size={"middle"} style={{width: '100%'}}>
|
||||
<Row>
|
||||
<span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>
|
||||
<span style={{fontSize: '16px', fontWeight: '600'}}>隐患整改列表</span>
|
||||
</Row>
|
||||
<Row style={{display: 'flex', justifyContent: 'space-between'}}>
|
||||
<div>
|
||||
<Search placeholder="搜素检查项" style={{width: 300}}/>
|
||||
</div>
|
||||
<div>
|
||||
<Space>
|
||||
<Select1></Select1>
|
||||
<Select2></Select2>
|
||||
<Import></Import>
|
||||
<Export></Export>
|
||||
</Space>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<MyTable dataSource={dataSource} columns={columns}></MyTable>
|
||||
</Row>
|
||||
</Space>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default HiddenDangerRighted;
|
||||
@ -1,13 +0,0 @@
|
||||
.qiu{
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
border-radius: 50%;
|
||||
background-color:blue;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 27px;
|
||||
}
|
||||
.box{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
Loading…
Reference in New Issue