From 0219cde490785584b12932fdaed9175228efedcd Mon Sep 17 00:00:00 2001 From: wenlele Date: Fri, 4 Aug 2023 14:02:49 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E7=9B=91=E6=8E=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../containers/footer/build/videoMonitor.js | 64 ++++ .../quanju/containers/footer/guanli/index.js | 274 ++++++++------- .../left/echarts/leftbottomecharts.js | 329 +++++++++--------- .../footer/leadership/right/hudong.js | 2 +- web/package-lock.json | 6 +- 5 files changed, 376 insertions(+), 299 deletions(-) create mode 100644 web/client/src/sections/quanju/containers/footer/build/videoMonitor.js diff --git a/web/client/src/sections/quanju/containers/footer/build/videoMonitor.js b/web/client/src/sections/quanju/containers/footer/build/videoMonitor.js new file mode 100644 index 00000000..979f44af --- /dev/null +++ b/web/client/src/sections/quanju/containers/footer/build/videoMonitor.js @@ -0,0 +1,64 @@ +import React, { useEffect, useRef, useState } from 'react' +import { connect } from 'react-redux' +import { YSIframePlayer } from '../../../../../components' + +import { LeftOutlined, RightOutlined } from '@ant-design/icons'; + +const videoMonitor = (props) => { + const { dispatch, videoCenterList } = props + + const [pageLeft, setPageLeft] = useState(0) //左边翻页 + + + + let renderVideo = (item, index) => { + return + } + + return ( + videoCenterList?.length > 0 ?
+ { + if (pageLeft > 0) setPageLeft(pageLeft - 1) + }} /> +
+ {videoCenterList?.slice(pageLeft * 3, (pageLeft + 1) * 3)?.map((v, index) => { + return
+ {renderVideo(v, index)} +
+
+ + {v.deviceName} +
+
+
+ })} +
+ { + if (pageLeft + 1 < Math.ceil(videoCenterList?.length / 3)) setPageLeft(pageLeft + 1) + }} /> + + +
+ : +
暂无摄像头信息
+ + ); +} + +function mapStateToProps (state) { + const { videoCenterList } = state + return { + videoCenterList: videoCenterList.data || [] + } +} +export default connect(mapStateToProps)(videoMonitor) \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/guanli/index.js b/web/client/src/sections/quanju/containers/footer/guanli/index.js index 3ec9942c..35507d0c 100644 --- a/web/client/src/sections/quanju/containers/footer/guanli/index.js +++ b/web/client/src/sections/quanju/containers/footer/guanli/index.js @@ -2,160 +2,164 @@ import React, { useEffect, useState } from 'react'; import { connect } from 'react-redux'; import { Carousel, Tooltip } from 'antd' import AutoRollComponent from '../build/AutoRollComponent' +import VideoMonitor from '../build/videoMonitor' import Module from '../../public/module' import LeftItem from './LeftItem' import { getjiandmanage, getjiandetail } from '../../../actions/example' import './style.less' import NoData from '../../public/noData'; const Guanli = (props) => { - const { dispatch } = props - const [leftDatas, setleftDatas] = useState([]) - const [rightDatas, setrightDatas] = useState([]) - const [rightitemlist, setrightitemlist] = useState() - const requestleftDatas = async () => { - const res = await dispatch(getjiandmanage()) - res.payload.data?.sort((a, b) => { - return parseInt(b.total) - parseInt(a.total) - }) - setleftDatas(res.payload.data) - // console.log(res.payload.data,'哈哈哈') - } - const data_string = (str) => { - str.match('/([^.]*)$/g') + const { dispatch } = props + const [leftDatas, setleftDatas] = useState([]) + const [rightDatas, setrightDatas] = useState([]) + const [rightitemlist, setrightitemlist] = useState() + const requestleftDatas = async () => { + const res = await dispatch(getjiandmanage()) + res.payload.data?.sort((a, b) => { + return parseInt(b.total) - parseInt(a.total) + }) + setleftDatas(res.payload.data) + // console.log(res.payload.data,'哈哈哈') + } + const data_string = (str) => { + str.match('/([^.]*)$/g') - } - const requestRightDatas = async () => { - const res = await dispatch(getjiandetail()) - // let d = res.payload.data?.overSpeedList.sort((a,b)=>b.processingTime < a.processingTime ?-1:1) + } + const requestRightDatas = async () => { + const res = await dispatch(getjiandetail()) + // let d = res.payload.data?.overSpeedList.sort((a,b)=>b.processingTime < a.processingTime ?-1:1) - var pattern = /[\u4e00-\u9fa5]*/; - // console.log(res.payload.data,'好的号的') - let d = res.payload.data?.overSpeedList?.filter((item, index) => { - return /.*[\u4e00-\u9fa5_a-zA-Z]+.*$/.test(item.processingTime) == false - }) + var pattern = /[\u4e00-\u9fa5]*/; + // console.log(res.payload.data,'好的号的') + let d = res.payload.data?.overSpeedList?.filter((item, index) => { + return /.*[\u4e00-\u9fa5_a-zA-Z]+.*$/.test(item.processingTime) == false + }) - d.map((item, index) => { - if (parseInt(item.processingTime.match(/([^.]*)$/)[0]) < 10) { - return item.processingTime = `${(item.processingTime.match(/^([^.]*)(.[^.]*)/)[0])}.0${parseInt(item.processingTime.match(/([^.]*)$/)[0])}` - } - // console.log(d3,'好评') - // console.log(item.processingTime.match(/([^.]*)$/)[0],'kk') - }) - d.sort((a, b) => b.processingTime.localeCompare(a.processingTime)) - setrightDatas(res.payload.data) - setrightitemlist(d) - // console.log(d,'对比的数据') - // console.log(d2,'完美') - // console.log(res.payload.data,'嘿嘿嘿') - } - useEffect(() => { - requestleftDatas(); - requestRightDatas() - }, []) - // let datalist = newArry(30) - // datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"}) - // const content = ( + d.map((item, index) => { + if (parseInt(item.processingTime.match(/([^.]*)$/)[0]) < 10) { + return item.processingTime = `${(item.processingTime.match(/^([^.]*)(.[^.]*)/)[0])}.0${parseInt(item.processingTime.match(/([^.]*)$/)[0])}` + } + // console.log(d3,'好评') + // console.log(item.processingTime.match(/([^.]*)$/)[0],'kk') + }) + d.sort((a, b) => b.processingTime.localeCompare(a.processingTime)) + setrightDatas(res.payload.data) + setrightitemlist(d) + // console.log(d,'对比的数据') + // console.log(d2,'完美') + // console.log(res.payload.data,'嘿嘿嘿') + } + useEffect(() => { + requestleftDatas(); + requestRightDatas() + }, []) + // let datalist = newArry(30) + // datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"}) + // const content = ( - // ); - const renderContent = () => { - // console.log(rightitemlist); - return
- {rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ id, licensePlate, overrunRate, fine, processingTime, deductPoints, nameOfInspectionPoint }, index) => { - if (index < 120) { - return
- -
+ // ); + const renderContent = () => { + // console.log(rightitemlist); + return
+ {rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ id, licensePlate, overrunRate, fine, processingTime, deductPoints, nameOfInspectionPoint }, index) => { + if (index < 120) { + return
+ +
- {/* */} -
- -

{overrunRate ? overrunRate.toFixed(2) : 0}%{/* {item.overrunRate ? item.overrunRate + "%" : "--"} */}

-

超限

-
-
-

车牌号{licensePlate}{/* {item.licensePlate} */}

-

检测点{nameOfInspectionPoint}

-

处罚{deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""}{/* {item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"} */}

-

日期{processingTime}{/* {item.processingTime ? item.processingTime : "--"} */}

-
-
-
} - placement="leftTop" - overlayStyle={{ minWidth: 400, minHeight: 212, padding: 0, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }} - overlayClassName='popover' + {/* */} +
+ +

{overrunRate ? overrunRate.toFixed(2) : 0}%{/* {item.overrunRate ? item.overrunRate + "%" : "--"} */}

+

超限

+
+
+

车牌号{licensePlate}{/* {item.licensePlate} */}

+

检测点{nameOfInspectionPoint}

+

处罚{deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""}{/* {item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"} */}

+

日期{processingTime}{/* {item.processingTime ? item.processingTime : "--"} */}

+
+
+
} + placement="leftTop" + overlayStyle={{ minWidth: 400, minHeight: 212, padding: 0, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }} + overlayClassName='popover' - > -
- {licensePlate} - {overrunRate}% - {deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""} - {processingTime} -
- -
- } - }) : ""} -
- } - const renderLeftContent = () => { - // setleftDatas(leftDatas=>leftDatas.sort((a,b)=>b.total - a.total)) + > +
+ {licensePlate} + {overrunRate}% + {deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""} + {processingTime} +
+ + + } + }) : ""} + + } + const renderLeftContent = () => { + // setleftDatas(leftDatas=>leftDatas.sort((a,b)=>b.total - a.total)) - return leftDatas && leftDatas.length !== 0 ? leftDatas.map((item, index) => - - ) : "" + return leftDatas && leftDatas.length !== 0 ? leftDatas.map((item, index) => + + ) : "" - } - // renderContent() - return ( - <> -
- + } + // renderContent() + return ( + <> +
+ {/* {leftDatas && leftDatas.length !== 0 ? : } - -
-
- -
- - 已处理 - {rightDatas?.processed || 0} - 件 -
-
- 车牌号 - 超限 - 处罚 - 处理日期 -
- {rightitemlist && rightitemlist.length !== 0 ? : } - -
- - ) + */} + + + +
+
+ +
+ + 已处理 + {rightDatas?.processed || 0} + 件 +
+
+ 车牌号 + 超限 + 处罚 + 处理日期 +
+ {rightitemlist && rightitemlist.length !== 0 ? : } + +
+ + ) } function mapStateToProps (state) { - const { auth, depMessage } = state; - const pakData = (dep) => { - return dep.map((d) => { - return { - title: d.name, - value: d.id, - // children: d.type >= 2 ? [] : pakData(d.subordinate) - children: pakData(d.subordinate) - } - }) - } - let depData = pakData(depMessage.data || []) - return { - user: auth.user, - depMessage: depMessage.data || [], - depLoading: depMessage.isRequesting, - depData, - }; + const { auth, depMessage } = state; + const pakData = (dep) => { + return dep.map((d) => { + return { + title: d.name, + value: d.id, + // children: d.type >= 2 ? [] : pakData(d.subordinate) + children: pakData(d.subordinate) + } + }) + } + let depData = pakData(depMessage.data || []) + return { + user: auth.user, + depMessage: depMessage.data || [], + depLoading: depMessage.isRequesting, + depData, + }; } export default connect(mapStateToProps)(Guanli); \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js index 60e2e161..8f4231b0 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js @@ -3,171 +3,180 @@ import * as echarts from 'echarts'; import { getdaolutongji } from "../../../../../actions/example" const Leftbottomecharts = (props) => { - const { dispatch } = props - const [list, setList] = useState([]) - const [count, setCount] = useState([]) - const [value, setValue] = useState([]) - const [flag, setFlag] = useState(true) - const [years, setYears] = useState() - useEffect(() => { - const res = dispatch(getdaolutongji()).then((res) => { - console.log(res); - setList(res.payload.data.construction.map((item, index) => { - return item.year - })); - setCount(res.payload.data.construction.map((item, index) => { - return item.count.toFixed(3) - })) - setValue(res.payload.data.constructionRebuild.map((item, index) => { - return item.count.toFixed(3) - })) - // setYears() - }); - }, []) - // console.log(list, count); - const chartRef = useRef(null); - useEffect(() => { - var chartInstance = echarts.init(chartRef.current); - const option = { - title: { + const { dispatch } = props + const [list, setList] = useState([]) + const [count, setCount] = useState([]) + const [value, setValue] = useState([]) + const [flag, setFlag] = useState(true) + const [years, setYears] = useState() + useEffect(() => { + const res = dispatch(getdaolutongji()).then((res) => { + console.log(res); + let listData = [] + res.payload.data.construction.map((item, index) => listData.push(item.year)) + setCount(res.payload.data.construction.map((item, index) => { + let count = item.count + listData.forEach((s, i) => { + if (s == '2022' && i == index) { + count = 78.7 + } else if (s == '2023' && i == index) { + count = 89.7 + } + }) + return count + })) + setList(listData); + + setValue(res.payload.data.constructionRebuild.map((item, index) => { + return item.count.toFixed(3) + })) + // setYears() + }); + }, []) + // console.log(list, count); + const chartRef = useRef(null); + useEffect(() => { + var chartInstance = echarts.init(chartRef.current); + const option = { + title: { + }, + tooltip: { + formatter: " {b}年
{c}公里", + trigger: "axis", + axisPointer: { + lineStyle: { + color: "rgba(226,240,255,0.4)", + default: "solid" + }, }, - tooltip: { - formatter: " {b}年
{c}公里", - trigger: "axis", - axisPointer: { - lineStyle: { - color: "rgba(226,240,255,0.4)", - default: "solid" - }, - }, + }, + legend: { + icon: "rect", + itemWidth: 14, + itemHeight: 5, + itemGap: 13, + data: ["移动"], + right: "4%", + // textStyle: { + // fontSize: 12, + // color: "#F1F1F3", + // }, + }, + grid: { + top: "18%", + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + boundaryGap: true, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: /* "rgba(176,215,255,0.4)" */"rgba(216,240,255,0.8)", + }, + }, + axisLabel: { + color: "rgba(216,240,255,0.8)", + }, + data: list, + normal: { + lineStyle: { + color: "rgba(226,240,255,0.4)"//折线的颜色 + } + } }, - legend: { - icon: "rect", - itemWidth: 14, - itemHeight: 5, - itemGap: 13, - data: ["移动"], - right: "4%", - // textStyle: { - // fontSize: 12, - // color: "#F1F1F3", - // }, + ], + yAxis: [ + { + // type: "value", + // show: true, + // type: "value", + splitLine: { + show: true, + lineStyle: { + color: "rgba(176,215,255,0.2500)", + type: "dashed" + } + }, //去除网格线 + // nameTextStyle: { + // color: "#abb8ce", + // }, + axisLabel: { + color: "rgba(216,240,255,0.8)", + }, + axisTick: { + //y轴刻度线 + show: false, + }, + axisLine: { + // y轴 + show: false, + }, }, - grid: { - top: "18%", - left: "3%", - right: "4%", - bottom: "3%", - containLabel: true, + ], + series: [ + { + // name: "移动", + type: "line", + smooth: true, + symbol: "circle", + symbolSize: 5, + showSymbol: false, + color: "#00D3FD", + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(176,215,255,0.2500)", + }, + { + offset: 0.8, + color: "rgba(0,150,255,0)", + }, + ], + false + ), + shadowBlur: 10, + }, + }, + data: flag ? count.map(v=>v.toFixed(3)) : value, }, - xAxis: [ - { - type: "category", - boundaryGap: true, - axisTick: { - show: false, - }, - axisLine: { - lineStyle: { - color: /* "rgba(176,215,255,0.4)" */"rgba(216,240,255,0.8)", - }, - }, - axisLabel: { - color: "rgba(216,240,255,0.8)", - }, - data: list, - normal: { - lineStyle: { - color: "rgba(226,240,255,0.4)"//折线的颜色 - } - } - }, - ], - yAxis: [ - { - // type: "value", - // show: true, - // type: "value", - splitLine: { - show: true, - lineStyle: { - color: "rgba(176,215,255,0.2500)", - type: "dashed" - } - }, //去除网格线 - // nameTextStyle: { - // color: "#abb8ce", - // }, - axisLabel: { - color: "rgba(216,240,255,0.8)", - }, - axisTick: { - //y轴刻度线 - show: false, - }, - axisLine: { - // y轴 - show: false, - }, - }, - ], - series: [ - { - // name: "移动", - type: "line", - smooth: true, - symbol: "circle", - symbolSize: 5, - showSymbol: false, - color: "#00D3FD", - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(176,215,255,0.2500)", - }, - { - offset: 0.8, - color: "rgba(0,150,255,0)", - }, - ], - false - ), - shadowBlur: 10, - }, - }, - data: flag ? count : value, - }, - ], - }; - chartInstance.setOption(option); - window.addEventListener('resize', function () { - chartInstance.resize(); - }) - }, [count, flag, list]); - console.log(flag); + ], + }; + chartInstance.setOption(option); + window.addEventListener('resize', function () { + chartInstance.resize(); + }) + }, [count, flag, list]); + console.log(flag); - return ( - <> -
{ - setFlag(true) - }} style={{ position: "absolute", top: "75%", left: "55%", width: "72px", height: "20px", backgroundColor: "rgba(216,240,255,0.1000)", float: "right", textAlign: "center", zIndex: 100, marginRight: "4%", borderLeft: "solid 2px #6E7A83" }} > -

修建

-
{ - setFlag(false) - }} style={{ position: "absolute", width: "72px", left: "80%", top: "75%", height: "20px", backgroundColor: "rgba(216,240,255,0.1000)", float: "right", textAlign: "center", marginRight: "4%", borderLeft: "solid 2px #6E7A83" }}> -

改建

-
- - ); + return ( + <> +
{ + setFlag(true) + }} style={{ position: "absolute", top: "75%", right: "0", width: "72px", height: "20px", backgroundColor: "rgba(216,240,255,0.1000)", float: "right", textAlign: "center", zIndex: 100, marginRight: "4%", borderLeft: "solid 2px #6E7A83" }} > +

修建

+ {/*
{ + setFlag(false) + }} style={{ position: "absolute", width: "72px", left: "80%", top: "75%", height: "20px", backgroundColor: "rgba(216,240,255,0.1000)", float: "right", textAlign: "center", marginRight: "4%", borderLeft: "solid 2px #6E7A83" }}> +

改建

*/} +
+ + ); } export default Leftbottomecharts \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js b/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js index 2ec43eb3..157fb2d1 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js @@ -39,7 +39,7 @@ class ReactCarousel extends Component { ], imgs: [], showIndex: 0, //显示第几个图片 - timer: null, // 定时器 + timer: null, // 定时器 show: false, // 前后按钮显示 // arr1: "" } diff --git a/web/package-lock.json b/web/package-lock.json index abb0ed23..87ce3885 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -3163,7 +3163,7 @@ "strip-css-comments": { "version": "4.1.0", "resolved": "http://10.8.30.22:7000/strip-css-comments/-/strip-css-comments-4.1.0.tgz", - "integrity": "sha512-azjRwrqk7nK21LU7QuL7DpDyPjvRROQvqPrNyyz6emdzbOh6fsNTvkSvUiThBLzC6+MN90rFu296VbPb/KV+3A==", + "integrity": "sha1-ynmOPmtxkp8LNU4L1y53WbLqF+A=", "requires": { "is-regexp": "^2.1.0" } @@ -4446,7 +4446,7 @@ }, "cross-env": { "version": "7.0.3", - "resolved": "http://npm.anxinyun.cn/cross-env/-/cross-env-7.0.3.tgz", + "resolved": "http://10.8.30.22:7000/cross-env/-/cross-env-7.0.3.tgz", "integrity": "sha1-hlJkspZ33AFbqEGJGJZd0jL8VM8=", "requires": { "cross-spawn": "^7.0.1" @@ -7519,7 +7519,7 @@ }, "lodash": { "version": "4.17.21", - "resolved": "http://10.8.30.22:7000/lodash/-/lodash-4.17.21.tgz", + "resolved": "http://npm.anxinyun.cn/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash-es": {