jiangxucong
/
dq-IoTP
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

运维工单

Browse Source
main
zjlnb666 4 days ago
parent 894309c5f3
commit 09c6911b37
9 changed files with 493 additions and 2 deletions
Show Stats Download Patch File Download Diff File

12
config/routes.js
Unescape Escape View File

@ -139,6 +139,18 @@ export default [
name: 'inspectionTemplate',
component: './inspection_inspectionTemplate/InspectionTemplate',
},
// 巡检任务
{
path: '/topnavbar00/business/inspection/inspectionTasks',
name: 'inspectionTasks',
component: './inspection_inspectionTasks/InspectionTasks',
},
// 巡检记录
{
path: '/topnavbar00/business/inspection/inspectionRecords',
name: 'inspectionRecords',
component: './inspection_inspectionRecords/InspectionRecords',
},
]
}
],

BIN
src/assets/img/img.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

9
src/pages/inspection_inspectionRecords/InspectionRecords.js
Unescape Escape View File

@ -0,0 +1,9 @@
const InspectionRecords = () => {
return (
<div>
<h1 >InspectionRecords</h1>
</div>
);
};
export default InspectionRecords;

8
src/pages/inspection_inspectionTasks/InspectionTasks.js
Unescape Escape View File

@ -0,0 +1,8 @@
const InspectionTasks = () => {
return (
<div>
<h1>InspectionTasks</h1>
</div>
);
};
export default InspectionTasks;

275
src/pages/inspection_inspectionTemplate/InspectionTemplate.js
Unescape Escape View File

@ -1,7 +1,278 @@
import {Button, Col, Row, Select, Space} from "antd";
import Title from '../homepage/compontent/title'
import styles from './InspectionTemplate.less'
import {PlusOutlined, SearchOutlined, SyncOutlined} from "@ant-design/icons";
import TableWithPagination from "@/components/assetmangement/table";
const InspectionTemplate = () => {
const columns = [
{
title: '模板 ID',
dataIndex: 'id',
key: 'id',
},
{
title: '模板名称',
dataIndex: 'name',
key: 'name',
},
{
title: '类型',
dataIndex: 'type',
key: 'type',
filters: [
{ text: '设备巡检', value: '设备巡检' },
{ text: '环境巡检', value: '环境巡检' },
{ text: '综合巡检', value: '综合巡检' },
],
onFilter: (value, record) => record.type === value,
},
{
title: '巡检周期',
dataIndex: 'cycle',
key: 'cycle',
sorter: (a, b) => {
const order = { '实时触发': 0, '天': 1, '周': 2, '月': 3 };
return order[a.cycle] - order[b.cycle];
},
},
{
title: '触发逻辑',
dataIndex: 'triggerLogic',
key: 'triggerLogic',
ellipsis: true,
},
{
title: '地点范围',
dataIndex: 'location',
key: 'location',
},
{
title: 'AI推荐度',
dataIndex: 'aiRecommendation',
key: 'aiRecommendation',
render: (text) => {
const colorMap = {
'高': 'red',
'中': 'orange',
'次': 'green'
};
return (
<span style={{ color: colorMap[text], fontWeight: 'bold' }}>
{text}
</span>
);
},
// sorter: (a, b) => {
// const order = { '高': 0, '中': 1, '次': 2 };
// return order[a.aiRecommendation] - order[b.aiRecommendation];
// },
},
{
title: '操作',
key: 'action',
render: (_, record) => (
<Space size="middle">
<a onClick={() => handleEdit(record)} style={{color:'#2C9E9D'}}>编辑</a>
<a onClick={() => handleDelete(record)} style={{ color: '#ff4d4f' }}>删除</a>
<a onClick={() => handleCopy(record)} style={{color: '#006665'}}>复制</a>
</Space>
),
align: 'center',
},
];
const dataSource = [
{
key: '1',
id: 'TPL-001',
name: '核心设备日检',
type: '设备巡检',
cycle: '天',
triggerLogic: '设备在线时触发参数全检',
location: '机房 A',
aiRecommendation: '高',
},
{
key: '2',
id: 'TPL-002',
name: '车间环境周检',
type: '环境巡检',
cycle: '周',
triggerLogic: '温湿度超阈值时触发专项巡检',
location: '车间 B',
aiRecommendation: '次',
},
{
key: '3',
id: 'TPL-003',
name: '传感器月检',
type: '设备巡检',
cycle: '月',
triggerLogic: '设备离线时触发故障排查流程',
location: '园区传感器组',
aiRecommendation: '高',
},
{
key: '4',
id: 'TPL-004',
name: '网关异常巡检',
type: '设备巡检',
cycle: '实时触发',
triggerLogic: '网关离线时自动触发巡检',
location: '全网关设备',
aiRecommendation: '高',
},
{
key: '5',
id: 'TPL-005',
name: '仓库温湿度检',
type: '环境巡检',
cycle: '天',
triggerLogic: '温湿度波动>5% 时触发巡检',
location: '仓库 C',
aiRecommendation: '中',
},
{
key: '6',
id: 'TPL-006',
name: '综合设备巡检',
type: '综合巡检',
cycle: '周',
triggerLogic: '设备状态异常时触发分级巡检',
location: '办公楼设备组',
aiRecommendation: '中',
},
{
key: '7',
id: 'TPL-007',
name: '边缘节点巡检',
type: '设备巡检',
cycle: '天',
triggerLogic: '负载>80% 时触发性能巡检',
location: '边缘计算区',
aiRecommendation: '高',
},
];
// 操作函数示例
const handleEdit = (record) => {
console.log('编辑:', record);
// 打开编辑弹窗
};
const handleDelete = (record) => {
console.log('删除:', record);
// 确认删除逻辑
};
const handleCopy = (record) => {
console.log('复制:', record);
// 复制逻辑
};
return (
<div>
巡检模板
<div style={{ backgroundColor: '#F0F7F7' ,height: '100%', width: '100%',overflowX: 'hidden' }}>
<Row gutter={20} style={{height:'100%'}}>
<Col span={15}>
<div style={{backgroundColor:'#fff',height:'100%',borderRadius:'6px',padding:'20px'}}>
<div style={{borderBottom:'1px solid #eeeeee',paddingBottom:'20px'}}>
<Row style={{width:'100%'}} justify={"space-between"} align={"middle"}>
<Col>
<Title title='查询条件'/>
</Col>
<Col>
<Button icon={<SearchOutlined />} className={styles['search-button']} style={{marginRight:'30px'}}>查询</Button>
<Button icon={<SyncOutlined />} className={styles['reset-button']}>重置</Button>
</Col>
</Row>
<Row gutter={20} style={{marginTop:'20px'}}>
<Col>
<label htmlFor="">模板类型：</label>
<Select options={[{
label:'全部',
value:'1'
},{
label:'巡检模板',
value:'2'
}]}
style={{width:132}}
></Select>
</Col>
<Col>
<label htmlFor="">AI推荐度：</label>
<Select
options={
[
{label:'全部', value:'1'},
{label:'高', value:'2'},
{label:'中', value:'3'},
{label:'低', value:'4'}
]
}
style={{width:132}}
></Select>
</Col>
</Row>
</div>
<div style={{marginTop:'20px'}}>
<Title title='模板列表'/>
<Row style={{margin:'20px 0'}} justify={"space-between"}>
<Col>
<Button className={styles['search-button']} style={{marginRight:'30px'}}>模版导入</Button>
<Button className={styles['reset-button']}>模板导出</Button>
</Col>
<Col>
<Button className={styles['reset-button']} style={{marginRight:'30px'}}>AI推荐模板</Button>
<Button icon={<PlusOutlined/>} className={styles['search-button']}>新增模板</Button>
</Col>
</Row>
<TableWithPagination columns={columns} dataSource={dataSource} rowSelection={true}>
</TableWithPagination>
</div>
</div>
</Col>
<Col span={9}>
<div style={{backgroundColor:'#fff',borderRadius:'6px',padding:'20px'}}>
<Title title='逻辑配置面板'/>
<img src={require('@/assets/img/img.png')} alt="" style={{width:'100%',height:'100%'}}/>
</div>
<div style={{backgroundColor: '#fff', borderRadius: '6px', padding: 20, marginTop: 20 ,marginBottom:'50px'}}>
<Title title='AI 推荐辅助面板'/>
<div className={styles['ai-recommend-panel']}>
<div style={{display: 'flex', alignItems: 'center', marginBottom: 10, fontSize: 16}}>
<span style={{
width: 5,
height: 5,
backgroundColor: '#006665',
borderRadius: '50%',
marginRight: 10
}}></span><span>推荐项 1：</span>
</div>
<p>在‘核心设备日检’中增加‘硬盘使用率≥90% 时自动触发巡检’</p>
<p style={{color: '#006665'}}>理由 “历史数据中硬盘满导致的故障占比 15%”</p>
<div style={{textAlign:'right'}}>
<Button className={styles['search-button']} style={{marginRight:'30px'}}>采纳</Button>
<Button className={styles['reset-button']}>忽略</Button>
</div>
</div>
<div className={styles['ai-recommend-panel']}>
<div style={{display: 'flex', alignItems: 'center', marginBottom: 10, fontSize: 16}}>
<span style={{
width: 5,
height: 5,
backgroundColor: '#006665',
borderRadius: '50%',
marginRight: 10
}}></span><span>推荐项 2：</span>
</div>
<p>将‘车间环境周检’的触发条件调整为‘温湿度波动＞3% 时触发</p>
<p style={{color: '#006665'}}>理由 “该条件下环境异常的识别率提升 20%”</p>
<div style={{textAlign: 'right'}}>
<Button className={styles['search-button']} style={{marginRight: '30px'}}>采纳</Button>
<Button className={styles['reset-button']}>忽略</Button>
</div>
</div>
</div>
</Col>
</Row>
</div>
)
}

73
src/pages/inspection_inspectionTemplate/InspectionTemplate.less
Unescape Escape View File

@ -0,0 +1,73 @@
.search-button {
background-image: url('../../assets/img/assetmangement1.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: #fff;
border-radius: 4px;
height: 36px;
border-color: #d9d9d9;
background-color: #045F5E80;
}
.reset-button {
background-image: url('../../assets/img/assetmangement2.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: rgba(0, 102, 101, 1);
border-radius: 4px;
height: 36px;
border-color: #d9d9d9;
background-color: #B7E5D533;
}
.del-button {
background-image: url('../../assets/img/assetmangement3.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: #000;
border-radius: 4px;
height: 36px;
width: 88px;
border-color: #d9d9d9;
background-color: #E5B7B733;
}
.ai-recommend-panel{
/* 毛玻璃效果 - 核心！ */
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
/* 多层阴影 */
box-shadow:
-2px 4px 10px 0px rgba(145, 145, 145, 0.05),
-7px 17px 18px 0px rgba(145, 145, 145, 0.04),
-15px 37px 24px 0px rgba(145, 145, 145, 0.03);
/* 渐变边框 */
border: 1px solid;
border-image: conic-gradient(
from 102.21deg at 52.75% 38.75%,
rgba(249, 249, 249, 0.5) -32.95deg,
rgba(64, 64, 64, 0.5) 10.52deg,
rgba(64, 64, 64, 0.35) 32.12deg,
#FFFFFF 60.28deg,
rgba(255, 255, 255, 0.5) 107.79deg,
rgba(64, 64, 64, 0.35) 187.59deg,
#F9F9F9 207.58deg,
#FFFFFF 287.31deg,
rgba(249, 249, 249, 0.5) 327.05deg,
rgba(64, 64, 64, 0.5) 370.52deg
) 1;
/* 内部背景（创建UI的渐变感） */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0.1)
);
padding:20px;
margin-top: 20px;
p{
font-size: 14px;
}
}

12
src/pages/nav_system_content/SystemContentList.js
Unescape Escape View File

@ -250,6 +250,18 @@ const SystemContentList = (props) => {
key: "/topnavbar00/business/inspection/inspectionTemplate",
"label": "巡检模板"
},
// 巡检任务
{
path: '/topnavbar00/business/inspection/inspectionTasks',
key: "/topnavbar00/business/inspection/inspectionTasks",
"label": "巡检任务"
},
// 巡检记录
{
path: '/topnavbar00/business/inspection/inspectionRecords',
key: "/topnavbar00/business/inspection/inspectionRecords",
"label": "巡检记录"
},
]
}
]

96
src/pages/serviceticket_analysis/Analysis.css
Unescape Escape View File

@ -0,0 +1,96 @@
.container {
padding: 20px;
background-color: #f0f2f5;
min-height: calc(100vh - 64px);
}
.header {
margin-bottom: 20px;
}
.querySection {
background: #fff;
padding: 16px 20px;
border-radius: 6px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.queryForm {
display: flex;
align-items: center;
}
.queryForm .ant-form-item {
margin-bottom: 0;
margin-right: 16px;
}
.statsSection {
margin-bottom: 20px;
}
.statCard {
background: #fff;
padding: 20px;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.statCard:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.chartsSection {
margin-bottom: 20px;
}
.chartContainer {
background: #fff;
padding: 20px;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
height: 350px;
display: flex;
flex-direction: column;
}
.chartTitle {
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 16px;
text-align: center;
}
.chart {
flex: 1;
width: 100%;
}
.tableSection {
background: #fff;
padding: 20px;
border-radius: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.tableTitle {
font-size: 16px;
font-weight: 500;
color: #333;
margin-bottom: 16px;
}
/* 响应式调整 */
@media (max-width: 768px) {
.container {
padding: 12px;
}
.queryForm {
flex-direction: column;
align-items: flex-start;
}
.queryForm .ant-form-item {
margin-right: 0;
margin-bottom: 16px;
width: 100%;
}
.queryForm .ant-form-item:last-child {
margin-bottom: 0;
}
.chartContainer {
height: 300px;
padding: 16px;
}
.statCard {
padding: 16px;
}
}

10
src/pages/topnavbar/TopNavBar.js
Unescape Escape View File

@ -79,6 +79,16 @@ const menuItem = [
label: '智能巡检',
key: '/topnavbar00/business/inspection/inspectionTemplate',
},
// 巡检任务
{
label: '巡检任务',
key: '/topnavbar00/business/inspection/inspectionTasks',
},
// 巡检记录
{
label: '巡检记录',
key: '/topnavbar00/business/inspection/inspectionRecords',
},
]
const TopNavBar = (props) => {

Write Preview
Loading…
Cancel
Save