dengyinhuan
2 years ago
44 changed files with 1237 additions and 86 deletions
@ -0,0 +1,42 @@ |
|||
'use strict'; |
|||
|
|||
async function statistic (ctx) { |
|||
try { |
|||
const models = ctx.fs.dc.models; |
|||
const { userId } = ctx.fs.api; |
|||
const { projectType } = ctx.query; |
|||
|
|||
let findOption = { |
|||
where: { |
|||
reportType: 'conserve', |
|||
}, |
|||
attributes: ['id', 'road', 'time', 'projectType', 'projectType'], |
|||
include: [{ |
|||
model: models.User, |
|||
attributes: ['name'] |
|||
}], |
|||
} |
|||
|
|||
if (projectType) { |
|||
findOption.where.projectType = projectType; |
|||
} |
|||
|
|||
const reportRes = await await models.Report.findAll(findOption) |
|||
|
|||
ctx.status = 200 |
|||
ctx.body = { |
|||
processed: reportRes.length, |
|||
reportList: reportRes, |
|||
} |
|||
} catch (error) { |
|||
ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`); |
|||
ctx.status = 400; |
|||
ctx.body = { |
|||
message: typeof error == 'string' ? error : undefined |
|||
} |
|||
} |
|||
} |
|||
|
|||
module.exports = { |
|||
statistic, |
|||
}; |
|||
@ -0,0 +1,9 @@ |
|||
INSERT INTO statistic (name, count, type) values ('客运车', 0, 'vehicle'); |
|||
INSERT INTO statistic (name, count, type) values ('标线', 0, 'road_manage'); |
|||
INSERT INTO statistic (name, count, type) values ('人行道', 0, 'road_manage'); |
|||
INSERT INTO statistic (name, count, type) values ('标志牌', 0, 'road_manage'); |
|||
INSERT INTO statistic (name, count, type) values ('防护栏', 0, 'road_manage'); |
|||
INSERT INTO statistic (name, count, type) values ('检查井', 0, 'road_manage'); |
|||
INSERT INTO statistic (name, count, type) values ('雨水口', 0, 'road_manage'); |
|||
INSERT INTO statistic (name, count, type) values ('路排名', 0, 'road_manage'); |
|||
INSERT INTO statistic (name, count, type) values ('养护责任牌', 0, 'road_manage'); |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 8.8 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
@ -0,0 +1,28 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
// import Module from '../../../public/module'
|
|||
import Daolu from "./daolu" |
|||
import Handong from "./handong" |
|||
import Qiaoliang from "./qiqoliang" |
|||
|
|||
|
|||
const Leftcentertop = (props) => { |
|||
const style = { height: "23%" } |
|||
const { tabKey } = props |
|||
return ( |
|||
<> |
|||
{ |
|||
(() => { |
|||
switch (tabKey) { |
|||
case 'daolu': |
|||
return <Daolu /> |
|||
case 'handong': |
|||
return <Handong /> |
|||
case "qiaoliang": |
|||
return <Qiaoliang /> |
|||
} |
|||
})() |
|||
} |
|||
</> |
|||
) |
|||
} |
|||
export default Leftcentertop |
|||
@ -1,16 +0,0 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Leftcenter = () => { |
|||
const style = { |
|||
height: "23%" |
|||
} |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Leftcenter |
|||
@ -1,14 +0,0 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
|
|||
const Leftcentertop = () => { |
|||
const style = { height: "23%" } |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "40%", height: "40%", background: "red" }}></div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default Leftcentertop |
|||
@ -0,0 +1,89 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import Lun from "./lunbo/lunbo" |
|||
|
|||
const Right = () => { |
|||
const [beijing, setBeijing] = useState() |
|||
const [list, setList] = useState([{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11121", chaoxian: "30%", penalty: "-6分和扣200元", days: "2022年5月4日" }, |
|||
{ name: "苏LD112512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD1151121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11912121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD16112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L2D111221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "62", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11152121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L1D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD13112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD111612121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD111216221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L63D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD163112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD651112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }]) |
|||
const renderBody = () => { |
|||
return ( |
|||
|
|||
<div style={{ width: "100%", height: "100%" }}> |
|||
{ |
|||
list.map((item, index) => { |
|||
return ( |
|||
<li className={index} style={{ |
|||
height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px" |
|||
}} onMouseEnter={() => { |
|||
setBeijing(index) |
|||
// console.log(beijing);
|
|||
}}> |
|||
{beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "6%" }} /> : ""} |
|||
{beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""} |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", left: "25%" }} >{item.name}</p> |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", right: "25%" }} >{item.name}</p> |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", left: "5%" }} >{item.name}</p> |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", right: "5%" }}>{item.name}</p></li> |
|||
) |
|||
}) |
|||
} |
|||
</div> |
|||
) |
|||
} |
|||
return ( |
|||
<> |
|||
<div style={{ width: "100%", height: "100%", float: "right", marginRight: "1%", position: "relative" }}> |
|||
|
|||
|
|||
<div style={{ height: "70%", width: "100%", position: "relative", left: "5%", top: "45%" }}> |
|||
<div style={{ width: "100%", height: "40px"/* , backgroundColor: "#fff" */, position: "relative" }}> |
|||
{/* <p>{title || []}</p> */} |
|||
<img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "-1%", top: "23%" }} /> |
|||
<span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "3%" }}>离线详情</span> |
|||
{/* <img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "34px", position: "absolute", top: "12px", left: "6%" }} /> */} |
|||
</div> |
|||
<Lun |
|||
canScroll={true} |
|||
content={renderBody()} |
|||
containerStyle={{ position: "absolute", height: "80%", width: "90%" }} |
|||
divHeight={"100%"} |
|||
divId={"screen"} |
|||
/> |
|||
</div> |
|||
|
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
export default Right |
|||
@ -0,0 +1,89 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import Lun from "./lunbo/lunbo" |
|||
|
|||
const Right = () => { |
|||
const [beijing, setBeijing] = useState() |
|||
const [list, setList] = useState([{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11121", chaoxian: "30%", penalty: "-6分和扣200元", days: "2022年5月4日" }, |
|||
{ name: "苏LD112512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD1151121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11912121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD16112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L2D111221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "62", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11152121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L1D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD13112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD111612121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD111216221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L63D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD163112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD651112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }]) |
|||
const renderBody = () => { |
|||
return ( |
|||
|
|||
<div style={{ width: "100%", height: "100%" }}> |
|||
{ |
|||
list.map((item, index) => { |
|||
return ( |
|||
<li className={index} style={{ |
|||
height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px" |
|||
}} onMouseEnter={() => { |
|||
setBeijing(index) |
|||
// console.log(beijing);
|
|||
}}> |
|||
{beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "6%" }} /> : ""} |
|||
{beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""} |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", left: "25%" }} >{item.name}</p> |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", right: "25%" }} >{item.name}</p> |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", left: "5%" }} >{item.name}</p> |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", right: "5%" }}>{item.name}</p></li> |
|||
) |
|||
}) |
|||
} |
|||
</div> |
|||
) |
|||
} |
|||
return ( |
|||
<> |
|||
<div style={{ width: "100%", height: "100%", float: "right", marginRight: "1%", position: "relative" }}> |
|||
|
|||
|
|||
<div style={{ height: "70%", width: "100%", position: "relative", left: "5%", top: "45%" }}> |
|||
<div style={{ width: "100%", height: "40px"/* , backgroundColor: "#fff" */, position: "relative" }}> |
|||
{/* <p>{title || []}</p> */} |
|||
<img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "-1%", top: "23%" }} /> |
|||
<span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "3%" }}>离线详情</span> |
|||
{/* <img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "34px", position: "absolute", top: "12px", left: "6%" }} /> */} |
|||
</div> |
|||
<Lun |
|||
canScroll={true} |
|||
content={renderBody()} |
|||
containerStyle={{ position: "absolute", height: "80%", width: "90%" }} |
|||
divHeight={"100%"} |
|||
divId={"screen"} |
|||
/> |
|||
</div> |
|||
|
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
export default Right |
|||
@ -0,0 +1,89 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import Lun from "./lunbo/lunbo" |
|||
|
|||
const Right = () => { |
|||
const [beijing, setBeijing] = useState() |
|||
const [list, setList] = useState([{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11121", chaoxian: "30%", penalty: "-6分和扣200元", days: "2022年5月4日" }, |
|||
{ name: "苏LD112512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD1151121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11912121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD16112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L2D111221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "62", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11152121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L1D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD11512121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD13112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD111612121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD111216221", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏L63D1112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD163112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD162112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }, |
|||
{ name: "苏LD651112121", chaoxian: "30%", penalty: "-6分", days: "2022年5月4日" }]) |
|||
const renderBody = () => { |
|||
return ( |
|||
|
|||
<div style={{ width: "100%", height: "100%" }}> |
|||
{ |
|||
list.map((item, index) => { |
|||
return ( |
|||
<li className={index} style={{ |
|||
height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px" |
|||
}} onMouseEnter={() => { |
|||
setBeijing(index) |
|||
// console.log(beijing);
|
|||
}}> |
|||
{beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "6%" }} /> : ""} |
|||
{beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""} |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", left: "25%" }} >{item.name}</p> |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", right: "25%" }} >{item.name}</p> |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", left: "5%" }} >{item.name}</p> |
|||
<p style={{ textAlign: "center", width: "25%", position: "absolute", right: "5%" }}>{item.name}</p></li> |
|||
) |
|||
}) |
|||
} |
|||
</div> |
|||
) |
|||
} |
|||
return ( |
|||
<> |
|||
<div style={{ width: "100%", height: "100%", float: "right", marginRight: "1%", position: "relative" }}> |
|||
|
|||
|
|||
<div style={{ height: "70%", width: "100%", position: "relative", left: "5%", top: "45%" }}> |
|||
<div style={{ width: "100%", height: "40px"/* , backgroundColor: "#fff" */, position: "relative" }}> |
|||
{/* <p>{title || []}</p> */} |
|||
<img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "-1%", top: "23%" }} /> |
|||
<span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "3%" }}>离线详情</span> |
|||
{/* <img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "34px", position: "absolute", top: "12px", left: "6%" }} /> */} |
|||
</div> |
|||
<Lun |
|||
canScroll={true} |
|||
content={renderBody()} |
|||
containerStyle={{ position: "absolute", height: "80%", width: "90%" }} |
|||
divHeight={"100%"} |
|||
divId={"screen"} |
|||
/> |
|||
</div> |
|||
|
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
export default Right |
|||
@ -0,0 +1,63 @@ |
|||
import React, { useState, useEFFect } from 'react' |
|||
// import Module from '../../../public/module'
|
|||
|
|||
const Leftcenter = (props) => { |
|||
const { tabChange, tabKey } = props |
|||
// const [tab, setTad] = useState("base")
|
|||
const onClick = (tab) => { |
|||
// setTad({ tab })
|
|||
tabChange(tab) |
|||
} |
|||
return ( |
|||
<> |
|||
<div style={{ position: "relative", width: "100%", height: "30%" }}> |
|||
{/* <div className={tabKey == "build" ? "tabKey-map" : "notabKey"} style={{ backgroundImage: "url(/assets/images/quanju/zuobeijing.png)", backgroundSize: "100% 100%" }} onClick={() => { |
|||
onClick("build") |
|||
}}><a>建设</a></div> */} |
|||
<div style={{ width: "30%", height: "10vh", backgroundColor: "", position: "relative", left: "2%", top: "100%" }} onClick={() => { |
|||
onClick("daolu") |
|||
}} > |
|||
{ |
|||
tabKey == "daolu" ? <img src='/assets/images/leadership/diguang.png' style={{ width: "100%", height: "100%" }} /> : "" |
|||
} |
|||
<div style={{ width: "50%", height: "100%", position: "absolute", left: "17%", top: "23%" }}> |
|||
<img src='/assets/images/leadership/lu.png' style={{ width: "50%" }} /> |
|||
</div> |
|||
<div style={{ width: "50%", height: "100%", position: "absolute", left: "50%", top: "11%" }}> |
|||
<p style={{ fontSize: "2vh", color: "#D8F0FF", fontFamily: "PingFangSC-Regular, PingFang SC", marginTop: "3%" }}>道路统计<span style={{ marginLeft: "10px", color: "rgba(216,240,255,0.8000)" }}>公里</span></p> |
|||
<p style={{ fontFamily: "YouSheBiaoTiHei", color: "#ffffff", fontSize: "2.5vh", marginTop: "-2%" }}>2333.4</p> |
|||
</div> |
|||
</div> |
|||
<div style={{ width: "30%", height: "10vh", backgroundColor: "", position: "relative", left: "35%", top: "-105%" }} onClick={() => { |
|||
onClick("handong") |
|||
}} > |
|||
{ |
|||
tabKey == "handong" ? <img src='/assets/images/leadership/diguang.png' style={{ width: "100%", height: "100%" }} /> : "" |
|||
} |
|||
<div style={{ width: "50%", height: "100%", position: "absolute", left: "17%", top: "10%" }}> |
|||
<img src='/assets/images/leadership/handong.png' style={{ width: "50%" }} /> |
|||
</div> |
|||
<div style={{ width: "50%", height: "100%", position: "absolute", left: "50%", top: "8%" }}> |
|||
<p style={{ fontSize: "2vh", color: "#D8F0FF", fontFamily: "PingFangSC-Regular, PingFang SC", marginTop: "3%" }}>涵洞统计<span style={{ fontSize: "14px", marginLeft: "10px", color: "rgba(216,240,255,0.8000)" }}>个</span></p> |
|||
<p style={{ fontFamily: "YouSheBiaoTiHei", color: "#ffffff", fontSize: "2.5vh" }}>2333.4</p> |
|||
</div> |
|||
</div> |
|||
<div style={{ width: "30%", height: "10vh", backgroundColor: "", position: "relative", left: "68%", top: "-315%" }} onClick={() => { |
|||
onClick("qiaoliang") |
|||
}} > |
|||
{ |
|||
tabKey == "qiaoliang" ? <img src='/assets/images/leadership/diguang.png' style={{ width: "100%", height: "100%" }} /> : "" |
|||
} |
|||
<div style={{ width: "50%", height: "100%", position: "absolute", left: "17%", top: "10%" }}> |
|||
<img src='/assets/images/leadership/qiao.png' style={{ width: "50%" }} /> |
|||
</div> |
|||
<div style={{ width: "50%", height: "100%", position: "absolute", left: "50%", top: "8%" }}> |
|||
<p style={{ fontSize: "2vh", color: "#D8F0FF", fontFamily: "PingFangSC-Regular, PingFang SC", marginTop: "3%" }}>桥梁统计<span style={{ fontSize: "14px", marginLeft: "10px", color: "rgba(216,240,255,0.8000)" }}>座</span></p> |
|||
<p style={{ fontFamily: "YouSheBiaoTiHei", color: "#ffffff", fontSize: "2.5vh", marginTop: "-2%" }}>2333.4</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
export default Leftcenter |
|||
@ -0,0 +1,218 @@ |
|||
import React, { useEffect, useRef } from 'react' |
|||
import * as echarts from 'echarts'; |
|||
|
|||
const Lefttopecharts = () => { |
|||
const chartRef = useRef(null); |
|||
useEffect(() => { |
|||
var chartInstance = echarts.init(chartRef.current); |
|||
var dataArr = 50; |
|||
var names = names() |
|||
var colorSet = colors(); |
|||
function names() { |
|||
if (dataArr >= 0 && dataArr < 30) { |
|||
return ("畅通"); |
|||
} else if (dataArr >= 30 && dataArr < 50) { |
|||
return ("缓行"); |
|||
} else if (dataArr >= 50 && dataArr < 70) { |
|||
return ("拥堵"); |
|||
} else if (dataArr >= 70 && dataArr <= 100) { |
|||
return ("严重拥堵"); |
|||
} |
|||
} |
|||
function colors() { |
|||
if (dataArr >= 0 && dataArr < 30) { |
|||
return (colorSet = { color: "#33B000" }); |
|||
} else if (dataArr >= 30 && dataArr < 50) { |
|||
return (colorSet = { color: "#FECB00" }); |
|||
} else if (dataArr >= 50 && dataArr < 70) { |
|||
return (colorSet = { color: "#DF0001" }); |
|||
} else if (dataArr >= 70 && dataArr <= 100) { |
|||
return (colorSet = { color: "#8E0E0B" }); |
|||
} |
|||
} |
|||
var option = { |
|||
// backgroundColor: "#0E1327",
|
|||
tooltip: { |
|||
formatter: "{a} <br/>{b} : {c}%", |
|||
}, |
|||
|
|||
series: [ |
|||
{ |
|||
name: names, |
|||
type: "gauge", |
|||
// center: ['20%', '50%'],
|
|||
radius: "60%", |
|||
|
|||
splitNumber: 10, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: [ |
|||
[dataArr / 100, colorSet.color], |
|||
[1, "#111F42"], |
|||
], |
|||
width: 3, |
|||
}, |
|||
}, |
|||
axisLabel: { |
|||
show: false, |
|||
}, |
|||
// axisTick: {
|
|||
// show: false,
|
|||
// },
|
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
// itemStyle: {
|
|||
// show: false,
|
|||
// },
|
|||
detail: { |
|||
formatter: function (value) { |
|||
if (value !== 0) { |
|||
var num = Math.round(value); |
|||
return ( |
|||
parseInt(num).toFixed(0) + |
|||
"%" + |
|||
"\n" + |
|||
"\n" + |
|||
"\n" + |
|||
"\n" + |
|||
"\n" |
|||
|
|||
); |
|||
} else { |
|||
return 0; |
|||
} |
|||
}, |
|||
offsetCenter: [0, 82], |
|||
textStyle: { |
|||
padding: [0, 0, 0, 0], |
|||
fontSize: 18, |
|||
fontWeight: "700", |
|||
color: "#FFFFFF", |
|||
// zlevel: 3,
|
|||
}, |
|||
}, |
|||
title: { |
|||
//标题
|
|||
show: true, |
|||
offsetCenter: [0, 46], // x, y，单位px
|
|||
textStyle: { |
|||
color: "#fff", |
|||
fontSize: 14, //表盘上的标题文字大小
|
|||
fontWeight: 400, |
|||
fontFamily: "PingFangSC", |
|||
}, |
|||
}, |
|||
data: [ |
|||
|
|||
{ |
|||
name: "拥堵指数", |
|||
value: dataArr, |
|||
itemStyle: colorSet |
|||
}, |
|||
], |
|||
pointer: { |
|||
show: true, |
|||
length: "75%", |
|||
radius: "20%", |
|||
width: 4, //指针粗细
|
|||
}, |
|||
animationDuration: 4000, |
|||
}, |
|||
{ |
|||
name: "外部刻度", |
|||
type: "gauge", |
|||
// center: ['20%', '50%'],
|
|||
radius: "90%", |
|||
// min: 0, //最小刻度
|
|||
// max: 100, //最大刻度
|
|||
// splitNumber: 10, //刻度数量
|
|||
startAngle: 225, |
|||
endAngle: -45, |
|||
axisLine: { |
|||
show: false, |
|||
}, //仪表盘轴线
|
|||
axisLabel: { |
|||
show: true, |
|||
color: "#FFFFFF", |
|||
distance: 20, |
|||
formatter: function (v) { |
|||
switch (v + "") { |
|||
case "0": |
|||
return "0"; |
|||
case "20": |
|||
return "20"; |
|||
case "40": |
|||
return "40"; |
|||
case "60": |
|||
return "60"; |
|||
case "80": |
|||
return "80"; |
|||
case "100": |
|||
return "100"; |
|||
} |
|||
}, |
|||
}, //刻度标签。
|
|||
axisTick: { |
|||
show: false, |
|||
splitNumber: 7, |
|||
lineStyle: { |
|||
color: colorSet.color, //用颜色渐变函数不起作用
|
|||
width: 1, |
|||
}, |
|||
length: -8, |
|||
}, //刻度样式
|
|||
splitLine: { |
|||
show: false, |
|||
length: -20, |
|||
lineStyle: { |
|||
color: colorSet.color, //用颜色渐变函数不起作用
|
|||
}, |
|||
}, //分隔线样式
|
|||
detail: { |
|||
show: false, |
|||
}, |
|||
pointer: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
chartInstance.setOption(option); |
|||
window.addEventListener('resize', function () { |
|||
chartInstance.resize(); |
|||
}) |
|||
}, []); |
|||
|
|||
|
|||
return ( |
|||
<> |
|||
<div ref={chartRef} style={{ |
|||
height: "20vh", width: "100%" |
|||
}}></div> |
|||
<div style={{ position: "relative", top: "-29%", left: "42.5%", color: "rgba(216,240,255,0.8000)", fontSize: "12px" }}>Km/h</div> |
|||
<div style={{ position: "relative", top: "-49%", left: "43%", color: "rgba(216,240,255,0.8000)", fontSize: "12px" }}>当前</div> |
|||
{/* <div style={{ width: "10%", height: "5%", position: "relative", top: "-32%", left: "42.5%", backgroundColor: "#002D96" }}></div> */} |
|||
<div style={{ width: "100%", height: "20vh", marginTop: "-29%" }}> |
|||
<div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "3%" }}> |
|||
<p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#33B000", left: "-50%", top: "20%" }}></p>畅通</p> |
|||
<p style={{ position: "absolute", left: "60%" }}>0-30</p> |
|||
</div> |
|||
<div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "11%" }}> |
|||
<p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#FECB00", left: "-50%", top: "20%" }}></p>缓慢</p> |
|||
<p style={{ position: "absolute", left: "60%" }}>30-50</p> |
|||
</div> |
|||
<div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "19%" }}> |
|||
<p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#DF0001", left: "-50%", top: "20%" }}></p>拥堵</p> |
|||
<p style={{ position: "absolute", left: "60%" }}>50-70</p> |
|||
</div> |
|||
<div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "27%" }}> |
|||
<p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#8E0E0B", left: "-25%", top: "20%" }}></p>严重拥堵</p> |
|||
<p style={{ position: "absolute", left: "60%" }}>70-100</p> |
|||
</div> |
|||
</div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default Lefttopecharts |
|||
@ -0,0 +1,145 @@ |
|||
import React, { Component } from 'react'; |
|||
import './left.less'; |
|||
class ReactCarousel extends Component { |
|||
chunk(arr, size) { |
|||
var arr1 = new Array(); |
|||
for (var i = 0; i < Math.ceil(arr.length / size); i++) { |
|||
arr1[i] = new Array(); |
|||
} |
|||
var j = 0; |
|||
var x = 0; |
|||
for (var i = 0; i < arr.length; i++) { |
|||
if (!((i % size == 0) && (i != 0))) { |
|||
arr1[j][x] = arr[i]; |
|||
x++; |
|||
// console.log("j=" + j + " " + "x=" + x);
|
|||
} else { |
|||
j++; |
|||
x = 0; |
|||
console.log("else:" + "j=" + j + " " + "x=" + x); |
|||
arr1[j][x] = arr[i]; |
|||
// console.log(arr1);
|
|||
x++; |
|||
} |
|||
} |
|||
return arr1; |
|||
} |
|||
|
|||
constructor() { |
|||
super(); |
|||
this.state = { |
|||
shuzu: [{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段2", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段3", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段4", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }], |
|||
imgs: [], |
|||
showIndex: 0, //显示第几个图片
|
|||
timer: null, // 定时器
|
|||
show: false // 前后按钮显示
|
|||
} |
|||
this.setState({ |
|||
imgs: this.chunk((this.state.shuzu), 4) |
|||
}) |
|||
console.log(this.chunk((this.state.shuzu), 4)); |
|||
} |
|||
|
|||
render() { |
|||
return ( |
|||
<div className="ReactCarousel" style={{ width: "100%", height: "100%" }}> |
|||
<div className="contain" |
|||
onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放
|
|||
onMouseLeave={() => { this.start() }} //鼠标退出自动播放
|
|||
> |
|||
<ul className="ul"> |
|||
{ |
|||
this.state.imgs.map((value, index) => { |
|||
return ( |
|||
<li className={index === this.state.showIndex ? 'show' : ''} |
|||
key={index} |
|||
> |
|||
<div>{value[0].name}</div> |
|||
<div>{value[1].name}</div> |
|||
<div>{value[2].name}</div> |
|||
<div>{value[3].name}</div> |
|||
</li> |
|||
) |
|||
}) |
|||
} |
|||
</ul> |
|||
{/* <ul className="dots" style={{ width: this.state.imgs.length * 20 + 'px' }}> |
|||
{ |
|||
this.state.imgs.map((value, index) => { |
|||
return ( |
|||
<li key={index} |
|||
className={index === this.state.showIndex ? 'active' : ''} |
|||
onClick={() => { this.change(index) }}> |
|||
</li>) |
|||
}) |
|||
} |
|||
|
|||
</ul> */} |
|||
<div className="control" style={{ width: "100%", height: "10%", backgroundColor: "red" }}> |
|||
<span className="left" onClick={(e) => { this.previous(e) }}>左</span> |
|||
<span className="right" onClick={(e) => { this.next(e) }}>右</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
componentDidMount() { //一开始自动播放
|
|||
this.start(); |
|||
} |
|||
componentWillUnmount() { //销毁前清除定时器
|
|||
this.stop(); |
|||
} |
|||
stop = () => { //暂停
|
|||
let { timer } = this.state; |
|||
clearInterval(timer); |
|||
} |
|||
start = () => { //开始
|
|||
let { timer } = this.state; |
|||
timer = setInterval(() => { |
|||
this.next(); |
|||
}, 2000); |
|||
this.setState({ |
|||
timer |
|||
}) |
|||
} |
|||
change = (index) => { //点击下面的按钮切换当前显示的图片
|
|||
let { showIndex } = this.state; |
|||
showIndex = index; |
|||
this.setState({ |
|||
showIndex |
|||
}) |
|||
} |
|||
previous = (e) => { //上一张
|
|||
let ev = e || window.event; |
|||
let { showIndex, imgs } = this.state; |
|||
if (showIndex <= 0) { |
|||
showIndex = imgs.length - 1; |
|||
} else { |
|||
showIndex--; |
|||
} |
|||
this.setState({ |
|||
showIndex |
|||
}) |
|||
} |
|||
next = (e) => { //下一张
|
|||
let ev = e || window.event; |
|||
let { showIndex, imgs } = this.state; |
|||
if (showIndex >= imgs.length - 1) { |
|||
showIndex = 0; |
|||
} else { |
|||
showIndex++; |
|||
} |
|||
this.setState({ |
|||
showIndex |
|||
}) |
|||
} |
|||
} |
|||
export default ReactCarousel; |
|||
@ -1,3 +1,95 @@ |
|||
li{ |
|||
list-style-type:none |
|||
} |
|||
|
|||
.ant-select-selector, .ant-select-selection-placeholder{ |
|||
background-color:#011f59 !important; |
|||
border:#1E7BD6 1px solid !important; |
|||
font-family: PingFangSC-Regular, PingFang SC !important; |
|||
height: 25px !important; |
|||
// line-height: 25px !important; |
|||
} |
|||
.ant-select-selection-item{ |
|||
line-height: 25px !important; |
|||
} |
|||
.anticon{ |
|||
color: #fff !important; |
|||
} |
|||
.contain { |
|||
position: relative; |
|||
top: 5%; |
|||
left: 45%; |
|||
width: 100%; |
|||
height: 100%; |
|||
transition: all 2s; |
|||
transform: translateX(-50%); |
|||
color: #fff; |
|||
overflow: hidden; |
|||
cursor: pointer; |
|||
} |
|||
.contain .ul { |
|||
height: 100%; |
|||
list-style: none; |
|||
} |
|||
.contain .ul .items { |
|||
position: absolute; |
|||
top: 0px; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.ul li.show{ |
|||
display: block; |
|||
} |
|||
.ul li { |
|||
display: none; |
|||
} |
|||
.ul li img { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
.contain .dots { |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 30px; |
|||
height: 10px; |
|||
transform: translateX(-50%); |
|||
} |
|||
.dots li { |
|||
float: left; |
|||
width: 10px; |
|||
height: 10px; |
|||
margin: 0px 5px; |
|||
border-radius: 50%; |
|||
transition: all .3s; |
|||
// background-color: antiquewhite; |
|||
list-style: none; |
|||
} |
|||
// .dots li.active { |
|||
// background-color: blue; |
|||
// } |
|||
.control .left { |
|||
position: absolute; |
|||
top: 80%; |
|||
left: 85%; |
|||
// padding: 5px; |
|||
// transform: translateY(-50%); |
|||
width: 20px; |
|||
height: 50px; |
|||
font-size: 20px; |
|||
cursor: pointer; |
|||
} |
|||
// .control .left:hover { |
|||
// background-color: #000000, |
|||
// } |
|||
.control .right { |
|||
position: absolute; |
|||
top: 80%; |
|||
right: 3%; |
|||
// padding: 5px; |
|||
// transform: translateY(-50%); |
|||
font-size: 20px; |
|||
cursor: pointer; |
|||
} |
|||
// .control .right:hover { |
|||
// background-color: rgba(0, 0, 0, .3); |
|||
// } |
|||
@ -0,0 +1,9 @@ |
|||
import React from 'react' |
|||
|
|||
function lunbo() { |
|||
return ( |
|||
<div>lunbo copy</div> |
|||
) |
|||
} |
|||
|
|||
export default lunbo |
|||
Loading…
Reference in new issue