267 lines
9.2 KiB
JavaScript
267 lines
9.2 KiB
JavaScript
|
import React, { useState, useEffect, useMemo,useRef } from 'react'
|
|||
|
|
import usePageTable from '../../components/crud/usePageTable2';
|
|||
|
|
import { createCrudService } from '../../components/crud/_';
|
|||
|
|
import apiurl from '../../service/apiurl';
|
|||
|
|
import { httppost2,httpget2 } from '../../utils/request';
|
|||
|
|
import CryptoJS from 'crypto-js';
|
|||
|
|
import { Card,Table,Button,Radio,Input,Select,Modal,message } from "antd"
|
|||
|
|
import ToolBar from "./toolbar"
|
|||
|
|
import "./index.less"
|
|||
|
|
export default function Gbyj() {
|
|||
|
|
const [searchValue, setSearchVal] = useState()
|
|||
|
|
const [switchVisible, setSwitchVisible] = useState(false);
|
|||
|
|
const [bbParams, setBbParams] = useState({})
|
|||
|
|
const [addOpen, setAddOpen] = useState(false)
|
|||
|
|
const [mbParams, setMbParams] = useState({})
|
|||
|
|
const columns = [
|
|||
|
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
|||
|
|
{ title: '广播站名称', key: 'name', dataIndex: 'name', width: 200, ellipsis: true },
|
|||
|
|
{
|
|||
|
|
title: '告警内容', key: 'warnContent', dataIndex: 'warnContent', width: 300,ellipsis: true
|
|||
|
|
},
|
|||
|
|
{ title: '播报时间', key: 'createTime', dataIndex: 'createTime', width: 200 },
|
|||
|
|
{
|
|||
|
|
title: '播报人员', key: 'createUserName', dataIndex: 'createUserName', width: 200,ellipsis: true
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
|||
|
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gbyj.page).find_noCode);
|
|||
|
|
//广播站
|
|||
|
|
const [jh, setJh] = useState([])
|
|||
|
|
const getJhList = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await httppost2(apiurl.gbyj.list)
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
setJh(res.data.map(item => ({label:item.name,value:item.id})))
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const [mbList, setMbList] = useState([])
|
|||
|
|
|
|||
|
|
const getMbList = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await httppost2(apiurl.gbyj.mblist);
|
|||
|
|
if(res.code === 200){
|
|||
|
|
setMbList(res.data.map(item=>({label:item.content, value:item.id})));
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 右边添加模版
|
|||
|
|
const addMb = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await httppost2(apiurl.gbyj.mbsave, { content: bbParams.warnContent });
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
message.success('添加成功');
|
|||
|
|
getMbList();
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 左边添加模版
|
|||
|
|
const saveMb = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await httppost2(apiurl.gbyj.mbsave, mbParams);
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
message.success('添加成功');
|
|||
|
|
getMbList();
|
|||
|
|
setAddOpen(false)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 删除模版
|
|||
|
|
const delMb = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await httpget2(apiurl.gbyj.mbDel + `/${bbParams.checkId}`);
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
message.success('删除成功');
|
|||
|
|
getMbList();
|
|||
|
|
setBbParams({...bbParams,warnContent:'' })
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
const handleCheck = (e) => {
|
|||
|
|
const text = mbList.find(item => item.value == e.target.value)?.label
|
|||
|
|
setBbParams({ ...bbParams, warnContent:text,checkId:e.target.value })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const gbzChange = (e) => {
|
|||
|
|
setBbParams({...bbParams,stationIds:e})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const textChange = (e) => {
|
|||
|
|
setBbParams({ ...bbParams, warnContent: e.target.value })
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 播报
|
|||
|
|
|
|||
|
|
const playGb = () => {
|
|||
|
|
setSwitchVisible(true);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
//md5加密
|
|||
|
|
const encryptData = (data) => {
|
|||
|
|
const encryptedData = CryptoJS.MD5(data).toString();
|
|||
|
|
return encryptedData;
|
|||
|
|
}
|
|||
|
|
// 确认播报
|
|||
|
|
const confirmBb = async () => {
|
|||
|
|
const name = localStorage.getItem('userName')
|
|||
|
|
const id = localStorage.getItem('userId')
|
|||
|
|
const params = {
|
|||
|
|
...bbParams,
|
|||
|
|
ctrlPass: encryptData(bbParams?.ctrlPass),
|
|||
|
|
createUserId: id,
|
|||
|
|
createUserName: name
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const res = await httppost2(apiurl.gbyj.bb,params);
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
setSwitchVisible(false);
|
|||
|
|
message.success('播报成功');
|
|||
|
|
refresh()
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.log(error);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
useEffect(()=>{
|
|||
|
|
const params = {
|
|||
|
|
search: {
|
|||
|
|
...searchValue,
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
search(params)
|
|||
|
|
}, [searchValue])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
getMbList()
|
|||
|
|
getJhList()
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
|
|||
|
|
<div className='gb-top'>
|
|||
|
|
<div className='gb-top-title'>
|
|||
|
|
<span className='gb-top-icon'></span>
|
|||
|
|
<span style={{fontSize:18}}>广播预警信息查询</span>
|
|||
|
|
</div>
|
|||
|
|
<Card className='nonebox'>
|
|||
|
|
<ToolBar
|
|||
|
|
setSearchVal={setSearchVal}
|
|||
|
|
jh={jh}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
<div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
|
|||
|
|
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 700px )"}}/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className='gb-bottom'>
|
|||
|
|
<div className='gb-bottom-left'>
|
|||
|
|
<div className='gb-top-title'>
|
|||
|
|
<span className='gb-top-icon'></span>
|
|||
|
|
<span style={{fontSize:18,marginRight:20}}>广播模板</span>
|
|||
|
|
<Button type="primary" onClick={() => setAddOpen(true)}>添加</Button>
|
|||
|
|
<Button type="primary" onClick={delMb}>删除</Button>
|
|||
|
|
</div>
|
|||
|
|
<div className='mb-content'>
|
|||
|
|
<Radio.Group
|
|||
|
|
style={{display: 'flex', flexDirection: 'column'}}
|
|||
|
|
options={mbList}
|
|||
|
|
onChange={handleCheck}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className='gb-bottom-right'>
|
|||
|
|
<div className='gb-top-title'>
|
|||
|
|
<span className='gb-top-icon'></span>
|
|||
|
|
<span style={{fontSize:18,marginRight:20}}>编辑播报内容</span>
|
|||
|
|
<Button type="primary" onClick={addMb}>添加为模板</Button>
|
|||
|
|
</div>
|
|||
|
|
<div className='right-content'>
|
|||
|
|
<div style={{marginRight:10}}>
|
|||
|
|
<Input.TextArea
|
|||
|
|
style={{ width: '100%', minHeight: '150px' }}
|
|||
|
|
allowClear
|
|||
|
|
placeholder='请输入播报内容，或者选择广播模板'
|
|||
|
|
value={bbParams.warnContent}
|
|||
|
|
onChange={textChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div style={{ marginTop: 20 }}>
|
|||
|
|
<div className='gb-top-title'>
|
|||
|
|
<span className='gb-top-icon'></span>
|
|||
|
|
<span style={{fontSize:18,marginRight:20}}>选择广播预警站</span>
|
|||
|
|
</div>
|
|||
|
|
<div className='station-content'>
|
|||
|
|
<span>已选择：</span>
|
|||
|
|
<Select
|
|||
|
|
mode="tags"
|
|||
|
|
style={{
|
|||
|
|
width: '70%',
|
|||
|
|
}}
|
|||
|
|
onChange={gbzChange}
|
|||
|
|
options={jh}
|
|||
|
|
/>
|
|||
|
|
<Button type="primary" style={{width:"16%"}} onClick={playGb}>播报</Button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{/* 校验密码 */}
|
|||
|
|
<Modal
|
|||
|
|
open={switchVisible}
|
|||
|
|
width={500}
|
|||
|
|
title="输入校验密码"
|
|||
|
|
onCancel={()=>{setSwitchVisible(false);}}
|
|||
|
|
destroyOnClose
|
|||
|
|
onOk={confirmBb}
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<div style={{marginBottom:"10px"}}>请输入二次校验密码</div>
|
|||
|
|
<div>
|
|||
|
|
<Input.Password placeholder='请输入密码' allowClear onChange={(e)=>{setBbParams({...bbParams,ctrlPass:e.target.value})
|
|||
|
|
}} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Modal>
|
|||
|
|
{/* 添加模版 */}
|
|||
|
|
<Modal
|
|||
|
|
open={addOpen}
|
|||
|
|
width={500}
|
|||
|
|
title="新增"
|
|||
|
|
onCancel={()=>{setAddOpen(false);}}
|
|||
|
|
destroyOnClose
|
|||
|
|
onOk={saveMb}
|
|||
|
|
>
|
|||
|
|
<div>
|
|||
|
|
<div style={{marginBottom:"10px"}}>请输入模版</div>
|
|||
|
|
<div>
|
|||
|
|
<Input allowClear onChange={(e)=>{setMbParams({...mbParams,content:e.target.value})
|
|||
|
|
}} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Modal>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|