Browse Source

播放样式

dev
wenlele 2 years ago
parent
commit
b685a4fb09
  1. 22
      web/client/src/sections/problem/actions/problem.jsx
  2. 14
      web/client/src/sections/problem/components/sideSheet.jsx
  3. 41
      web/client/src/sections/problem/containers/dataAlarm.jsx
  4. 2
      web/client/src/utils/webapi.js

22
web/client/src/sections/problem/actions/problem.jsx

@ -148,14 +148,14 @@ export function getAlarmVideoDeviceKind () { //查询视频设备类型
}); });
} }
// export function putAlarmdataConfirm (data) { // export function putAlarmVideoConfirm (data) { //
// return dispatch => basicAction({ return dispatch => basicAction({
// type: 'put', type: 'put',
// dispatch: dispatch, dispatch: dispatch,
// data, data,
// actionType: 'PUT-AIARM-DATA-CONFIRM', actionType: 'PUT-AIARM-VIDEO-CONFIRM',
// url: `${ApiTable.putAlarmdataConfirm}`, url: `${ApiTable.putAlarmVideoConfirm}`,
// msg: { option: '' }, msg: { option: '确认视频告警' },
// reducer: { name: '' } reducer: { name: '' }
// }); });
// } }

14
web/client/src/sections/problem/components/sideSheet.jsx

@ -13,7 +13,7 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
const { problem } = actions; const { problem } = actions;
const [clickStyle, setclickStyle] = useState(); const [clickStyle, setclickStyle] = useState();
const [query, setQuery] = useState({ page: 1, pageSize: 10 }); const [query, setQuery] = useState({ page: 0, pageSize: 10 });
const [dataSource, setdataSource] = useState([]); const [dataSource, setdataSource] = useState([]);
const [option, setOption] = useState({}); const [option, setOption] = useState({});
@ -21,7 +21,7 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
useEffect(() => { useEffect(() => {
if (alarmId) { if (alarmId) {
dispatch(problem.getAlarmDataDetail({ alarmId: alarmId })).then((res) => { dispatch(problem.getAlarmDataDetail({ alarmId: alarmId, ...query })).then((res) => {
if (res?.success) { if (res?.success) {
console.log(res.payload.data); console.log(res.payload.data);
setdataSource(res.payload.data); setdataSource(res.payload.data);
@ -103,7 +103,7 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
}); });
} }
}, []); }, [query]);
useEffect(() => { useEffect(() => {
@ -163,7 +163,7 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
<Tabs type="line"> <Tabs type="line">
<TabPane tab="告警信息" itemKey="1"> <TabPane tab="告警信息" itemKey="1">
<div id='Alarm' style={{ position: 'relative', height: document.body.clientHeight - 126, marginTop: 12 }}> <div id='Alarm' style={{ position: 'relative', height: document.body.clientHeight - 126, marginTop: 12 }}>
<div style={{ display: 'flex', alignItems: 'center', margin: "0 0 16px 0" }}> <div style={{ display: 'flex', alignItems: 'center', margin: "0 0 16px 0" }}>
<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={{ 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', }}>告警详情</span> <span style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#101531', }}>告警详情</span>
@ -171,7 +171,7 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
</div> </div>
<Table <Table
columns={columns} columns={columns}
dataSource={dataSource.slice((query.page - 1) * query.pageSize, query.page * query.pageSize)} dataSource={dataSource}
bordered={false} bordered={false}
empty="暂无数据" empty="暂无数据"
style={{}} style={{}}
@ -190,11 +190,11 @@ function SideSheets ({ dispatch, actions, close, alarmId }) {
className="22" className="22"
total={dataSource?.length} total={dataSource?.length}
showSizeChanger showSizeChanger
currentPage={query.page} currentPage={query.page + 1}
pageSizeOpts={[10, 20, 30, 40]} pageSizeOpts={[10, 20, 30, 40]}
onChange={(currentPage, pageSize) => { onChange={(currentPage, pageSize) => {
console.log(currentPage, pageSize); console.log(currentPage, pageSize);
setQuery({ pageSize: pageSize, page: currentPage }); setQuery({ pageSize: pageSize, page: currentPage - 1 });
}} }}
/> />
</div> : ""} </div> : ""}

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

@ -227,7 +227,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
{ name: '常见原因', sort: 7, value: 'AlarmCodeName' }, { name: '常见原因', sort: 7, value: 'AlarmCodeName' },
{ name: '产生时间', sort: 22, value: 'createTime', render: (_, r, index) => r.createTime || '无' }, { name: '产生时间', sort: 22, value: 'createTime', render: (_, r, index) => r.createTime || '无' },
{ name: '更新时间', sort: 23, value: 'updateTime', render: (_, r, index) => r.updateTime || '无' }, { name: '更新时间', sort: 23, value: 'updateTime', render: (_, r, index) => r.updateTime || '无' },
{ name: '服务器地址', sort: 12, value: '9' }, // { name: '', sort: 12, value: '9' },
{ {
name: '告警等级', sort: 13, value: 'CurrentLevel', render: (_, r, index) => { name: '告警等级', sort: 13, value: 'CurrentLevel', render: (_, r, index) => {
let data = { 1: '一级', 2: '二级', 3: '三级' } let data = { 1: '一级', 2: '二级', 3: '三级' }
@ -444,7 +444,7 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
}) })
} else if (route == 'videoAbnormal') { } else if (route == 'videoAbnormal') {
TextAreaApi.current.validate().then((v) => { TextAreaApi.current.validate().then((v) => {
dispatch(problem.postApiConfirm({ appAlarmId: selected, confirm: content })).then(res => { dispatch(problem.putAlarmVideoConfirm({ alarmId: selected, content: content })).then(res => {
if (res.success) { if (res.success) {
setConfirm(false) setConfirm(false)
setQuery({ limit: query.limit, page: query.page }) setQuery({ limit: query.limit, page: query.page })
@ -490,30 +490,35 @@ const DataAlarm = ({ match, dispatch, actions, user, loading, socket }) => {
{videoModal ? <Modal {videoModal ? <Modal
visible={true} visible={true}
// videoData // videoData
width={900} header={null}
footer={null}
size={'large'}
style={{ padding: 0 }}
bodyStyle={{ padding: 0 }}
className="videoModal"
onCancel={() => setVideoModal(false)} onCancel={() => setVideoModal(false)}
onOk={() => { onOk={() => {
}} }}
> >
<div style={{ width: 800, height: 600 }}> <div style={{ width: 918, height: 460, marginLeft: -24 }}>
<iframe <iframe
allowFullScreen allowFullScreen
src={`http://localhost:5000/video_play_cross?slideDown=true&videoObj=${encodeURIComponent(JSON.stringify({ src={`https://mediaconsole.ngaiot.com/video_play_cross?slideDown=true&videoObj=${encodeURIComponent(JSON.stringify({
// channelNo: 1, channelNo: 1,
// content: ['5442542542', '452345', '234524525'], content: ['5442542542', '452345', '234524525'],
// serialNo: "F61504020", serialNo: "F61504020",
// type: "yingshi", type: "yingshi",
// yingshiToken: "at.7tj6k9mzcwmn112xag96e23tcdsta8nn-7p2qvqv6zq-1k500nr-tsd9bn01o" yingshiToken: "at.7tj6k9mzcwmn112xag96e23tcdsta8nn-7p2qvqv6zq-1k500nr-tsd9bn01o"
type: 'cascade', // type: 'cascade',
serialNo: '34020000001310000003', // // serialNo: '34020000001310000003', //
topSerialNo: '34020000001110000079', // // topSerialNo: '34020000001110000079', //
audio: true, // audio: true,
highDefinition: true, // highDefinition: true,
cloudControl: true, // cloudControl: true,
// playUrlSd: 'wss://221.230.55.27:8082/jessica/34020000001110000079/34020000001310000003.flv', // // // playUrlSd: 'wss://221.230.55.27:8082/jessica/34020000001110000079/34020000001310000003.flv', //
playUrlSd: 'wss://221.230.55.27:8082/jessica/34020000001110000075/34020000001110000073.flv', // // playUrlSd: 'wss://221.230.55.27:8082/jessica/34020000001110000075/34020000001110000073.flv', //
}))}`} }))}`}
style={{ height: "100%", width: "100%" }} style={{ height: "100%", width: "100%" }}
frameBorder={0} frameBorder={0}

2
web/client/src/utils/webapi.js

@ -45,7 +45,7 @@ export const ApiTable = {
putAlarmdataConfirm: "alarm/data/confirm", //确认数据告警 putAlarmdataConfirm: "alarm/data/confirm", //确认数据告警
getAlarmVideoList: 'alarm/video/list', //查询视频告警列表 getAlarmVideoList: 'alarm/video/list', //查询视频告警列表
getAlarmVideoDeviceKind: 'alarm/video/device_kind', //查询视频设备类型 getAlarmVideoDeviceKind: 'alarm/video/device_kind', //查询视频设备类型
putAlarmVideoConfirm: 'alarm/video/confirm', //确认视频告警信息
}; };

Loading…
Cancel
Save