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>
|
||
)
|
||
}
|