ccy/mh-sms-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

常用功能

Browse Source
This commit is contained in:
yunkexin 2024-03-25 17:48:12 +08:00
parent 906f2673aa
commit d0cdaf17ba
4 changed files with 212 additions and 266 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/layout/Sider.js
View File

@ -54,6 +54,7 @@ const Sider = (props) => {
}; };
/** 子菜单路由 */ /** 子菜单路由 */
const navToMenu = (menu) => { const navToMenu = (menu) => {
console.log(menu.ID,'menu.ID')
props.history.push({ pathname: `/main/${menu.ID}` }); props.history.push({ pathname: `/main/${menu.ID}` });
}; };

2
src/layout/sider.less
View File

@ -309,7 +309,7 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
margin: 8px 0px; margin: 6px 0px;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
// justify-content: center; // justify-content: center;

472
src/routes/Home.js
View File

@ -30,7 +30,7 @@ import {
Table, Table,
Button, Button,
DatePicker, DatePicker,
Select Select,
} from "antd"; } from "antd";
import styles from "./dashboard.css"; import styles from "./dashboard.css";
import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick.css";
@ -47,6 +47,22 @@ const formItemLayout = {
labelCol: { span: 6 }, labelCol: { span: 6 },
wrapperCol: { span: 14 }, wrapperCol: { span: 14 },
}; };
const AllTech = (props) => {
return (
<Col
span={6}
className="home-tech-col"
onClick={() => {
props.techClick()
}}
>
<div className="home-tech-back">
<IconFont type={props.icon} className="home-tech-icon"></IconFont>
</div>
<span className="home-tech-name">{props.title}</span>
</Col>
);
};
const WorkBench = (props) => { const WorkBench = (props) => {
return ( return (
<div> <div>
@ -169,8 +185,8 @@ class Home extends React.Component {
searchTodayVisible: false, searchTodayVisible: false,
taskSelects: [], taskSelects: [],
tmpData: {}, tmpData: {},
querySearch:{}, querySearch: {},
currentpageIndex:'1', currentpageIndex: "1",
visibleStartTime: [], visibleStartTime: [],
visibleEndTime: [], visibleEndTime: [],
completeName: [ completeName: [
@ -225,6 +241,16 @@ class Home extends React.Component {
this.dangerChange(); this.dangerChange();
this.getUser(); this.getUser();
} }
getSixMonth = (number, yearString = "", monthString = "") => {
let nowdate = new Date();
nowdate.setMonth(nowdate.getMonth() + number);
let y = nowdate.getFullYear();
let m = nowdate.getMonth() + 1;
// let d = nowdate.getDate();
let retrundate = y + yearString + m + monthString;
return retrundate;
};
showAll = (key) => { showAll = (key) => {
const { tableData } = this.state; const { tableData } = this.state;
@ -580,20 +606,10 @@ class Home extends React.Component {
[23, 21, 43, 12, 15, 13, 15, 16, 17, 14, 19, 24], [23, 21, 43, 12, 15, 13, 15, 16, 17, 14, 19, 24],
[17, 20, 23, 42, 12, 17, 13, 15, 12, 17, 19, 34], [17, 20, 23, 42, 12, 17, 13, 15, 12, 17, 19, 34],
]; ];
let xData = [ let xData = [];
"2023年4月", for (let i = 0; i < 12; i++) {
"2023年5月", xData.unshift(this.getSixMonth(-i, "年", "月"));
"2023年6月", }
"2023年7月",
"2023年8月",
"2023年9月",
"2023年10月",
"2023年11月",
"2023年12月",
"2024年1月",
"2024年2月",
"2024年3月",
];
for (let i = 0; i < data3.length; i++) { for (let i = 0; i < data3.length; i++) {
series.push({ series.push({
name: seriesName[i], name: seriesName[i],
@ -697,12 +713,13 @@ class Home extends React.Component {
["0", "1", "0", "3", "0", "1"], ["0", "1", "0", "3", "0", "1"],
["100.00", "92.31", "100.00", "76.92", "100.00", "92.86"], ["100.00", "92.31", "100.00", "76.92", "100.00", "92.86"],
]; ];
let xData = [ let date = new Date();
["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"], let year = date.getFullYear();
["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"], let month = date.getMonth() + 1;
["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"], let xData = [];
["2023-10", "2023-11", "2023-12", "2024-01", "2024-02", "2024-03"], for (let i = 0; i < 6; i++) {
]; xData.unshift(this.getSixMonth(-i, "-", ""));
}
let dangerChanges = document.getElementById("dangerChange"); let dangerChanges = document.getElementById("dangerChange");
if (dangerChanges) { if (dangerChanges) {
let myChart = echarts.init(dangerChanges); let myChart = echarts.init(dangerChanges);
@ -752,7 +769,7 @@ class Home extends React.Component {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: xData[0], data: xData,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#0c3b71", color: "#0c3b71",
@ -966,7 +983,7 @@ class Home extends React.Component {
myChart.setOption({ myChart.setOption({
title: [ title: [
{ {
text: "93%", text: "99%",
x: "center", x: "center",
top: "40%", top: "40%",
textStyle: { textStyle: {
@ -1012,7 +1029,7 @@ class Home extends React.Component {
hoverAnimation: false, hoverAnimation: false,
data: [ data: [
{ {
value: 93, value: 99,
name: "01", name: "01",
itemStyle: { itemStyle: {
normal: { normal: {
@ -1040,7 +1057,7 @@ class Home extends React.Component {
}, },
{ {
name: "02", name: "02",
value: 7, value: 1,
}, },
], ],
}, },
@ -1063,24 +1080,27 @@ class Home extends React.Component {
let myChart = echarts.init(riskLevels); let myChart = echarts.init(riskLevels);
myChart.setOption({ myChart.setOption({
color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"], color: ["#c92a2a", "#ffa94d", "#ffe066", "#4285F4", "#fa8a89"],
title: [{ title: [
text: "52", {
x: "26%", text: "52",
y: "40%", x: "26%",
textStyle: { y: "40%",
fontSize: 26, textStyle: {
fontWeight: "normal", fontSize: 26,
color: ["#333"], fontWeight: "normal",
color: ["#333"],
},
}, },
},{ {
text: "风险总数", text: "风险总数",
x: "24%", x: "24%",
y: "55%", y: "55%",
textStyle: { textStyle: {
color: "#666", color: "#666",
fontSize: 12, fontSize: 12,
},
}, },
}], ],
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{b}:({d}%)", formatter: "{b}:({d}%)",
@ -1230,7 +1250,7 @@ class Home extends React.Component {
{ {
querySearch, querySearch,
}, },
() => { } () => {}
); );
}; };
// 开始时间 // 开始时间
@ -1254,7 +1274,7 @@ class Home extends React.Component {
{ {
querySearch, querySearch,
}, },
() => { } () => {}
); );
}; };
// 结束时间 // 结束时间
@ -1317,46 +1337,46 @@ class Home extends React.Component {
> >
<div> <div>
<Form> <Form>
<Row style={{ marginTop: "50px" }}> <Row style={{ marginTop: "50px" }}>
<Col span={5}> <Col span={5}>
<Form.Item label={"名称"} {...formItemLayout}> <Form.Item label={"名称"} {...formItemLayout}>
<Input <Input
value={this.state.querySearch.searchName} value={this.state.querySearch.searchName}
placeholder={"请输入任务名称"} placeholder={"请输入任务名称"}
name="searchName" name="searchName"
onChange={this.vauleChange} onChange={this.vauleChange}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={6}> <Col span={6}>
<Form.Item label={"开始时间"} {...formItemLayout}> <Form.Item label={"开始时间"} {...formItemLayout}>
<RangePicker <RangePicker
value={this.state.visibleStartTime} value={this.state.visibleStartTime}
onChange={this.startChange} onChange={this.startChange}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={6}> <Col span={6}>
<Form.Item label={"结束时间"} {...formItemLayout}> <Form.Item label={"结束时间"} {...formItemLayout}>
<RangePicker <RangePicker
value={this.state.visibleEndTime} value={this.state.visibleEndTime}
onChange={this.endChange} onChange={this.endChange}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={2}> <Col span={2}>
<Button <Button
type={"primary"} type={"primary"}
icon={"search"} icon={"search"}
onClick={() => onClick={() =>
this.handleSearch(this.state.currentpageIndex) this.handleSearch(this.state.currentpageIndex)
} }
> >
搜索 搜索
</Button> </Button>
</Col> </Col>
</Row> </Row>
</Form> </Form>
<Table <Table
// rowSelection={rowSelection} // rowSelection={rowSelection}
dataSource={this.state.workData} dataSource={this.state.workData}
@ -1366,7 +1386,7 @@ class Home extends React.Component {
} }
loading={this.state.showLoading} loading={this.state.showLoading}
size="small" size="small"
style={{padding: "0px 20px"}} style={{ padding: "0px 20px" }}
/> />
</div> </div>
</Modal> </Modal>
@ -1381,61 +1401,61 @@ class Home extends React.Component {
> >
<div> <div>
<Form> <Form>
<Row style={{ marginTop: "50px" }}> <Row style={{ marginTop: "50px" }}>
<Col span={5}> <Col span={5}>
<Form.Item label={"提醒内容"} {...formItemLayout}> <Form.Item label={"提醒内容"} {...formItemLayout}>
<Input <Input
value={this.state.querySearch.searchName} value={this.state.querySearch.searchName}
placeholder={"请输入提醒内容"} placeholder={"请输入提醒内容"}
name="searchName" name="searchName"
onChange={this.vauleChange} onChange={this.vauleChange}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={6}> <Col span={6}>
<Form.Item label={"开始时间"} {...formItemLayout}> <Form.Item label={"开始时间"} {...formItemLayout}>
<RangePicker <RangePicker
value={this.state.visibleStartTime} value={this.state.visibleStartTime}
// defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]} // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
onChange={this.startChange} onChange={this.startChange}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={6}> <Col span={6}>
<Form.Item label={"结束时间"} {...formItemLayout}> <Form.Item label={"结束时间"} {...formItemLayout}>
<RangePicker <RangePicker
value={this.state.visibleEndTime} value={this.state.visibleEndTime}
// defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]} // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
onChange={this.endChange} onChange={this.endChange}
/> />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={3}> <Col span={3}>
<Form.Item label={"状态"} {...formItemLayout}> <Form.Item label={"状态"} {...formItemLayout}>
<Select <Select
value={this.state.querySearch.searchStatus} value={this.state.querySearch.searchStatus}
// defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]} // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
onChange={this.selectChange} onChange={this.selectChange}
>
<Option value="0">未读</Option>
<Option value="3">已读</Option>
<Option value="1">已办</Option>
</Select>
</Form.Item>
</Col>
<Col span={2}>
<Button
type={"primary"}
icon={"search"}
onClick={() =>
this.handleSearch(this.state.currentpageIndex)
}
> >
搜索 <Option value="0">未读</Option>
</Button> <Option value="3">已读</Option>
</Col> <Option value="1">已办</Option>
</Row> </Select>
</Form> </Form.Item>
</Col>
<Col span={2}>
<Button
type={"primary"}
icon={"search"}
onClick={() =>
this.handleSearch(this.state.currentpageIndex)
}
>
搜索
</Button>
</Col>
</Row>
</Form>
<Table <Table
dataSource={this.state.workData} dataSource={this.state.workData}
columns={this.state.searchColumns} columns={this.state.searchColumns}
@ -1444,7 +1464,7 @@ class Home extends React.Component {
} }
loading={this.state.showLoading} loading={this.state.showLoading}
size="small" size="small"
style={{padding: "0px 20px"}} style={{ padding: "0px 20px" }}
/> />
</div> </div>
</Modal> </Modal>
@ -1465,7 +1485,7 @@ class Home extends React.Component {
}} }}
> >
<Col <Col
span={9} span={10}
style={{ style={{
backgroundColor: "#fff", backgroundColor: "#fff",
height: "100%", height: "100%",
@ -1677,7 +1697,7 @@ class Home extends React.Component {
{/* <div style={{ width: "30px" }}></div> */} {/* <div style={{ width: "30px" }}></div> */}
<Col <Col
span={8} span={7}
style={{ style={{
backgroundColor: "#fff", backgroundColor: "#fff",
height: "100%", height: "100%",
@ -1686,12 +1706,14 @@ class Home extends React.Component {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
flex: 1, flex: 1,
alignItems: " center",
justifyContent: "center",
}} }}
> >
<Divider <Divider
type="vertical" type="vertical"
dashed={true} dashed={true}
style={{ height: "100%", backgroundColor: "#fff" }} style={{ height: "80%", backgroundColor: "#fff" }}
/> />
<div className="home-rate"> <div className="home-rate">
{/* <div className="home-always-title"> {/* <div className="home-always-title">
@ -1714,7 +1736,7 @@ class Home extends React.Component {
<Divider <Divider
type="vertical" type="vertical"
dashed={true} dashed={true}
style={{ height: "100%" }} className="home-rate-divider"
/> />
{/* <div {/* <div
style={{ style={{
@ -1766,128 +1788,48 @@ class Home extends React.Component {
</div> </div>
<div style={{ flex: 1, height: "100%", padding: "10px 20px" }}> <div style={{ flex: 1, height: "100%", padding: "10px 20px" }}>
<Row style={{ height: "50%" }}> <Row style={{ height: "50%" }}>
<Col <AllTech
span={6} icon={"icon-a-zu57"}
className="home-tech-col" title={"排班明细"}
onClick={() => { techClick={()=>{this.navToMenu("6dc35aee-dd5e-4b31-b7ca-5f62d337d0c1")}}
this.navToMenu("dd1e5b37-f8b2-45fe-8904-08c587b5cc79"); />
}} <AllTech
> icon={"icon-a-zu198"}
<div className="home-tech-back"> title={"作业票"}
<IconFont techClick={()=>{this.navToMenu("b3767117-f0aa-4122-97c1-2fc58fbaf934")}}
type="icon-a-zu57" />
className="home-tech-icon" <AllTech
></IconFont> icon={"icon-a-zu83"}
</div> title={"外包作业票"}
<span className="home-tech-name">用户列表</span> techClick={()=>{this.navToMenu("7a9b51b1-3d56-4199-b450-f9f5f9cc3235")}}
</Col> />
<Col <AllTech
span={6} icon={"icon-a-zu291"}
className="home-tech-col" title={"作业任务识别"}
onClick={() => { techClick={()=>{this.navToMenu("2beef9b3-e4b9-4b0b-9e82-238c4bf3be5d")}}
this.navToMenu("a8236679-bb7d-4432-b539-28c270338db1"); />
}}
>
<div className="home-tech-back">
<IconFont
type="icon-a-zu198"
className="home-tech-icon"
></IconFont>
</div>
<span className="home-tech-name">菜单配置</span>
</Col>
<Col
span={6}
className="home-tech-col"
onClick={() => {
this.navToMenu("12388502-4ee9-02c2-8c80-68e07ba3d087");
}}
>
<div className="home-tech-back">
<IconFont
type="icon-a-zu83"
className="home-tech-icon"
></IconFont>
</div>
<span className="home-tech-name">排班日历</span>
</Col>
<Col
span={6}
className="home-tech-col"
onClick={() => {
this.navToMenu("a81dfac3-af1e-4a5a-aadc-eb8e525ddd16");
}}
>
<div className="home-tech-back">
<IconFont
type="icon-a-zu291"
className="home-tech-icon"
></IconFont>
</div>
<span className="home-tech-name">角色列表</span>
</Col>
</Row> </Row>
<Row style={{ height: "50%" }}> <Row style={{ height: "50%" }}>
<Col <AllTech
span={6} icon={"icon-a-zu73"}
className="home-tech-col" title={"检查任务制定"}
onClick={() => { techClick={()=>{this.navToMenu("21b685c9-d298-4a14-9700-c9ab1bb8a918")}}
this.navToMenu("b0972124-6aa1-479b-9725-5f726754ce58"); />
}} <AllTech
> icon={"icon-a-zu164"}
<div className="home-tech-back"> title={"手动隐患上报"}
<IconFont techClick={()=>{this.navToMenu("2e7835ef-0e5a-41b5-8bb7-ad9c64a6b2f4")}}
type="icon-a-zu73" />
className="home-tech-icon" <AllTech
></IconFont> icon={"icon-a-zu203"}
</div> title={"培训通知发起"}
<span className="home-tech-name">模版表单</span> techClick={()=>{this.navToMenu("818ab476-b29f-4db5-9393-fd13e1d2a565")}}
</Col> />
<Col <AllTech
span={6} icon={"icon-a-zu196"}
className="home-tech-col" title={"普通会议通知"}
onClick={() => { techClick={()=>{this.navToMenu("800abe55-a2cf-4e23-a2b6-1caf2dca816c")}}
this.navToMenu("6dc35aee-dd5e-4b31-b7ca-5f62d337d0c1"); />
}}
>
<div className="home-tech-back">
<IconFont
type="icon-a-zu164"
className="home-tech-icon"
></IconFont>
</div>
<span className="home-tech-name">排班明细</span>
</Col>
<Col
span={6}
className="home-tech-col"
onClick={() => {
this.navToMenu("269f79ae-5f41-40f1-8d77-f532750208d1");
}}
>
<div className="home-tech-back">
<IconFont
type="icon-a-zu203"
className="home-tech-icon"
></IconFont>
</div>
<span className="home-tech-name">班前会议</span>
</Col>
<Col
span={6}
className="home-tech-col"
onClick={() => {
this.navToMenu("ea164ba5-b78a-4545-96fa-46e6ab635fb7");
}}
>
<div className="home-tech-back">
<IconFont
type="icon-a-zu196"
className="home-tech-icon"
></IconFont>
</div>
<span className="home-tech-name">岗位当班</span>
</Col>
</Row> </Row>
</div> </div>
</Col> </Col>

3
src/routes/dashboard.css
View File

@ -54,6 +54,9 @@
white-space: nowrap; white-space: nowrap;
/* margin-right: 20px; */ /* margin-right: 20px; */
} }
:global(.home-rate-divider){
height: 80%;
}
:global(.home-always-title) { :global(.home-always-title) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;