diff --git a/src/index.css b/src/index.css index de1bfd2..c7cc83a 100644 --- a/src/index.css +++ b/src/index.css @@ -105,6 +105,15 @@ body { padding: 36px 5px 10px 5px; min-width: 375px; } +:global(.ant-modal.antd-modal-homescreen) { + top : 0; + width : 100% !important; + height : 100%; + z-index: 100; + position: fixed; + padding: 36px 40px 40px 40px; + min-width: 375px; +} :global(.ant-modal.antd-modal-fullscreen > .ant-modal-content) { height: 100%; @@ -115,6 +124,15 @@ body { padding : 0; max-height: unset; } +:global(.ant-modal.antd-modal-homescreen > .ant-modal-content) { + height: 100%; +} + +:global(.ant-modal.antd-modal-homescreen > .ant-modal-content > .ant-modal-body) { + height : calc(100% - 55px); + padding : 0; + max-height: unset; +} /** 全屏弹窗样式 ===end=== **/ diff --git a/src/layout/sider.less b/src/layout/sider.less index 8ee16d2..fe9c23d 100644 --- a/src/layout/sider.less +++ b/src/layout/sider.less @@ -244,18 +244,18 @@ display: grid; grid-template-rows: auto; grid-template-columns: auto; - grid-template-columns: repeat(auto-fill, 170px); + grid-template-columns: repeat(auto-fill, 180px); justify-content: space-between; // grid-gap: 5px; /* 声明了两行，行高分别为 50px 50px */ // grid-template-rows: 50px; - margin: 10px 20px 10px 70px; + margin: 10px 20px 10px 55px; } &__shortMenuShowFlex { background-color: #fff; // border-top: 10px solid #f3f4f6; - padding: 30px 0px 20px 0px; - margin-bottom: 20px; + padding: 20px 0px 5px 0px; + margin-bottom: 10px; margin-right: 30px; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12); border-radius: 10px; @@ -309,7 +309,7 @@ align-items: center; cursor: pointer; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); - margin: 10px 0px; + margin: 8px 0px; padding: 10px; border-radius: 5px; // justify-content: center; diff --git a/src/routes/Home.js b/src/routes/Home.js index f685d3d..e408c08 100644 --- a/src/routes/Home.js +++ b/src/routes/Home.js @@ -23,7 +23,14 @@ import { Dropdown, Menu, Empty, - Modal + Modal, + Divider, + Form, + Input, + Table, + Button, + DatePicker, + Select } from "antd"; import styles from "./dashboard.css"; import "slick-carousel/slick/slick.css"; @@ -34,6 +41,12 @@ import ModifyPassword from "../components/MainPage/ModifyPassword"; import FoUserInfoShow from "../components/MainPage/FoUserInfoShow"; import FormPage from "../components/FormPage"; const { TabPane } = Tabs; +const Option = Select.Option; +const RangePicker = DatePicker.RangePicker; +const formItemLayout = { + labelCol: { span: 6 }, + wrapperCol: { span: 14 }, +}; const WorkBench = (props) => { return (
@@ -118,7 +131,12 @@ const WorkBench = (props) => { }; const UserInfo = (props) => { return ( -
+
{ + props.showAll(); + }} + >
{ + const { tableData } = this.state; + + if (key == "2") { + this.state.searchColumns = [ + { + width: "450px", + title: "任务名称", + dataIndex: "NOTICE_TITLE", + key: "NOTICE_TITLE", + render: (text, record) => ( + + + this.showEditModal( + record.SOURCE_DATA_ID, + record.SOURCE_FORMCODE, + record.ID, + record.NOTICE_TITLE, + record.CODE + ) + } + > + {record.NOTICE_TITLE} + + + ), + }, + { + title: "开始时间", + dataIndex: "TASK_STARTDT", + key: "TASK_STARTDT", + }, + { + title: "结束时间", + dataIndex: "TASK_ENDDT", + key: "TASK_ENDDT", + }, + { + title: "办结时间", + dataIndex: "TASK_DT", + key: "TASK_DT", + }, + ]; + this.setState({ + searchVisible: true, + searchTodayVisible: false, + querySearch: {}, + }); + } else if (key === "3") { + this.state.searchColumns = [ + { + width: "450px", + title: "提醒内容", + dataIndex: "NOTICE_TITLE", + key: "NOTICE_TITLE", + render: (text, record) => ( + + + this.showTodayModal( + record.SOURCE_DATA_ID, + record.SOURCE_FORMCODE, + record.ID, + record.NOTICE_TITLE, + record.CODE, + record.TASK_STARTDT, + record.NOTICE_STATUS + ) + } + > + {record.NOTICE_TITLE} + + + ), + }, + { + title: "提醒时间", + dataIndex: "TASK_STARTDT", + key: "TASK_STARTDT", + }, + { + title: "状态", + dataIndex: "NOTICE_STATUS", + key: "NOTICE_STATUS", + render: (text, record) => this.ShowStatus(record), + }, + ]; + this.setState({ + searchVisible: false, + searchTodayVisible: true, + querySearch: {}, + }); + } else { + this.state.searchColumns = [ + { + width: "450px", + title: "任务名称", + dataIndex: "NOTICE_TITLE", + key: "NOTICE_TITLE", + render: (text, record) => ( + + + this.showEditModal( + record.SOURCE_DATA_ID, + record.SOURCE_FORMCODE, + record.ID, + record.NOTICE_TITLE, + record.CODE + ) + } + > + {record.NOTICE_TITLE} + + + ), + }, + { + title: "开始时间", + dataIndex: "TASK_STARTDT", + key: "TASK_STARTDT", + }, + { + title: "结束时间", + dataIndex: "TASK_ENDDT", + key: "TASK_ENDDT", + }, + { + title: "预警状态", + dataIndex: "NOTICE_TYPE", + key: "NOTICE_TYPE", + render: (text, record) => this.ShowState(record), + }, + ]; + this.setState({ + searchVisible: true, + searchTodayVisible: false, + querySearch: {}, + }); + } + this.setState( + { + tableData, + currentpageIndex: key, + }, + () => { + this.getBaseData(1, key); + } + ); + }; tabsCallback = (key) => { if (key == 1) { this.getBaseData(1, "1", 5); @@ -231,6 +408,24 @@ class Home extends React.Component { e.CODE ); }; + ShowState(obj) { + var thisResult = + (Date.parse(obj.TASK_ENDDT) - Date.parse(Date())) / 3600 / 1000; + if (thisResult > 0) { + return "正常"; + } else { + return 超期; + } + } + ShowStatus(obj) { + if (obj.NOTICE_STATUS === 0) { + return 未读; + } else if (obj.NOTICE_STATUS === 3) { + return "已读"; + } else { + return "已办"; + } + } showEditModal = (dataId, formCode, TaskID, title, taskCode) => { this.props.dispatch({ type: "app/getDataByPost", @@ -262,14 +457,11 @@ class Home extends React.Component { tmpData: newtmpData, currActivatedMenu: "", }, - () =>{ + () => { this.setState({ formVisible: true, - }) + }); } - - - ); }; clearData = () => { @@ -287,14 +479,38 @@ class Home extends React.Component { this.getBaseData(1, this.state.tableKey, 5); this.clearData(); }; - closeModal=()=>{ + closeModal = () => { this.setState({ formVisible: false, - }) - } + }); + }; getBaseData = (pagination, key, limit) => { const current = pagination ? pagination.current : 1; const json = initFilter(this.props.login.OrgId, "", "CODE", 1, current); + const querySearch = this.state.querySearch; + for (var item in querySearch) { + if (item == "searchName") { + extendRule(json, "NOTICE_TITLE", 9, querySearch[item]); + } + if (item == "searchCode") { + extendRule(json, "CODE", 9, querySearch[item]); + } + if (item == "startTime1") { + extendRule(json, "TASK_STARTDT", 6, querySearch[item]); + } + if (item == "startTime2") { + extendRule(json, "TASK_STARTDT", 4, querySearch[item]); + } + if (item == "endTime1") { + extendRule(json, "TASK_ENDDT", 6, querySearch[item]); + } + if (item == "endTime2") { + extendRule(json, "TASK_ENDDT", 4, querySearch[item]); + } + if (item == "searchStatus") { + extendRule(json, "NOTICE_STATUS", 1, querySearch[item]); + } + } //extendRule(json, "NOTICE_STATUS", 1, 0); json.Limit = limit; //json.Limit = 10; @@ -410,7 +626,7 @@ class Home extends React.Component { left: "5%", right: "5%", bottom: "15%", - top: "5%", + top: "10%", containLabel: true, z: 22, }, @@ -527,10 +743,10 @@ class Home extends React.Component { }, }, grid: { - left: "10%", - // right: "10%", + left: "5%", + right: "5%", bottom: "15%", - top: "5%", + top: "10%", containLabel: true, z: 22, }, @@ -656,16 +872,28 @@ class Home extends React.Component { let myChart = echarts.init(timelyRates); myChart.setOption( { - title: { - text: "83%", - x: "center", - y: "center", - textStyle: { - fontWeight: "normal", - color: "#ffa94d", - fontSize: "20", + title: [ + { + text: "83%", + x: "center", + top: "40%", + textStyle: { + fontWeight: "normal", + color: "#ffa94d", + fontSize: "26", + }, }, - }, + { + text: "及时完成率", + x: "center", + top: "55%", + textStyle: { + fontWeight: "normal", + + fontSize: "14", + }, + }, + ], color: "#ffd6b5", legend: { show: false, @@ -736,16 +964,28 @@ class Home extends React.Component { if (completeRates) { let myChart = echarts.init(completeRates); myChart.setOption({ - title: { - text: "93%", - x: "center", - y: "center", - textStyle: { - fontWeight: "normal", - color: "#0580f2", - fontSize: "20", + title: [ + { + text: "93%", + x: "center", + top: "40%", + textStyle: { + fontWeight: "normal", + color: "#0580f2", + fontSize: "26", + }, }, - }, + { + text: "个人完成率", + x: "center", + top: "55%", + textStyle: { + fontWeight: "normal", + + fontSize: "14", + }, + }, + ], color: ["rgba(176, 212, 251, 1)"], legend: { show: false, @@ -812,8 +1052,8 @@ class Home extends React.Component { riskLevel = () => { let riskLevel = []; let showData = [ - { value: 20, name: "一级" }, - { value: 10, name: "二级" }, + { value: 2, name: "一级" }, + { value: 5, name: "二级" }, { value: 15, name: "三级" }, { value: 30, name: "四级" }, ]; @@ -823,20 +1063,24 @@ class Home extends React.Component { let myChart = echarts.init(riskLevels); myChart.setOption({ color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"], - title: { - text: "60", + title: [{ + text: "52", x: "26%", - y: "center", + y: "40%", textStyle: { - fontSize: 16, + fontSize: 26, fontWeight: "normal", color: ["#333"], }, - subtextStyle: { + },{ + text: "风险总数", + x: "24%", + y: "55%", + textStyle: { color: "#666", fontSize: 12, }, - }, + }], tooltip: { trigger: "item", formatter: "{b}:({d}%)", @@ -942,8 +1186,103 @@ class Home extends React.Component { visible: false, }); }; + doubleClear = () => { + if (this.state.searchVisible === true) { + this.setState({ searchVisible: false }); + } else if (this.state.searchTodayVisible === true) { + this.setState({ searchTodayVisible: false }); + } + + this.getBaseData(1, this.state.tableKey, 5); + }; + vauleChange = (e) => { + const { querySearch } = this.state; + if (e.target.value) { + switch (e.target.name) { + case "searchName": + querySearch[e.target.name] = e.target.value; + this.setState({ querySearch }); + break; + case "searchCode": + querySearch[e.target.name] = e.target.value; + this.setState({ querySearch }); + break; + case "searchType": + querySearch[e.target.name] = e.target.value; + this.setState({ querySearch }); + break; + case "searchContent": + querySearch[e.target.name] = e.target.value; + this.setState({ querySearch }); + break; + } + } else { + this.setState({ querySearch: {} }); + } + }; + handleSearch = (item) => { + this.getBaseData(1, item, null); + }; + selectChange = (value) => { + const { querySearch } = this.state; + querySearch.searchStatus = value; + this.setState( + { + querySearch, + }, + () => { } + ); + }; + // 开始时间 + startChange = (dates, dateStr) => { + const { querySearch } = this.state; + if (dates.length != 2) { + this.setState({ + visibleStartTime: [], + querySearch: {}, + }); + return; + } + this.state.visibleStartTime = dates; + querySearch.startTime1 = this.state.visibleStartTime[0].format( + "YYYY-MM-DD HH:mm:ss" + ); + querySearch.startTime2 = this.state.visibleStartTime[1].format( + "YYYY-MM-DD HH:mm:ss" + ); + this.setState( + { + querySearch, + }, + () => { } + ); + }; + // 结束时间 + endChange = (dates, dateStr) => { + const { querySearch } = this.state; + if (dates.length != 2) { + this.setState({ + visibleEndTime: [], + querySearch: {}, + }); + return; + } + this.state.visibleEndTime = dates; + querySearch.endTime1 = this.state.visibleEndTime[0].format( + "YYYY-MM-DD HH:mm:ss" + ); + querySearch.endTime2 = this.state.visibleEndTime[1].format( + "YYYY-MM-DD HH:mm:ss" + ); + this.setState({ querySearch }); + }; render() { + const rowSelection = { + onChange: (selectedRowKeys, selectedRows) => { + this.state.taskSelects = selectedRows; + }, + }; return (
+ +
+
+ + + + + + + + + + + + + + + + + + + + +
+ + this.getBaseInfoData(num, this.state.currentpageIndex, null) + } + loading={this.state.showLoading} + size="small" + style={{padding: "0px 20px"}} + /> + + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+ this.getBaseInfoData(num, this.state.currentpageIndex, null) + } + loading={this.state.showLoading} + size="small" + style={{padding: "0px 20px"}} + /> + + @@ -1163,44 +1644,62 @@ class Home extends React.Component { data={this.state.workTotal.todoCount} title="待办事项" color="#2177d5" + showAll={() => { + this.showAll("1"); + }} /> { + this.showAll("4"); + }} /> { + this.showAll("2"); + }} /> { + this.showAll("3"); + }} /> -
+ {/*
*/} + +
-
+ {/*
完成率
-
+
*/}
-
+ {/*
+ >
*/}
-
+ {/*
及时完成率
-
+
*/}
@@ -1413,7 +1917,7 @@ class Home extends React.Component { padding: "0px", borderRadius: "5px", flex: 1, - minWidth: "1368px", + minWidth: "1168px", }} >
@@ -1625,7 +2129,7 @@ class Home extends React.Component { style={{ margin: "0px 0px 10px 0px", minHeight: "275px", - minWidth: "1904px", + minWidth: "1704px", }} >