Browse Source

表格标题

dev
wenlele 2 years ago
parent
commit
8aab5291df
  1. 6
      web/client/src/sections/problem/components/inspection.jsx
  2. 2
      web/client/src/sections/problem/components/statistics.jsx
  3. 21
      web/client/src/sections/problem/components/tableData.jsx
  4. 18
      web/client/src/sections/problem/containers/dataAlarm.jsx

6
web/client/src/sections/problem/components/inspection.jsx

@ -91,13 +91,13 @@ const Inspection = ({ dispatch, actions, user, route, statistic }) => {
return (
<div style={{ width: 'clac(100%)', backgroundColor: 'white',margin:"8px 12px",padding:"20px 20px 0" }}>
<div style={{ width: 'clac(100%)', backgroundColor: 'white', margin: "8px 12px", padding: "20px 20px 0" }}>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginLeft: 10 }}>
<div style={{ width: 450, }}>
<span style={{ width: 0, height: 20, display:"inline-block",margin: "0 8px 0 0", borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></span>
<span style={{ width: 0, height: 20, display: "inline-block", margin: "0 8px 0 0", borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></span>
<span style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#101531', marginRight: 10 }}>{statistic[route]}</span>
<span style={{ fontSize: 12, color: 'rgb(150, 151, 153)' }}>APPLY SEMI-AUTOMATIC INSPECTION</span>
<div style={{ fontSize: 12, color: 'rgb(150, 151, 153)' }}>仅保留48小时内的图片数据每日8时1417时系统巡检一次<span style={{ fontWeight: 500, color: '#005ABD', fontSize: 12 }}>未阅共{notRead}</span></div>
<div style={{ fontSize: 12, color: 'rgb(150, 151, 153)', marginLeft: 3 }}>仅保留48小时内的图片数据每日8时1417时系统巡检一次<span style={{ fontWeight: 500, color: '#005ABD', fontSize: 12 }}>未阅共{notRead}</span></div>
</div>
<div style={{ flex: 1, position: 'relative' }}>
<Form

2
web/client/src/sections/problem/components/statistics.jsx

@ -4,7 +4,7 @@ import { DatePicker } from "@douyinfe/semi-ui";
import Inspection from "./inspection";
const Statistics = ({ dispatch, actions, route, statistic }) => {
let title = { dataLnterrupt: "DATA ABORTS", dataAbnormal: "DATA ABORTS", strategyHit: "DATA ABORTS" }
let title = { dataLnterrupt: "DATA ABORTS", dataAbnormal: "DATA ANOMALY", strategyHit: "ALGORITHM&POLICY HIT" }
// console.log(route);
return (
<>{route == 'useAbnormal' ?

21
web/client/src/sections/problem/components/tableData.jsx

@ -9,14 +9,15 @@ import { emit } from "superagent";
const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition,
selected, setSelected, setIfBulk, setConfirm, setGenre, query, setQuery,tableData,setTableData }) => {
selected, setSelected, setIfBulk, setConfirm, setGenre, query, setQuery, tableData, setTableData }) => {
const { problem } = actions
const [count, setCount] = useState(0) //
const [search, setSearch] = useState({}) //
const [checkAll, setCheckAll] = useState(true) //
const api = useRef();
let title = { dataLnterrupt:"数据中断详情", dataAbnormal: "数据异常详情", strategyHit: "策略命中详情", ideoAbnormal: "视频异常详情", useAbnormal: "应用异常详情", deviceAbnormal: "设备异常详情" }
useEffect(() => {
switch (route) {
case 'useAbnormal':
@ -50,7 +51,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
dispatch(problem.getAlarmVideoList({})).then((res) => {
if (res.success) {
console.log(res);
let tableDatas = res.payload.data?.rows?.map(v => ({
let tableDatas = res.payload.data?.map(v => ({
key: v.AlarmId,
// StructureName: v.StructureName,
// projectName: v.pomsProject?.map(r => (r.name ? { name: r.name, state: 'PMOS' } : {
@ -70,6 +71,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
// State: v.State,
// alarmType: v.alarmType,
// confirm: v.confirmedContent,
camerOnline: v.camerOnline,
}))
console.log(tableDatas);
setTableData(tableDatas)
@ -143,9 +145,16 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
return (
<>
<div style={{ backgroundColor: '#FFFFFF', margin:"20px 12px 12px",padding:"20px 20px 40px"}}>
<div style={{ backgroundColor: '#FFFFFF', margin: "20px 12px 12px", padding: "20px 20px 40px" }}>
<div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
<span style={{ width: 0, height: 20, margin: "0 8px 0 0", borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></span>
<span style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#101531', }}>{title[route]}</span>
<span style={{ marginLeft: 6, fontSize: 12, color: "rgb(150, 151, 153)", fontFamily: 'DINExp' }}>DETAILED INFORMATION</span>
</div>
<div style={{}}>
<div style={{ display: "flex", marginBottom: 16,}}>
<div style={{ display: "flex", marginBottom: 16, }}>
<Form
onSubmit={(values) => console.log(values)}
// onValueChange={values=>console.log(values)}
@ -257,7 +266,7 @@ const TableData = ({ route, dispatch, actions, collectData, setSetup, exhibition
// dataSource={[{ key: '1' }]}
bordered={false}
empty="暂无数据"
style={{ }}
style={{}}
pagination={false}
onRow={(record, index) => {
if (index % 1 === 0) {

18
web/client/src/sections/problem/containers/dataAlarm.jsx

@ -38,7 +38,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
const TextAreaApi = useRef('')
const tableType = { dataLnterrupt: 'dataLnterrupt', dataAbnormal: 'dataAbnormal', strategyHit: 'strategyHit', videoAbnormal: 'videoAbnormal', useAbnormal: 'useAbnormal', deviceAbnormal: 'deviceAbnormal' }
const statistic = { dataLnterrupt: '数据中断统计', dataAbnormal: '数据异常统计', strategyHit: '策略命中统计', videoAbnormal: '视频异常统计', useAbnormal: '应用异常统计', deviceAbnormal: '设备异常统计' }
const statistic = { dataLnterrupt: '数据中断统计', dataAbnormal: '数据异常统计', strategyHit: '策略命中统计', videoAbnormal: '视频异常统计', useAbnormal: '应用半自动化巡检', deviceAbnormal: '设备异常统计' }
useEffect(() => {
@ -149,7 +149,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
dataLnterrupt: ['index', 'projectName', 'StructureName', 'SourceName', 'AlarmGroupUnit', 'AlarmCodeName', 'sustainTime', 'createTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime',],
dataAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', 'type', 'alarmType', 'createTime', 'sustainTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime'],
strategyHit: ['index', 'projectName', 'StructureName', 'SourceName', 'Strategy', 'State', 'createTime', 'sustainTime', 'AlarmContent', 'CurrentLevel', 'updateTime', 'detailCount', 'confirm', 'confirmTime'],
videoAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', '19', '20', '21', '22', 'AlarmContent', '111', 'createTime', 'updateTime', 'confirm', 'confirmTime', '56115'],
videoAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', '19', '20', '21', '22', 'AlarmContent', '111', 'createTime', 'updateTime', 'confirm', 'confirmTime', 'camerOnline'],
useAbnormal: ['index', 'projectName', 'appName', 'url', 'type', 'alarmContent', 'createTime', 'updateTime', 'confirm', 'confirmTime'],
deviceAbnormal: ['index', 'projectName', 'StructureName', 'SourceName', '19', 'alarmContent', '21', 'AlarmContent', 'AlarmCodeName', 'createTime', 'updateTime', 'confirm', 'confirmTime'],
}
@ -177,13 +177,13 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
name: '项目名称', sort: 3, value: 'projectName', render: (_, r, index) => {
return <>
{r.projectName?.map((v, index) => {
return v.name ? <div key={r.id + r.appName + index} style={{ width: 176, height: 18, }}>
return v.name ? <div key={r.id + r.appName + index} style={{ width: 176, marginBottom: 8 }}>
{OutHidden({
number: 7,
name: v.name
})}
<div style={{
width: 58, height: 18, background: v.state == 'PMOS' ? 'linear-gradient(rgb(153, 199, 221) 0%, rgb(48, 72, 252) 100%)' : 'linear-gradient(rgb(235, 245, 255) 0%, rgb(235, 245, 255) 0%, rgb(211, 232, 255) 100%)',
width: 58, background: v.state == 'PMOS' ? 'linear-gradient(rgb(153, 199, 221) 0%, rgb(48, 72, 252) 100%)' : 'linear-gradient(rgb(235, 245, 255) 0%, rgb(235, 245, 255) 0%, rgb(211, 232, 255) 100%)',
borderRadius: 2, display: "inline-block", marginLeft: 6
}}>
<img src={`/assets/images/install/${v.state == 'PMOS' ? 'icon_POMS' : 'icon_zhengque'}.png`} style={{ display: "inline-block", width: 10 }} />
@ -204,10 +204,10 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
data = '传感器'
}
if (route == 'strategyHit') data = '测点'
return <div style={{ width: 136, display: 'flex', justifyContent: 'space-between' }}>
return r.SourceName ? <div style={{ width: 136, display: 'flex', justifyContent: 'space-between' }}>
<div style={{ display: "inline-block", width: 84, lineHeight: "20px" }}>{r.SourceName}</div>
<div style={{ display: "inline-block", width: 44, height: 18, lineHeight: '18px', textAlign: "center", border: '1px solid #0F7EFB', fontWeight: 400, color: '#0F7EFB', fontSize: 12 }}>{data}</div>
</div>
</div> : ""
}
},
{ name: '中断类型', sort: 6, value: 'AlarmGroupUnit' },
@ -226,8 +226,8 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
}
},
{ name: '产生次数', sort: 19, value: 'detailCount', render: (_, r, index) => r.detailCount + '次' },
{ name: '确认信息', sort: 20, value: 'confirm', render: (_, r, index) => r.confirm },
{ name: '确认/恢复时间', sort: 21, value: 'confirmTime', },
{ name: '确认信息', sort: 20, value: 'confirm', render: (_, r, index) => r.confirm ? r.confirm : "未确认" },
{ name: '确认/恢复时间', sort: 21, value: 'confirmTime', render: (_, r, index) => r.confirmTime ? r.confirmTime : "无"},
{
name: '持续时间', sort: 19.5, value: 'sustainTime', render: (_, r, index) => {
console.log(r.updateTime);
@ -261,7 +261,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
{ name: 'URL地址', sort: 16, value: 'url' },
{ name: '异常类型', sort: 6, value: 'type' },
{ name: '解决方案', sort: 17, value: '111' },
{ name: '在离线', sort: 18, value: '56115' },
{ name: '在离线', sort: 18, value: 'camerOnline' },
{
name: '操作', sort: 25, value: 'text', render: (_, r, index) => {
return <div style={{ width: 195 }}>

Loading…
Cancel
Save