消防基础路由
wangyunfei
1 month ago
parent
f5bc63501c
commit
373ccbc654
Binary file not shown.
|
After Width: | Height: | Size: 416 B |
@ -0,0 +1,66 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Card, Row, Col, Statistic, Progress, Button, Space } from 'antd';
|
||||
import styles from './basic.less';
|
||||
import ResponsibilityImplementation from './module/ResponsibilityImplementation'; //责任落实
|
||||
import OnlineMonitoring from './module/OnlineMonitoring'; //在线监测预警
|
||||
import RiskAssessment from './module/RiskAssessment'; //风险管控
|
||||
import EvaluationReport from './module/EvaluationReport'; //评估报告
|
||||
|
||||
|
||||
|
||||
const SafeMajorHazardList = () => {
|
||||
const [activeModule, setActiveModule] = useState('organization');
|
||||
|
||||
const handleModuleClick = (module) => {
|
||||
setActiveModule(module)
|
||||
}
|
||||
|
||||
|
||||
const renderModule = () => {
|
||||
switch (activeModule) {
|
||||
case 'organization':
|
||||
return <ResponsibilityImplementation />;
|
||||
case 'equipment':
|
||||
return <OnlineMonitoring />;
|
||||
case 'firefighting':
|
||||
return <RiskAssessment />;
|
||||
case 'other':
|
||||
return <EvaluationReport />;
|
||||
default:
|
||||
return <ResponsibilityImplementation />;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.TopButton}>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === "organization" ? styles.active : ""}`}
|
||||
onClick={() => handleModuleClick("organization")}
|
||||
>组织机构管理
|
||||
</Button>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === "equipment" ? styles.active : ""}`}
|
||||
onClick={() => handleModuleClick("equipment")}
|
||||
>设备设施管理
|
||||
</Button>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === "firefighting" ? styles.active : ""}`}
|
||||
onClick={() => handleModuleClick("firefighting")}
|
||||
>建筑消防与器材管理
|
||||
</Button>
|
||||
<Button
|
||||
className={`${styles.TopButtonItem} ${activeModule === "other" ? styles.active : ""}`}
|
||||
onClick={() => handleModuleClick("other")}
|
||||
>其他管理
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
{renderModule()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SafeMajorHazardList;
|
||||
@ -0,0 +1,66 @@
|
||||
.container {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 89vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.TopButton {
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
padding: 10px 30px;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
margin-left: 6px;
|
||||
|
||||
.TopButtonItem {
|
||||
background-color: transparent !important;
|
||||
color: #333333 !important;
|
||||
font-family: 'PingFang SC', sans-serif !important;
|
||||
font-weight: 500 !important;
|
||||
font-size: 14px !important;
|
||||
line-height: 100% !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 6px 10px !important;
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
position: relative !important;
|
||||
|
||||
&:hover {
|
||||
color: #333333 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: #2E4CD4 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #2E4CD4 !important;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #2E4CD4;
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
// ======== 内容区域样式 ========
|
||||
flex: 1; // ======== 占据剩余空间 ========
|
||||
overflow-y: auto; // ======== 允许垂直滚动 ========
|
||||
padding: 0; // ======== 无内边距 ========
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,113 @@
|
||||
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
|
||||
@ -0,0 +1,81 @@
|
||||
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
|
||||
@ -0,0 +1,319 @@
|
||||
import { deleteByPrimaryKeyForProUser, selectByPrimaryKeyForProUser, insertForProUser, updateForProUser, deleteByMapForProUser,updateByMapForProUser, getOneForProUser,getAllForProUser,queryPageForProUser, countForProUser, insertBatchForProUser, deleteBatchForProUser,updateBatchForProUser, resetPwdForProUser } from '@/services/system/api_prouser';
|
||||
|
||||
export default {
|
||||
namespace: 'safemajorhazard',
|
||||
|
||||
state: {
|
||||
params: {},
|
||||
data: {
|
||||
list: [],
|
||||
pagination: {},
|
||||
},
|
||||
},
|
||||
|
||||
effects: {
|
||||
*delete_by_primarykey_for_prouser({ payload, callback }, { select, call, put }) {
|
||||
const response = yield call(deleteByPrimaryKeyForProUser, payload)
|
||||
yield put({
|
||||
type: 'deleteByPrimaryKeyForProUser',
|
||||
payload: response
|
||||
})
|
||||
|
||||
if (!response.success) {
|
||||
callback && callback(response)
|
||||
return
|
||||
}
|
||||
|
||||
const params = yield select(state => state.prouser.params)
|
||||
const responseData = yield call(queryPageForProUser, params)
|
||||
yield put({
|
||||
type: 'queryPageForProUser',
|
||||
payload: responseData
|
||||
})
|
||||
|
||||
if (callback) callback(response)
|
||||
},
|
||||
*select_by_primarykey_for_prouser({ payload, callback }, { call, put }) {
|
||||
const response = yield call(selectByPrimaryKeyForProUser, payload)
|
||||
yield put({
|
||||
type: 'selectByPrimaryKeyForProUser',
|
||||
payload: response
|
||||
})
|
||||
|
||||
if (callback) callback(response)
|
||||
},
|
||||
*insert_for_prouser({ payload, callback }, { select, call, put }) {
|
||||
const response = yield call(insertForProUser, payload)
|
||||
yield put({
|
||||
type: 'insertForProUser',
|
||||
payload: response
|
||||
})
|
||||
|
||||
if (!response.success) {
|
||||
callback && callback(response)
|
||||
return
|
||||
}
|
||||
|
||||
const params = yield select(state => state.prouser.params)
|
||||
const responseData = yield call(queryPageForProUser, params)
|
||||
yield put({
|
||||
type: 'queryPageForProUser',
|
||||
payload: responseData
|
||||
})
|
||||
|
||||
if (callback) callback(response)
|
||||
},
|
||||
*update_for_prouser({ payload, callback }, { select, call, put }) {
|
||||
const response = yield call(updateForProUser, payload)
|
||||
yield put({
|
||||
type: 'updateForProUser',
|
||||
payload: response
|
||||
})
|
||||
|
||||
if (!response.success) {
|
||||
callback && callback(response)
|
||||
return
|
||||
}
|
||||
|
||||
const params = yield select(state => state.prouser.params)
|
||||
const responseData = yield call(queryPageForProUser, params)
|
||||
yield put({
|
||||
type: 'queryPageForProUser',
|
||||
payload: responseData
|
||||
})
|
||||
|
||||
if (callback) callback(response)
|
||||
},
|
||||
*delete_by_map_for_prouser({ payload, callback }, { select, call, put }) {
|
||||
const response = yield call(deleteByMapForProUser, payload);
|
||||
yield put({
|
||||
type: 'deleteByMapForProUser',
|
||||
payload: response,
|
||||
});
|
||||
|
||||
const params = yield select(state => state.prouser.params);
|
||||
const responsedata = yield call(queryPageForProUser, params);
|
||||
yield put({
|
||||
type: 'queryPageForProUser',
|
||||
payload: responsedata,
|
||||
});
|
||||
|
||||
if (callback) callback(response);
|
||||
},
|
||||
*update_by_map_for_prouser({ payload, callback }, { select, call, put }) {
|
||||
const response = yield call(updateByMapForProUser, payload);
|
||||
yield put({
|
||||
type: 'updateByMapForProUser',
|
||||
payload: response,
|
||||
});
|
||||
|
||||
const params = yield select(state => state.prouser.params);
|
||||
const responsedata = yield call(queryPageForProUser, params);
|
||||
yield put({
|
||||
type: 'queryPageForProUser',
|
||||
payload: responsedata,
|
||||
});
|
||||
|
||||
if (callback) callback(response);
|
||||
},
|
||||
*get_one_for_prouser({ payload, callback }, { call, put }) {
|
||||
const response = yield call(getOneForProUser, payload);
|
||||
yield put({
|
||||
type: 'getOneForProUser',
|
||||
payload: response,
|
||||
});
|
||||
|
||||
if (callback) callback(response);
|
||||
},
|
||||
*get_all_for_prouser({ payload, callback }, { call, put }) {
|
||||
const response = yield call(getAllForProUser, payload);
|
||||
yield put({
|
||||
type: 'getAllForProUser',
|
||||
payload: response,
|
||||
});
|
||||
|
||||
if (callback) callback(response);
|
||||
},
|
||||
*query_page_for_prouser({ payload, callback }, { select, call, put }) {
|
||||
const params = yield select(state => state.prouser.params);
|
||||
const newParams = payload?.resetFlag ? payload : {...params, ...payload};
|
||||
yield put({
|
||||
type: 'setQueryPageByParams',
|
||||
payload: newParams,
|
||||
});
|
||||
const response = yield call(queryPageForProUser, newParams);
|
||||
yield put({
|
||||
type: 'queryPageForProUser',
|
||||
payload: response,
|
||||
});
|
||||
|
||||
if (callback) callback(response);
|
||||
},
|
||||
*count_for_prouser({ payload, callback }, { call, put }) {
|
||||
const response = yield call(countForProUser, payload);
|
||||
yield put({
|
||||
type: 'countForProUser',
|
||||
payload: response,
|
||||
});
|
||||
|
||||
if (callback) callback(response);
|
||||
},
|
||||
*insert_batch_for_prouser({ payload, callback }, { select, call, put }) {
|
||||
const response = yield call(insertBatchForProUser, payload);
|
||||
yield put({
|
||||
type: 'insertBatchForProUser',
|
||||
payload: response,
|
||||
});
|
||||
|
||||
const params = yield select(state => state.prouser.params);
|
||||
const responsedata = yield call(queryPageForProUser, params);
|
||||
yield put({
|
||||
type: 'queryPageForProUser',
|
||||
payload: responsedata,
|
||||
});
|
||||
|
||||
if (callback) callback(response);
|
||||
},
|
||||
*delete_batch_for_prouser({ payload, callback }, { select, call, put }) {
|
||||
const response = yield call(deleteBatchForProUser, payload);
|
||||
yield put({
|
||||
type: 'deleteBatchForProUser',
|
||||
payload: response,
|
||||
});
|
||||
|
||||
const params = yield select(state => state.prouser.params);
|
||||
const responsedata = yield call(queryPageForProUser, params);
|
||||
yield put({
|
||||
type: 'queryPageForProUser',
|
||||
payload: responsedata,
|
||||
});
|
||||
|
||||
if (callback) callback(response);
|
||||
},
|
||||
*update_batch_for_prouser({ payload, callback }, { select, call, put }) {
|
||||
const response = yield call(updateBatchForProUser, payload);
|
||||
yield put({
|
||||
type: 'updateBatchForProUser',
|
||||
payload: response,
|
||||
});
|
||||
|
||||
const params = yield select(state => state.prouser.params);
|
||||
const responsedata = yield call(queryPageForProUser, params);
|
||||
yield put({
|
||||
type: 'queryPageForProUser',
|
||||
payload: responsedata,
|
||||
});
|
||||
|
||||
if (callback) callback(response);
|
||||
},
|
||||
*resetpwd_for_prouser({ payload, callback }, { select, call, put }) {
|
||||
const response = yield call(resetPwdForProUser, payload);
|
||||
yield put({
|
||||
type: 'resetPwdForProUser',
|
||||
payload: response,
|
||||
});
|
||||
|
||||
const params = yield select(state => state.prouser.params);
|
||||
const responsedata = yield call(queryPageForProUser, params);
|
||||
yield put({
|
||||
type: 'queryPageForProUser',
|
||||
payload: responsedata,
|
||||
});
|
||||
|
||||
if (callback) callback(response);
|
||||
},
|
||||
},
|
||||
|
||||
reducers: {
|
||||
setQueryPageByParams(state, { payload }) {
|
||||
return {
|
||||
...state,
|
||||
params: {...payload},
|
||||
};
|
||||
},
|
||||
deleteByPrimaryKeyForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
selectByPrimaryKeyForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
insertForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
updateForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
deleteByMapForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
updateByMapForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
getOneForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
getAllForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
queryPageForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
countForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
insertBatchForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
deleteBatchForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
updateBatchForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
resetPwdForProUser(state, action) {
|
||||
return {
|
||||
...state,
|
||||
data: action.payload,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,115 @@
|
||||
.evaluation-report {
|
||||
padding: 20px;
|
||||
|
||||
.ant-card {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 6px;
|
||||
|
||||
.ant-card-head {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.ant-card-head-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
border-radius: 4px;
|
||||
|
||||
&.ant-btn-primary {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
|
||||
&:hover {
|
||||
background-color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-btn-link {
|
||||
padding: 4px 8px;
|
||||
height: auto;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.ant-modal {
|
||||
.ant-modal-header {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.ant-modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ant-form-item-label > label {
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.ant-input,
|
||||
.ant-select-selector {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.ant-select-focused .ant-select-selector {
|
||||
border-color: #40a9ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
|
||||
.ant-pagination-total-text {
|
||||
color: #8c8c8c;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,157 @@
|
||||
.online-monitoring {
|
||||
padding: 20px;
|
||||
|
||||
.ant-card {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 6px;
|
||||
|
||||
.ant-card-head {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.ant-card-head-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
border-radius: 4px;
|
||||
|
||||
&.ant-btn-primary {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
|
||||
&:hover {
|
||||
background-color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-btn-link {
|
||||
padding: 4px 8px;
|
||||
height: auto;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-badge {
|
||||
.ant-badge-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.ant-badge-status-text {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal {
|
||||
.ant-modal-header {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.ant-modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ant-form-item-label > label {
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.ant-input,
|
||||
.ant-select-selector {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.ant-select-focused .ant-select-selector {
|
||||
border-color: #40a9ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
|
||||
.ant-pagination-total-text {
|
||||
color: #8c8c8c;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 状态指示器样式
|
||||
.status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&.online {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
// 数值显示样式
|
||||
.value-display {
|
||||
font-weight: 500;
|
||||
|
||||
&.normal {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.unknown {
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,413 @@
|
||||
.containerR {
|
||||
padding: 8px 6px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.warningBox {
|
||||
width: 100%;
|
||||
background-color: #FFF3CD;
|
||||
border: 1px solid #F4E3AE;
|
||||
border-radius: 4px;
|
||||
padding: 8px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.warningIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.warningText {
|
||||
color: #8C6C0B;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
.containerOne {
|
||||
height: 40%;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
gap: 10px;
|
||||
|
||||
.containerOneLeft{
|
||||
background-color: white;
|
||||
width: calc(50% - 5px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
|
||||
.leftTopSection {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.titleLeft {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.buttonGroup {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
.actionBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border: 1px solid #DFE4F6;
|
||||
border-radius: 4px;
|
||||
color: #2E4CD4;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #F0F2FF;
|
||||
border-color: #2E4CD4;
|
||||
}
|
||||
|
||||
.btnIcon {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leftBottomSection {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fafafa;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 4px;
|
||||
|
||||
.imagePlaceholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #999999;
|
||||
|
||||
.imageIcon {
|
||||
font-size: 32px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.imageText {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.containerOneRight{
|
||||
background-color: white;
|
||||
width: calc(50% - 5px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
|
||||
.rightTopSection {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.rightTopLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.titleLeft {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rightTopRight {
|
||||
.exportBtn {
|
||||
background-color: #2E4CD4 !important;
|
||||
border-color: #2E4CD4 !important;
|
||||
color: #fff !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
|
||||
&:hover {
|
||||
background-color: #1e3bb8 !important;
|
||||
border-color: #1e3bb8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rightBottomSection {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.imagePlaceholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
border: 2px dashed #d9d9d9;
|
||||
border-radius: 4px;
|
||||
|
||||
.imageIcon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.imageText {
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.containerTwo{
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 4px;
|
||||
|
||||
.containerTwoTitle {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.titleLeft {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.containerTwoActions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.searchSection {
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
|
||||
:global(.ant-input) {
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
&:focus {
|
||||
border-color: #2E4CD4;
|
||||
box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.buttonSection {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
:global(.ant-btn) {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
|
||||
&:hover {
|
||||
border-color: #2E4CD4;
|
||||
color: #2E4CD4;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #2E4CD4;
|
||||
color: #2E4CD4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.containerTwoTable {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.rightTopSelect{
|
||||
// 下拉框本身的样式
|
||||
:global(.ant-select-selector) {
|
||||
background-color: #f8f9fa !important;
|
||||
border: 1px solid #d9d9d9 !important;
|
||||
border-radius: 6px !important;
|
||||
height: 32px !important;
|
||||
min-height: 32px !important;
|
||||
|
||||
&:hover {
|
||||
border-color: #2E4CD4 !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #2E4CD4 !important;
|
||||
box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉框内的文字样式
|
||||
:global(.ant-select-selection-item) {
|
||||
color: #333333 !important;
|
||||
font-size: 14px !important;
|
||||
font-weight: 500 !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
// 下拉箭头样式
|
||||
:global(.ant-select-arrow) {
|
||||
color: #666666 !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
// 下拉菜单容器样式
|
||||
:global(.ant-select-dropdown) {
|
||||
background-color: #ffffff !important;
|
||||
border: 1px solid #e8e8e8 !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
|
||||
padding: 4px 0 !important;
|
||||
}
|
||||
|
||||
// 下拉选项样式
|
||||
:global(.ant-select-item) {
|
||||
color: #333333 !important;
|
||||
font-size: 14px !important;
|
||||
padding: 8px 12px !important;
|
||||
border-radius: 4px !important;
|
||||
margin: 2px 8px !important;
|
||||
|
||||
&:hover {
|
||||
background-color: #f0f2ff !important;
|
||||
color: #2E4CD4 !important;
|
||||
}
|
||||
|
||||
&.ant-select-item-option-selected {
|
||||
background-color: #e6f7ff !important;
|
||||
color: #2E4CD4 !important;
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 选中状态的样式
|
||||
:global(.ant-select-focused .ant-select-selector) {
|
||||
border-color: #2E4CD4 !important;
|
||||
box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义选项样式
|
||||
.customOption {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
|
||||
.optionIcon {
|
||||
font-size: 16px;
|
||||
color: #2E4CD4;
|
||||
}
|
||||
|
||||
.optionText {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,241 @@
|
||||
.risk-assessment {
|
||||
padding: 20px;
|
||||
|
||||
.ant-card {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 6px;
|
||||
|
||||
.ant-card-head {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.ant-card-head-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-table {
|
||||
.ant-table-thead > tr > th {
|
||||
background-color: #fafafa;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr > td {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.ant-table-tbody > tr:hover > td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-btn {
|
||||
border-radius: 4px;
|
||||
|
||||
&.ant-btn-primary {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
|
||||
&:hover {
|
||||
background-color: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.ant-btn-link {
|
||||
padding: 4px 8px;
|
||||
height: auto;
|
||||
|
||||
&:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-tag {
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.ant-rate {
|
||||
font-size: 14px;
|
||||
|
||||
.ant-rate-star {
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-progress {
|
||||
.ant-progress-bg {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&.ant-progress-small {
|
||||
.ant-progress-text {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal {
|
||||
.ant-modal-header {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
|
||||
.ant-modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.ant-form-item-label > label {
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.ant-input,
|
||||
.ant-select-selector {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #d9d9d9;
|
||||
|
||||
&:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.ant-select-focused .ant-select-selector {
|
||||
border-color: #40a9ff;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination {
|
||||
margin-top: 16px;
|
||||
text-align: right;
|
||||
|
||||
.ant-pagination-total-text {
|
||||
color: #8c8c8c;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// 风险等级颜色
|
||||
.risk-level-high {
|
||||
color: #ff4d4f;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.risk-level-medium {
|
||||
color: #faad14;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.risk-level-low {
|
||||
color: #52c41a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// 状态指示器
|
||||
.status-indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
&.processed {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
&.pending {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.monitoring {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
// 评分显示
|
||||
.score-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.score-value {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
|
||||
// 概率和影响程度显示
|
||||
.rate-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
|
||||
.rate-stars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.rate-text {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
}
|
||||
|
||||
// 风险矩阵样式
|
||||
.risk-matrix {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
margin: 16px 0;
|
||||
|
||||
.matrix-cell {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
|
||||
&.high-risk {
|
||||
background-color: #fff2f0;
|
||||
border-color: #ff4d4f;
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
&.medium-risk {
|
||||
background-color: #fffbe6;
|
||||
border-color: #faad14;
|
||||
color: #faad14;
|
||||
}
|
||||
|
||||
&.low-risk {
|
||||
background-color: #f6ffed;
|
||||
border-color: #52c41a;
|
||||
color: #52c41a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue