常用功能

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

View File

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

View File

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

View File

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

View File

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