diff --git a/config/router.config.js b/config/router.config.js index a530029..20ca312 100644 --- a/config/router.config.js +++ b/config/router.config.js @@ -44,7 +44,7 @@ export default [ }, { path: '/command', - component: '../layouts/CommandPlatformLayout', + component: '../layouts/BaseCommandPlatformLayout', routes: [ { name: '平台1', diff --git a/public/static/title_noword2_bg.png b/public/static/title_noword2_bg.png new file mode 100644 index 0000000..1f17d2f Binary files /dev/null and b/public/static/title_noword2_bg.png differ diff --git a/public/static/title_noword2_bg_lightblue.png b/public/static/title_noword2_bg_lightblue.png new file mode 100644 index 0000000..1f17d2f Binary files /dev/null and b/public/static/title_noword2_bg_lightblue.png differ diff --git a/src/assets/CommandPlatform/two/left1_outcity.png b/src/assets/CommandPlatform/two/left1_outcity.png new file mode 100644 index 0000000..efcac64 Binary files /dev/null and b/src/assets/CommandPlatform/two/left1_outcity.png differ diff --git a/src/assets/CommandPlatform/two/let1_incity.png b/src/assets/CommandPlatform/two/let1_incity.png new file mode 100644 index 0000000..91f1dc0 Binary files /dev/null and b/src/assets/CommandPlatform/two/let1_incity.png differ diff --git a/src/assets/CommandPlatform/two/motorbg.png b/src/assets/CommandPlatform/two/motorbg.png new file mode 100644 index 0000000..70a7f68 Binary files /dev/null and b/src/assets/CommandPlatform/two/motorbg.png differ diff --git a/src/assets/CommandPlatform/two/txtbg.png b/src/assets/CommandPlatform/two/txtbg.png new file mode 100644 index 0000000..2e40d34 Binary files /dev/null and b/src/assets/CommandPlatform/two/txtbg.png differ diff --git a/src/components/CommandPlatform/DigitalService/EarlyWarning/EarlyWarning.less b/src/components/CommandPlatform/DigitalService/EarlyWarning/EarlyWarning.less new file mode 100644 index 0000000..287e8d3 --- /dev/null +++ b/src/components/CommandPlatform/DigitalService/EarlyWarning/EarlyWarning.less @@ -0,0 +1,75 @@ +.EarlyWarning { + .titles { + width: 50%; + color: #fff; + height: 28px; + line-height: 28px; + background-image: linear-gradient(to right, #224682FF, #22468200); + padding: 0 5px; + } + + .warningInfo { + flex: auto; + width: 100%; + overflow: hidden; + height: 300px; + } + + .liststyle { + width: 100%; + font-size: 0.72em; + } + + .accidentlist { + + padding: 5px 10px; + overflow: hidden; + height: 200px; + margin: 5px 0; + color: #B0C3E1FF; + // max-height: calc(~'100% - 310px'); + flex: 1; + + } + + .accidentlist1 { + margin-left: 2em !important; + padding: 5px 10px; + + height: 200px; + margin: 5px 0; + color: #B0C3E1FF; + // max-height: calc(~'100% - 310px'); + flex: 1; + + .accidentli { + cursor: pointer; + + border: 1px solid #0f86b1; + background: #192e5b; + margin: 5px; + padding: 1px; + height: 50px; + + .name { + + color: #fff; + text-align: left; + } + + .road { + padding-left: 5px; + } + + .content { + + + overflow: hidden !important; + text-overflow: ellipsis !important; + display: -webkit-box !important; + -webkit-line-clamp: 2 !important; //想要的行数 + -webkit-box-orient: vertical !important; + } + } + } +} diff --git a/src/components/CommandPlatform/DigitalService/EarlyWarning/EarlyWarningList.js b/src/components/CommandPlatform/DigitalService/EarlyWarning/EarlyWarningList.js new file mode 100644 index 0000000..1438bee --- /dev/null +++ b/src/components/CommandPlatform/DigitalService/EarlyWarning/EarlyWarningList.js @@ -0,0 +1,1109 @@ +/** + * 预警提醒录入页面 + * create by + * + */ +import React, { PureComponent } from 'react'; +import { + message, + Drawer, + List, + Button, + Modal, + Input, + DatePicker, + Table, + Icon, + Tooltip, +} from 'antd'; +import { connect } from 'dva'; +import dayjs from 'moment'; +import { deepclone } from '@/utils/ObjUtils'; +import DragHeader from '@/components/common/DragHeader/DragHeader'; + +import styles from './EarlyWarningList.less'; + +const TextArea = Input.TextArea; + + +const Body = ({ children, title }) => ( + +

{title}

+ {children} + +); + +@connect(({ global, earlywarninglist, hdviewtheme }) => ({ + earlywarninglist, + IsSettingScene: earlywarninglist.IsSettingScene, +})) + +class EarlyWarningList extends PureComponent { + constructor(props) { + super(props); + this.state = { + confirmdeletemodal: false, // 确认删除弹出框 + earlyWarningList: [], + newaddmodal: false, // 新增弹出框 + editmodal: false, + editingKey: '', + selectedRowKeys: [], // Check here to configure the default column + tablescroll: 300, + current: 1, + starttime: dayjs(`${dayjs().format('YYYY-MM-DD')} 00:00:00`), + endtime: '', + record: '', + id1: '', + title1: '', + content1: '', + starttime1: '', + endtime1: '', + titlesearch: '', + contentsearch: '', + starttimesearch: dayjs(`${dayjs().format('YYYY-MM-DD')} 00:00:00`), + endtimesearch: '', + deleteId: '', + confirmdeletemodal1: false, + }; + + this.columns = [ + { + title: '标题', + dataIndex: 'title', + width: '15%', + align: 'center', + render: (text, record) => { + const title = record.title; + if (title.length <= 10) { + return ( + + {`${title}`} + + ); + } else { + return ( + + {`${title.toString().substring(0, 10) + '...'}`} + + ); + } + }, + }, + { + title: '内容', + dataIndex: 'content', + width: '40%', + align: 'center', + render: (text, record) => { + const content = record.content; + if (content.length <= 30) { + return ( + + {`${content}`} + + ); + } else { + return ( + + {`${content.toString().substring(0, 30) + '...'}`} + + ); + } + }, + }, + { + title: '开始时间', + dataIndex: 'starttime', + width: '15%', + align: 'center', + ellipsis: true, + }, + { + title: '结束时间', + dataIndex: 'endtime', + width: '15%', + align: 'center', + ellipsis: true, + }, + { + title: '操作', + dataIndex: 'operation', + width: '10%', + align: 'center', + render: (text, record) => { + const editable = this.isEditing(record); + return ( +
+ + + this.onEditWarning(record)} + > + 编辑 + + +    + + this.onDeleteWarning1(record)} + > + 删除 + + +
+ ); + }, + }, + ]; + } + + componentDidMount() { + const { + earlywarninglist: { colorWeak }, + } = this.props; + this.bodyScale(); + + const { selectedaddareavalue } = this.state; + this.getEarlyWarningList(); + + + if (document.getElementById('sectionconfig_tablediv')) + this.setState({ + // tablescroll: document.getElementById('sectionconfig_tablediv').clientHeight - 165, + }); + window.onresize = () => { + this.bodyScale(); + if (document.getElementById('sectionconfig_tablediv')) + this.setState({ + //tablescroll: document.getElementById('sectionconfig_tablediv').clientHeight - 230, + }); + }; + } + + + + changeSetting = (key, value) => { + const { earlywarninglist } = this.props; + const nextState = { ...earlywarninglist }; + nextState[key] = value; + if (key === 'IsSettingScene') { + const switchF = () => { + const { dispatch, layout } = this.props; + const tmp = layout.map(x => ({ + ...x, + static: !value, + moved: !!value, + })); + + dispatch({ + type: 'global/onLayoutChange', + payload: { + layout: deepclone(tmp), + tmplayout: [], + }, + }); + + //注意这个写了两遍...... + this.setState(nextState, () => { + const { dispatch } = this.props; + dispatch({ + type: 'earlywarninglist/changeSetting', + payload: this.state, + }); + }); + }; + + const ifEdited = window.g_app._store?.getState('global')?.global?.tmplayout?.length; + if (!value && ifEdited) { + Modal.confirm({ + title: '信息', + content: '确认关闭设置吗?', + okText: '确认', + cancelText: '返回', + onOk: switchF, + }); + } else { + switchF(); + } + /* dispatch({ + type: 'hdviewtheme/fetch', + payload:{sceneid: 'monitor',} + }); */ + } else { + if (key === 'fixedHeader') { + if (!value) { + nextState.autoHideHeader = false; + } + } + if (key === 'collapse') { + /* if(IsSettingScene){ + nextState.IsSettingScene = false; + } */ + } + + if (key === 'colorWeak') { + if (value) { + document.body.className = 'colorWeak'; + } else { + document.body.className = ''; + document.body.className = ''; + } + } + + this.setState(nextState, () => { + const { dispatch } = this.props; + dispatch({ + type: 'earlywarninglist/changeSetting', + payload: this.state, + }); + }); + } + }; + + togglerContent = () => { + const { earlywarninglist } = this.props; + earlywarninglist.getEarlyWarningListToday(); + this.changeSetting('collapse', !earlywarninglist.collapse); + }; + + + + + + + + bodyScale = () => { + // const deviceHeight = document.documentElement.clientHeight; + // const scale = deviceHeight / 1080; // 分母——设计稿的尺寸 + // document.body.style.zoom = scale; + document.body.style.zoom = 1; + }; + + // 获取列表数据 + getEarlyWarningList = () => { + const { dispatch } = this.props; + const { titlesearch, contentsearch, starttimesearch, endtimesearch } = this.state; + var starttimesearch1 = ""; + if (null != starttimesearch && "" != starttimesearch) { + starttimesearch1 = dayjs(starttimesearch).format('YYYY-MM-DD HH:mm:ss'); + } + var endtimesearch1 = ""; + if (null != endtimesearch && "" != endtimesearch) { + endtimesearch1 = dayjs(endtimesearch).format('YYYY-MM-DD HH:mm:ss'); + + } + if ((null != starttimesearch && "" != starttimesearch) && (null != endtimesearch && "" != endtimesearch)) { + if (starttimesearch.isAfter(endtimesearch)) { + message.info('开始时间不能晚于结束时间'); + return; + } + } + + dispatch({ + type: 'earlywarninglist/getEarlyWarningList', + payload: { + title: titlesearch, + content: contentsearch, + starttime: starttimesearch1, + endtime: endtimesearch1, + } + }).then(() => { + const { earlywarninglist } = this.props; + const { list } = earlywarninglist; + const resultlist = []; + if (null != list) { + for (let i = 0; i < list.length; i += 1) { + resultlist.push({ + key: list[i].id, + id: list[i].id, + title: list[i].title, + content: list[i].content, + starttime: list[i].starttime, + endtime: list[i].endtime, + }); + } + } + + if (document.getElementById('sectionconfig_tablediv')) { + this.setState({ + //tablescroll: document.getElementById('sectionconfig_tablediv').clientHeight, + }); + } + this.setState({ + earlyWarningList: resultlist, + current: 1, + }); + }); + }; + + + + + // 获取选中的标识符 + onSelectChange = selectedRowKeys => { + this.setState({ selectedRowKeys }); + }; + + isEditing = record => { + const { editingKey } = this.state; + return record.key === editingKey; + }; + + // 取消编辑保存 + cancel = () => { + this.setState({ editingKey: '' }); + }; + + // 点击删除 + onDeleteWarning = () => { + const { selectedRowKeys } = this.state; + if (selectedRowKeys.length > 0) { + this.setState({ + confirmdeletemodal: true, + }); + /* Modal.info({ + title: '提示', + content: '是否确认删除', + onOk: this.handleOkdelete(selectedRowKey), + onCancel: this.handleCancel, + }); */ + } else { + Modal.info({ + title: '提示', + content: '请先选择需要删除的预警提醒', + okText: '确定', + }); + } + }; + + // 点击删除 + onDeleteWarning1 = (record) => { + + + this.setState({ + deleteId: record.id, + confirmdeletemodal1: true, + }); + /* Modal.info({ + title: '提示', + content: '是否确认删除', + onOk: this.handleOkdelete(selectedRowKey), + onCancel: this.handleCancel, + }); */ + + }; + handledeleteOk = () => { + const { selectedRowKeys } = this.state; + const selectedRowKey = selectedRowKeys.join(','); + const { dispatch, getEarlyWarningListToday } = this.props; + dispatch({ + type: 'earlywarninglist/deleteEarlyWarning', + payload: { + id: selectedRowKey, + }, + }).then(() => { + this.getEarlyWarningList(); + getEarlyWarningListToday(); + this.setState({ + selectedRowKeys: [], + confirmdeletemodal: false, + }); + }); + }; + + handledeleteCancel = () => { + this.setState({ + selectedRowKeys: [], + confirmdeletemodal: false, + }); + }; + + handledeleteOk1 = () => { + const { deleteId } = this.state; + + const { dispatch, getEarlyWarningListToday } = this.props; + dispatch({ + type: 'earlywarninglist/deleteEarlyWarning', + payload: { + id: deleteId, + }, + }).then(() => { + this.getEarlyWarningList(); + getEarlyWarningListToday(); + this.setState({ + deleteId: '', + confirmdeletemodal1: false, + }); + }); + }; + + handledeleteCancel1 = () => { + this.setState({ + deleteId: '', + confirmdeletemodal1: false, + }); + }; + + + // 确认删除 + handleDeleteConfig = selectedRowKey => { }; + + // 点击新增 + onAddWarning = () => { + this.setState({ + newaddmodal: true, + + }); + }; + // 点击新增 + onEditWarning = (record) => { + this.setState({ + editmodal: true, + record: record, + id1: record.id, + title1: record.title, + content1: record.content, + starttime1: dayjs(record.starttime), + endtime1: dayjs(record.endtime), + }); + }; + + + + + + // 新增点击确定 + handleaddOk = e => { + const { title, content, starttime, endtime } = this.state; + var startTime1 = dayjs(starttime).format('YYYY-MM-DD HH:mm:ss'); + var endTime1 = dayjs(endtime).format('YYYY-MM-DD HH:mm:ss'); + if (title == '') { + message.info('请输入预警标题'); + } else if (content == '') { + message.info('请输入预警内容'); + } else if (starttime == '') { + message.info('请选择开始时间'); + } else if (endtime == '') { + message.info('请选择结束时间'); + } else if (starttime.isAfter(endtime)) { + message.info('开始时间不能晚于结束时间'); + } else { + const { dispatch, getEarlyWarningListToday } = this.props; + dispatch({ + type: 'earlywarninglist/getAddNewWarningInfo', + payload: { + title: title, + content: content, + starttime: startTime1, + endtime: endTime1, + }, + }).then(() => { + this.getEarlyWarningList(); + getEarlyWarningListToday(); + this.setState({ + newaddmodal: false, + title: '', + content: '', // 饱和流量值 + starttime: dayjs(`${dayjs().format('YYYY-MM-DD')} 00:00:00`), + endtime: dayjs(`${dayjs().format('YYYY-MM-DD')} 23:59:59`), + }); + }); + } + }; + // 新增点击确定 + handleEditOk = e => { + const { id1, title1, content1, starttime1, endtime1 } = this.state; + var startTime1 = dayjs(starttime1).format('YYYY-MM-DD HH:mm:ss'); + var endTime1 = dayjs(endtime1).format('YYYY-MM-DD HH:mm:ss'); + if (title1 == '') { + message.info('请输入预警标题'); + } else if (content1 == '') { + message.info('请输入预警内容'); + } else if (starttime1 == '') { + message.info('请选择开始时间'); + } else if (endtime1 == '') { + message.info('请选择结束时间'); + } else if (starttime1.isAfter(endtime1)) { + message.info('开始时间不能晚于结束时间'); + } else { + const { dispatch, getEarlyWarningListToday } = this.props; + dispatch({ + type: 'earlywarninglist/updateEarlyWarning', + payload: { + id: id1, + title: title1, + content: content1, + starttime: startTime1, + endtime: endTime1, + }, + }).then(() => { + this.getEarlyWarningList(); + getEarlyWarningListToday(); + this.setState({ + editmodal: false, + + id1: '', + title1: '', + content1: '', + starttime1: '', + endtime1: '', + }); + }); + } + }; + // 新增点击取消 + handleaddCancel = () => { + this.setState({ + newaddmodal: false, + title: '', + content: '', // 饱和流量值 + starttime: dayjs(`${dayjs().format('YYYY-MM-DD')} 00:00:00`), + endtime: dayjs(`${dayjs().format('YYYY-MM-DD')} 23:59:59`), + }); + }; + handleEditCancel = () => { + this.setState({ + editmodal: false, + + id1: '', + title1: '', + content1: '', + starttime1: '', + endtime1: '', + }); + }; + // 查询路段名称 + onChangetitlesearch = e => { + this.setState({ titlesearch: e.target.value }); + }; + onChangecontentsearch = e => { + this.setState({ contentsearch: e.target.value }); + }; + + // 重置 + onReset = () => { + this.setState(({ + titlesearch: '', + contentsearch: '', + starttimesearch: dayjs(`${dayjs().format('YYYY-MM-DD')} 00:00:00`), + endtimesearch: dayjs(`${dayjs().format('YYYY-MM-DD')} 23:59:59`), + current: 1, + }), () => { + this.getEarlyWarningList(); + }); + // + + }; + + // 查询 + getEarlyWarningListSearch = () => { + + const { dispatch } = this.props; + + const { titlesearch, contentsearch, starttimesearch, endtimesearch } = this.state; + var starttimesearch1 = dayjs(starttimesearch).format('YYYY-MM-DD HH:mm:ss'); + var endtimesearch1 = dayjs(endtimesearch).format('YYYY-MM-DD HH:mm:ss'); + + if (starttimesearch.isAfter(endtimesearch)) { + message.info('开始时间不能晚于结束时间'); + return; + } + dispatch({ + type: 'earlywarninglist/getEarlyWarningList', + payload: { + title: titlesearch, + content: contentsearch, + starttime: starttimesearch1, + endtime: endtimesearch1, + } + }).then(() => { + const { earlywarninglist } = this.props; + const { list } = earlywarninglist; + const resultlist = []; + if (null != list) { + for (let i = 0; i < list.length; i += 1) { + resultlist.push({ + key: list[i].id, + id: list[i].id, + title: list[i].title, + content: list[i].content, + starttime: list[i].starttime, + endtime: list[i].endtime, + }); + } + } + + + this.setState({ + earlyWarningList: resultlist, + }); + }); + }; + + + + handlePagination = page => { + this.setState({ + current: page, + }); + }; + + onChangeTitle = e => { + this.setState({ title: e.target.value }); + }; + onChangeContent = e => { + this.setState({ content: e.target.value }); + }; + onChangeTitle1 = e => { + this.setState({ title1: e.target.value }); + }; + onChangeContent1 = e => { + this.setState({ content1: e.target.value }); + + }; + close = () => { + const { getEarlyWarningListToday } = this.props; + getEarlyWarningListToday(); + window.g_app._store.dispatch({ + type: 'global/closePopWindow', + payload: { + name: "EarlyWarningList", + }, + }); + }; + render() { + const { + earlywarninglist, + left, + top, + headTitle, + } = this.props; + + const { collapse, colorWeak, compactType } = earlywarninglist; + + + const { + selectedRowKeys, + earlyWarningList, + newaddmodal, + confirmdeletemodal, + confirmdeletemodal1, + title, + content, + starttime, + endtime, + + tablescroll, + current, + + editmodal, + id1, + title1, + content1, + starttime1, + endtime1, + titlesearch, + contentsearch, + starttimesearch, + endtimesearch, + } = this.state; + const rowSelection = { + selectedRowKeys, + onChange: this.onSelectChange, + }; + + const pagination = { + defaultPageSize: 20, + defaultCurrent: 1, + current, + showSizeChanger: true, + showQuickJumper: true, + onChange: this.handlePagination, + }; + + const columns = this.columns.map(col => { + if (!col.editable) { + return col; + } + return { + ...col, + onCell: record => ({ + record, + inputType: 'text', + dataIndex: col.dataIndex, + title: col.title, + editing: this.isEditing(record), + + ellipsis: true, + }), + }; + }); + + + return ( +
+ +
+

{headTitle}

+ { + this.close(); + }} + /> +
+
+
+ +
+
+
+
+
+
+
+
+ 标题: + +
+
+ 内容: + +
+
+ 开始时间: + { + this.setState({ starttimesearch: value }); + }} + + title={starttimesearch} + /> +
+
+ 结束时间: + { + this.setState({ endtimesearch: value }); + }} + + title={endtimesearch} + /> +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ 结果列表 + {`共${earlyWarningList.length}条`} +
+
+ + + + + +
+
+
+ + index % 2 === 0 ? 'tableoddRow' : 'tableevenRow' + } + /> + + + + + + +
+
+
+

*

+

标题

+
+ +
+
+
+

*

+

内容

+
+