You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
266 lines
12 KiB
266 lines
12 KiB
import React, { useState, useEffect, useRef } from "react";
|
|
import { connect } from "react-redux";
|
|
import { Button, Form, Modal, Skeleton, Pagination, Table } from "@douyinfe/semi-ui";
|
|
import { SkeletonScreen, } from "$components";
|
|
import moment from "moment";
|
|
|
|
|
|
|
|
const TableData = ({ dispatch, actions, route, collectData, setSetup, exhibition,
|
|
selected, setSelected, setIfBulk, setConfirm, setGenre }) => {
|
|
const { problem } = actions
|
|
|
|
const [tableData, setTableData] = useState([]) //表格数据
|
|
const api = useRef();
|
|
|
|
useEffect(() => {
|
|
switch (route) {
|
|
case 'useAbnormal':
|
|
dispatch(problem.getAlarmLnspectionApi({})).then((res) => {
|
|
console.log(res.payload.data)
|
|
if (res.success) {
|
|
let tableDatas = res.payload.data?.rows.map(v => ({
|
|
key: v.id,
|
|
serialNumber: v.serialNumber,
|
|
projectName: v.app?.projectCorrelations?.map(r => r.name)?.filter(c => c),
|
|
appName: v.app?.name,
|
|
url: v.app?.url,
|
|
createTime: v.createTime ? moment(v.createTime).format("YYYY-MM-DD HH:MM:SS") : "",
|
|
updateTime: v.updateTime ? moment(v.updateTime).format("YYYY-MM-DD HH:MM:SS") : "",
|
|
confirmTime: v.confirmTime ? moment(v.confirmTime).format("YYYY-MM-DD HH:MM:SS") : "",
|
|
alarmContent: v.alarmContent,
|
|
screenshot: v.screenshot,
|
|
type: v.type,
|
|
confirm: v.confirm,
|
|
}))
|
|
// console.log(tableDatas);
|
|
setTableData(tableDatas)
|
|
}
|
|
})
|
|
break;
|
|
case 'videoAbnormal':
|
|
break;
|
|
default:
|
|
dispatch(problem.getAlarmDataGroup()).then((res) => {
|
|
if (res.success) {
|
|
// console.log(res.payload.data);
|
|
let routeData = { dataLnterrupt: '数据中断', dataAbnormal: '数据异常', strategyHit: '策略命中', deviceAbnormal: '' }
|
|
let data
|
|
if (route == 'dataLnterrupt') data = res.payload.data?.filter(v => v.desc == '数据中断')
|
|
if (route == 'dataAbnormal') data = res.payload.data?.filter(v => v.desc == '数据异常')
|
|
if (route == 'strategyHit') data = res.payload.data?.filter(v => v.desc == '策略命中')
|
|
if (route == 'deviceAbnormal') data = res.payload.data?.filter(v => v.desc == '掉线' || v.desc == '不活跃')
|
|
console.log(data);
|
|
let genreData = []
|
|
data?.map(v => {
|
|
v?.unit?.map(vv => {
|
|
genreData.push({ name: vv.name, value: vv.id })
|
|
})
|
|
})
|
|
console.log(genreData);
|
|
setGenre(genreData)
|
|
if (data || data[0]?.id) {
|
|
dispatch(problem.getAlarmDataList({})).then((res) => {
|
|
console.log(res);
|
|
})
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
// let tableDatas = res.payload.data?.rows.map(v => ({
|
|
// key: v.id,
|
|
// serialNumber: v.serialNumber,
|
|
// projectName: v.app?.projectCorrelations?.map(r => r.name)?.filter(c => c),
|
|
// appName: v.app?.name,
|
|
// url: v.app?.url,
|
|
// createTime: v.createTime ? moment(v.createTime).format("YYYY-MM-DD HH:MM:SS") : "",
|
|
// updateTime: v.updateTime ? moment(v.updateTime).format("YYYY-MM-DD HH:MM:SS") : "",
|
|
// confirmTime: v.confirmTime ? moment(v.confirmTime).format("YYYY-MM-DD HH:MM:SS") : "",
|
|
// alarmContent: v.alarmContent,
|
|
// screenshot: v.screenshot,
|
|
// type: v.type,
|
|
// confirm: v.confirm,
|
|
// }))
|
|
// console.log(tableDatas);
|
|
// setTableData(tableDatas)
|
|
|
|
break;
|
|
}
|
|
|
|
}, [route])
|
|
|
|
|
|
|
|
return (
|
|
<>
|
|
<div style={{ backgroundColor: '#FFFFFF' }}>
|
|
<div style={{}}>
|
|
<div style={{ display: "flex", marginBottom: 16, marginLeft: 20 }}>
|
|
<Form
|
|
onSubmit={(values) => console.log(values)}
|
|
// onValueChange={values=>console.log(values)}
|
|
getFormApi={(formApi) => (api.current = formApi)}
|
|
layout="horizontal"
|
|
style={{ position: "relative", width: "100%", flex: 1 }}
|
|
>
|
|
{(() => {
|
|
let frame = []
|
|
collectData[route]?.map((v, index) => {
|
|
if (index == 0) {
|
|
frame.push(<Form.Input
|
|
label={v.name + ':'}
|
|
field={v.field}
|
|
key={v.field}
|
|
maxLength="16"
|
|
placeholder="搜索项目名称、结构物名称、或告警源名称"
|
|
labelPosition="left"
|
|
style={{ width: 292, marginRight: 10, marginBottom: 16 }}
|
|
/>)
|
|
} else {
|
|
frame.push(<Form.Select
|
|
label={v.name + ':'}
|
|
labelPosition="left"
|
|
field={v.field}
|
|
key={v.field}
|
|
style={{ width: 116, marginRight: 10, color: "#F9F9F9", }}
|
|
placeholder="全部"
|
|
filter
|
|
showClear
|
|
>
|
|
{v.data?.map((item) => {
|
|
return (
|
|
<Form.Select.Option key={item.value} value={item.value}>
|
|
{item.name}
|
|
</Form.Select.Option>
|
|
);
|
|
})}
|
|
</Form.Select>)
|
|
}
|
|
})
|
|
frame.push(<Form.DatePicker
|
|
type="dateTimeRange"
|
|
labelPosition="left"
|
|
style={{ width: 352 }}
|
|
label={collectData.common.name + ':'}
|
|
field={collectData.common.field}
|
|
key={collectData.common.field}
|
|
// defaultPickerValue={['2022-08-08 00:00'), new Date('2022-08-09 12:00')]}
|
|
// initValue={[new Date('2022-08-08 00:00'), new Date()]}
|
|
onChange={(v) => console.log(v)}
|
|
/>)
|
|
return frame
|
|
})()}
|
|
</Form>
|
|
<div
|
|
style={{
|
|
width: 138,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-end",
|
|
marginRight: 10
|
|
}}
|
|
>
|
|
<img title='导出' src="/assets/images/problem/export.png" style={{ width: 24, height: 24 }} />
|
|
<img title='设置' src="/assets/images/problem/setup.png" style={{ width: 24, height: 24 }} onClick={() => setSetup(true)} />
|
|
<Button
|
|
theme="solid"
|
|
type="primary"
|
|
style={{ width: 65, height: 30, borderRadius: 3, }}
|
|
onClick={() => {
|
|
api.current.validate().then((v) => {
|
|
console.log(v);
|
|
// setSearch(v);
|
|
// setQuery({ limit: 10, page: 0 })
|
|
});
|
|
}}
|
|
>
|
|
查询
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Skeleton
|
|
loading={false}
|
|
active={true}
|
|
placeholder={SkeletonScreen()}
|
|
>
|
|
<Table
|
|
columns={exhibition}
|
|
dataSource={tableData}
|
|
bordered={false}
|
|
empty="暂无数据"
|
|
style={{ padding: "0px 20px", }}
|
|
pagination={false}
|
|
onRow={(record, index) => {
|
|
if (index % 1 === 0) {
|
|
return { style: { background: '#FAFCFF' } }
|
|
}
|
|
}}
|
|
rowSelection={{
|
|
selectedRowKeys: selected,
|
|
// onSelect: (record, selected) => {
|
|
// console.log(`select row: ${selected}`, record);
|
|
// },
|
|
// onSelectAll: (selected, selectedRows) => {
|
|
// console.log(`select all rows: ${selected}`, selectedRows);
|
|
// },
|
|
onChange: (selectedRowKeys, selectedRows) => {
|
|
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
|
setSelected(selectedRows.map(v => v.key))
|
|
},
|
|
}}
|
|
/>
|
|
</Skeleton>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
padding: "20px 20px",
|
|
}}
|
|
>
|
|
<div>
|
|
<div style={{ display: 'inline-block', lineHeight: '30px', fontSize: 13 }}>勾选<span style={{ fontWeight: 400, color: '#0F7EFB', margin: '0 6px' }}>{selected.length}条</span>问题</div>
|
|
<Button onClick={() => setSelected(tableData?.map(v => v.key))} style={{ width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#0F7EFB', fontWeight: 400, margin: '0 10px' }}>全选</Button>
|
|
<Button type='primary' theme='solid' onClick={() => (setIfBulk(true), setConfirm(true))} style={{ width: 93, height: 24, borderRadius: '1px', border: '1px solid #0F7EFB', color: '#FFFFFF', fontWeight: 400, }}>批量确认</Button>
|
|
</div>
|
|
<div style={{ display: 'flex', }}>
|
|
<span style={{ lineHeight: "30px", fontSize: 13 }}>
|
|
共{100}个问题
|
|
</span>
|
|
<Pagination
|
|
className="22"
|
|
total={100}
|
|
showSizeChanger
|
|
currentPage={1}
|
|
pageSizeOpts={[10, 20, 30, 40]}
|
|
onChange={(currentPage, pageSize) => {
|
|
// setQuery({ limit: pageSize, page: currentPage - 1 });
|
|
// page.current = currentPage - 1
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
|
|
function mapStateToProps (state) {
|
|
const { auth, global, members } = state;
|
|
// console.log(auth.user);
|
|
return {
|
|
user: auth.user,
|
|
actions: global.actions,
|
|
global: global,
|
|
// members: members,
|
|
};
|
|
}
|
|
export default connect(mapStateToProps)(TableData);
|
|
|