From 9851ae4cd89e5ac997d659594cf974be71576c0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98lijianhao=E2=80=99?= Date: Mon, 25 Jul 2022 19:31:42 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E5=9B=BE=E8=A1=A8=E8=B0=83=E6=95=B4?= =?UTF-8?q?=EF=BC=8C=E6=95=B0=E6=8D=AE=E6=8E=A5=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../footer/conserve/chart/pie-chart.js | 76 +++++++++++++++++-- .../footer/conserve/left/left-bottom.js | 19 ++++- .../footer/conserve/right/right-center.js | 10 +-- .../footer/conserve/right/right-top.js | 12 +-- 4 files changed, 95 insertions(+), 22 deletions(-) diff --git a/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js b/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js index f3f26f3e..2f3348a7 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js @@ -5,7 +5,6 @@ import * as echarts from 'echarts'; const PieChart = (props) => { const { width, height, data, colorList, underColorList, total, text } = props - const chartRef = useRef(null); let name = [], emptyName = [] // const name = data?.map(d) @@ -26,13 +25,34 @@ const PieChart = (props) => { orient: "vertical", itemWidth: 10, itemHeight: 10, - right: '30%', + // right: '30%', + left: '50%', top: 'center', align: 'left', data: name, - textStyle: { - color: "#fff", + formatter: (name) => { + for (let i = 0; i < option.series[1].data.length; i += 1) { + if (name === option.series[1].data[i].name) { + let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`] + return arr.join('\t'); + } + } }, + textStyle: { + rich: { + a: { + color: '#E9F7FF', + fontSize: 14, + padding:[0,10] + }, + b: { + fontSize: 16, + fontFamily: 'YouSheBiaoTiHei', + color: '#fff', + padding:[0,0,0,15] + }, + } + } }, grid: { left: '10%' @@ -58,13 +78,55 @@ const PieChart = (props) => { // }, // }, // ], + graphic: { + elements: [ + { + type: 'image', + style: { + image: 'assets/images/quanju/chart-circle.png', + width: 120, + height: 120, + align: 'center', + // x:90, + // y:100 + }, + left: '14%', + top: 'center', + + bounding: 'raw' + // position: ['40%', '40%'], + }, + { + type: 'text', + style: { + text: text, + align: 'center', + fill: '#fff', + font: '12px "YouSheBiaoTiHei", sans-serif', + }, + left: '17%', + top: '55%', + }, + { + type: 'text', + style: { + text: total, + align: 'center', + fill: '#fff', + font: '20px "YouSheBiaoTiHei", sans-serif', + }, + left: '18.5%', + top: 'center', + }, + ], + }, series: [ { name: "底层背景", type: "pie", hoverAnimation: false, legendHoverLink: false, - radius: ["60%", "72%"], + radius: ["58%", "67%"], center: ['25%', '50%'], color: underColorList, label: { @@ -82,7 +144,7 @@ const PieChart = (props) => { { name: "已绿化里程统计", type: "pie", - radius: ["67%", "80%"], + radius: ["65%", "75%"], center: ['25%', '50%'], color: colorList, label: { @@ -99,7 +161,7 @@ const PieChart = (props) => { chartInstance.resize() } }) - }, []) + }, [data]) return (
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js b/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js index 82097322..5036f587 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js @@ -17,18 +17,29 @@ let underColorList = [ "rgba(28,96,254,0.5)", "rgba(4,251,240,0.5)", ] -const LeftBottom = () => { +const LeftBottom = (props) => { const style = { height: "31%", marginTop: "3%" } + const { roadData } = props + const list = roadData?.greenMileage || {} + let grade = ['县道', '乡道', '村道'] + let totalData = null + const value = Object.values(list)?.map((s, index) => { + totalData += s.isGreen + return { + name: grade[index], + value: s.isGreen.toFixed(3) + } + }) + return ( <> - {/*
*/} diff --git a/web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js b/web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js index 6689f500..053bdb42 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js @@ -5,7 +5,7 @@ import { Col, Row } from 'antd' const RightCenter = () => { const style = { height: "31%", marginTop: "3%" } const textStyle = { fontSize: 14, color: '#E9F7FF' } - const numStyle = { color: '#fff', fontSize: 24, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 } + const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 } return ( <> @@ -13,14 +13,14 @@ const RightCenter = () => {
- icon + icon
检查井
89个
- icon + icon
雨水口
61个
@@ -29,14 +29,14 @@ const RightCenter = () => {
- icon + icon
路牌名
2230个
- icon + icon
养护责任牌
1217个
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js b/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js index 6e1cd0c6..c2d68d16 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js @@ -2,24 +2,24 @@ import { Col, Row } from 'antd' import React from 'react' import Module from '../../../public/module' -const RightTop = () => { +const RightTop = (props) => { const style = { height: "31%", marginTop: "3%" } const textStyle = { fontSize: 14, color: '#E9F7FF' } - const numStyle = { color: '#fff', fontSize: 20, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 } + const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 } return ( <>
- icon + icon
标线
1352km
- icon + icon
人行道
80处
@@ -28,14 +28,14 @@ const RightTop = () => {
- icon + icon
标志牌
4563个
- icon + icon
防护栏
1054km
From 100edfa85fb719e1ce59573e7df67e2e7332c49d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98lijianhao=E2=80=99?= Date: Mon, 25 Jul 2022 19:39:18 +0800 Subject: [PATCH 2/8] webapi --- web/client/src/utils/webapi.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index 1b2307b0..63189b01 100644 --- a/web/client/src/utils/webapi.js +++ b/web/client/src/utils/webapi.js @@ -57,7 +57,13 @@ export const ApiTable = { getzhichaomanager: 'manage/overspeed/processed', //获取治超详情数据 - getzhichaodetail: '/manage/overspeed' + getzhichaodetail: '/manage/overspeed', + + //获取路政列表 + getHighways: 'road_manage', + + //获取道路养护统计及列表 + getRoadMaintenance: 'conserve/statistic' }; From 5e478ea587c52629a56752a778885c6f748f7492 Mon Sep 17 00:00:00 2001 From: dengyinhuan Date: Mon, 25 Jul 2022 19:42:34 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E6=8E=A5=E5=85=A5=E5=A4=A7=E5=B1=8F?= =?UTF-8?q?=E5=BB=BA=E8=AE=BE=E9=83=A8=E5=88=86=E7=9A=84=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/sections/quanju/actions/example.js | 16 ++- .../containers/footer/build/Leftbottom.js | 26 ++++- .../containers/footer/build/Rightbottom.js | 6 +- .../containers/footer/build/Rightcenter.js | 41 +++---- .../quanju/containers/footer/build/index.js | 108 +++++++++++++----- .../quanju/containers/footer/build/style.less | 4 + .../quanju/containers/footer/guanli/index.js | 2 +- web/client/src/utils/webapi.js | 5 +- 8 files changed, 151 insertions(+), 57 deletions(-) diff --git a/web/client/src/sections/quanju/actions/example.js b/web/client/src/sections/quanju/actions/example.js index 5818df8d..5029a74a 100644 --- a/web/client/src/sections/quanju/actions/example.js +++ b/web/client/src/sections/quanju/actions/example.js @@ -34,7 +34,7 @@ export function getjiandmanage() { dispatch: dispatch, actionType: 'GET_JIANDMANAGE', url: ApiTable.getzhichaomanager, - msg: { error: '获取治超监测点处理数据信息' }, + msg: { error: '获取治超监测点处理数据信息失败' }, // reducer: { name: 'members' } }); } @@ -47,7 +47,19 @@ export function getjiandetail() { dispatch: dispatch, actionType: 'GET_JIANDETAIL', url: ApiTable.getzhichaodetail, - msg: { error: '获取治超监测点处理数据信息' }, + msg: { error: '获取治超监测点处理数据信息失败' }, + // reducer: { name: 'members' } + }); +} + +//获取宣传数据 +export function getxuanchuan() { + return dispatch => basicAction({ + type: 'get', + dispatch: dispatch, + actionType: 'GET_XUANCHUAN', + url: ApiTable.getpropagata, + msg: { error: '获取宣传信息失败' }, // reducer: { name: 'members' } }); } \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js index d2b731cb..1f4f5b47 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js +++ b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js @@ -24,6 +24,8 @@ function Leftbottom(props) { const chartTitle = '道路总公里'; const title = '基础设施安全监测版块'; let name = [], emptyName = [] + console.log(data,'传入的值') + console.log(emptyName,'第二个') // const name = data?.map(d) data?.forEach(d => { name.push(d.name) @@ -132,6 +134,26 @@ function Leftbottom(props) { tooltip: { trigger: "item", }, +// title: { +// text:total,//主标题文本 +// left:'center', +// // top:'35%', +// subtext:chartTitle,//副标题文本 +// textStyle:{ +// fontFamily : "YouSheBiaoTiHei", +// fontSize: 20, +// color:'#FFFFFF', +// marginLeft:'20%', +// align:'center' +// }, +// subtextStyle:{ +// fontFamily : "PingFangSC-Medium PingFang SC", +// fontSize: 12, +// fontWeight:500, +// color:'#E9F7FF', + +// } +// }, legend: { orient: "vertical", itemWidth: 10, @@ -219,12 +241,12 @@ function Leftbottom(props) { return ()=>{ // clearInterval(changePieInterval) } -}, []); +}, [data]); return (
-

3234.23

+

{total}

道路总公里
diff --git a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js index 2c8107f0..502a138c 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js +++ b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js @@ -133,14 +133,14 @@ function Rightbottom(props) { // } myChart.setOption(option); return ()=>{ - clearInterval(changePieInterval) + // clearInterval(changePieInterval) } -}, []); +}, [data]); return (
-

3234.23

+

{total||0}

道路总公里
diff --git a/web/client/src/sections/quanju/containers/footer/build/Rightcenter.js b/web/client/src/sections/quanju/containers/footer/build/Rightcenter.js index 0c716667..d3e74644 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Rightcenter.js +++ b/web/client/src/sections/quanju/containers/footer/build/Rightcenter.js @@ -1,25 +1,25 @@ import React from 'react' import './style.less' import AutoRollComponent from './AutoRollComponent' -export default function Rightcenter() { - const data =[ {name: '莲塘镇', total: 12739}, - {name: '向塘镇', total: 2445}, - {name: '蒋巷镇', total: 2035}, - {name: '幽兰镇', total: 1999}, - {name: '塘南镇', total: 1915}, - {name: '武阳镇', total: 1842}, - {name: '冈上镇', total: 1446}, - {name: '广福镇', total: 1063}, - {name: '三江镇', total: 851}, - {name: '泾口乡', total: 657}, - {name: '南新镇', total: 640}, - {name: '八一乡', total: 569}, - {name: '黄马乡', total: 541}, - {name: '塔城乡', total: 534}, - {name: '富山乡', total: 515}, - {name: '东新乡', total: 513}, - {name: '银三角', total: 513}, - {name: '八月湖街道', total: 513},] +export default function Rightcenter({data,sundata}) { + // const data =[ {name: '莲塘镇', total: 12739}, + // {name: '向塘镇', total: 2445}, + // {name: '蒋巷镇', total: 2035}, + // {name: '幽兰镇', total: 1999}, + // {name: '塘南镇', total: 1915}, + // {name: '武阳镇', total: 1842}, + // {name: '冈上镇', total: 1446}, + // {name: '广福镇', total: 1063}, + // {name: '三江镇', total: 851}, + // {name: '泾口乡', total: 657}, + // {name: '南新镇', total: 640}, + // {name: '八一乡', total: 569}, + // {name: '黄马乡', total: 541}, + // {name: '塔城乡', total: 534}, + // {name: '富山乡', total: 515}, + // {name: '东新乡', total: 513}, + // {name: '银三角', total: 513}, + // {name: '八月湖街道', total: 513},] const province = undefined const FIRST = "linear-gradient(360deg, rgba(43, 180, 211, 0.1) 0%, rgba(43, 180, 211, 0.4) 100%)" const SECOND = "linear-gradient(360deg, rgba(255, 209, 86, 0.1) 0%, rgba(255, 209, 86, 0.4) 100%)" @@ -27,6 +27,7 @@ const THIRD = "linear-gradient(360deg, rgba(148, 148, 255, 0.1) 0%, rgba(148, 14 const OTHER = "linear-gradient(360deg, rgba(28, 96, 253, 0) 0%, rgba(28, 96, 253, 0.2) 100%)" let TOTALS = data?.map(({ name, total }, index) => { let max = province ? data.length * 30 + 100 : data.length * 500 + 100 + console.log(max,'好朋友吗') return { name, value: total, @@ -81,7 +82,7 @@ const RNAKS = [FIRST, SECOND, THIRD]
在线公路工程数量
-

1234,123

+

{sundata}

{ const { dispatch } = props - let data = [ - { value: 435, name: "县道" }, - { value: 679, name: "乡道" }, - { value: 848, name: "村道" }, + let data1 = [ + {name: "县", value: 207}, + {name: "乡", value: 729}, + {name: "村", value: 1938} ] - const safetyData = [ - {name: '一级公路', value: 42}, - {name: '二级公路', value: 17}, - {name: '三级公路', value: 17}, - {name: '四级公路', value: 30}, +// const safetyData = [ +// {name: '一级公路', value: 42}, +// {name: '二级公路', value: 17}, +// {name: '三级公路', value: 17}, +// {name: '四级公路', value: 30}, - ] +// ] const [buildingnumber,setbuildingnumber] = useState(0) + const [data,setdata] = useState([]) + const [xuandata,setxuandata] = useState(null) + + //获取道路管理数据 const requestbuildingnumber = async ()=>{ const res = await dispatch(getdaolutongji()); + let alltype = Object.keys(res.payload.data?.roadType || {}).map((item)=>({name:item,value:Number(keepThreeNum(res.payload.data.roadType[item]))})) + setdata(alltype.filter(item=>item.name!=='null')) setbuildingnumber(res.payload.data) - // console.log(res.payload.data,'哈哈哈') + console.log(res.payload.data,'哈哈哈') + + } + + //获取宣传栏数据 + const requestxuanchuanlan = async ()=>{ + const res = await dispatch(getxuanchuan()); + + // setdata(alltype.filter(item=>item.name!=='null')) + setxuandata(res.payload.data) + console.log(res.payload.data,'宣传栏数据') } + let t1 = Object.values(buildingnumber?.townRoad || {}) + + let totalgongli = t1.length!==0 ? t1.reduce((x,y)=>x+y.mileage,0):0 //乡镇道路占比总公里数 + let totalcount = t1.length !==0 ? t1.reduce((x,y)=>x+y.roadCount,0):0 //乡镇道路占比公路总条数 + + // let sungongli = alltype.reduce((x,y)=>x+y.value,0) + + const keepThreeNum=(value)=> { + let resValue = 0 + //小数点的位置 + let index = value&&value.toString().indexOf('.') + 1 + //小数的位数 + let num = value&&Math.abs(Number(value)).toString().length - index + if(index && num > 3){ + resValue = value&&Number(value).toFixed(3) + } else { + resValue = value + } + return resValue + } + let datas = Object.keys(buildingnumber?.townRoad || {}).map((item)=>({name:item,number:buildingnumber.townRoad[item].roadCount,gongli:Number(keepThreeNum(buildingnumber.townRoad[item].mileage))})) + + + //道路等级数据 + let alldengji = Object.keys(buildingnumber?.roadLevel || {}).map((item)=>({name:item,value:Number(keepThreeNum(buildingnumber.roadLevel[item]))})) + + let onlineproject = Object.keys(buildingnumber?.townProject||{}).map((item)=>({name:item,total:buildingnumber.townProject[item]})) + let sunonlineproject = onlineproject.reduce((x,y)=>x+y.total,0) + let safetyData = alldengji.filter(item=>item.name!=='null') + let sundata = data.reduce((x,y)=>x+y.value,0) + let sunsafetyData = safetyData.reduce((x,y)=>x+y.value,0) + console.log(safetyData,'好凶猛') + console.log(data1,'对比') + // console.log(totalgongli,"好好的") + // console.log(keepThreeNum(totalgongli),'jjjjj') useEffect(()=>{ - requestbuildingnumber() + requestbuildingnumber(); + requestxuanchuanlan() },[]) - const datas = new Array(15) - datas.fill({ - name:"东乡镇", - number:"11111", - gongli:'9999' - },0,15) + // const datas = new Array(15) + // datas.fill({ + // name:"东乡镇", + // number:"11111", + // gongli:'9999' + // },0,15) const rendercontent = ()=>{ return (
{datas.map(({name,number,gongli},index)=>
@@ -65,7 +117,7 @@ const Build = (props) => { 在建公路数量
-
{buildingnumber.buildingRoad || 0}
+
{buildingnumber?.buildingRoad || 0}
@@ -74,7 +126,7 @@ const Build = (props) => { 已建公路数量
-
{buildingnumber.buildedRoad || 0}
+
{buildingnumber?.buildedRoad || 0}
@@ -87,14 +139,14 @@ const Build = (props) => {
公路公里数/公里 - 1234,123 + {keepThreeNum(totalgongli)}
- 公路公里数/公里 - 1234,123 + 公路总数/条 + {totalcount||0}
@@ -115,7 +167,7 @@ const Build = (props) => { width='100%' height='100%' text='道路总公里' - total={2344.13} + total={keepThreeNum(sundata)} // colorList={colorList} // underColorList={underColorList} /> @@ -134,7 +186,7 @@ const Build = (props) => { - + { + total={sunsafetyData} + data={keepThreeNum(safetyData)}/>
diff --git a/web/client/src/sections/quanju/containers/footer/build/style.less b/web/client/src/sections/quanju/containers/footer/build/style.less index 6e534f0f..beae659e 100644 --- a/web/client/src/sections/quanju/containers/footer/build/style.less +++ b/web/client/src/sections/quanju/containers/footer/build/style.less @@ -141,6 +141,10 @@ display: flex ; width: 100%; height: 28px; + align-items: center; + &:hover{ + background: linear-gradient(270deg, rgba(0,124,230,0) 0%, rgba(0,70,200,0.8700) 100%); + } span{ flex:1; text-align: center; 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 4557fdaf..e421b50d 100644 --- a/web/client/src/sections/quanju/containers/footer/guanli/index.js +++ b/web/client/src/sections/quanju/containers/footer/guanli/index.js @@ -59,7 +59,7 @@ const Guanli = (props) => {
已处理 - {rightDatas.processed||0} + {rightDatas?.processed||0}
diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js index 1b2307b0..141e434a 100644 --- a/web/client/src/utils/webapi.js +++ b/web/client/src/utils/webapi.js @@ -57,7 +57,10 @@ export const ApiTable = { getzhichaomanager: 'manage/overspeed/processed', //获取治超详情数据 - getzhichaodetail: '/manage/overspeed' + getzhichaodetail: 'manage/overspeed', + + //获取宣传栏数据 + getpropagata:'publicity' }; From c46cbe892e022322410ba6929ca4b3922dd625b8 Mon Sep 17 00:00:00 2001 From: dengyinhuan Date: Mon, 25 Jul 2022 19:58:08 +0800 Subject: [PATCH 4/8] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9B=BE=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../containers/footer/build/Leftbottom.js | 43 ++++++++++++++----- .../containers/footer/build/Rightbottom.js | 28 ++++++++++-- 2 files changed, 57 insertions(+), 14 deletions(-) diff --git a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js index 1f4f5b47..f308da30 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js +++ b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js @@ -154,18 +154,39 @@ function Leftbottom(props) { // } // }, - legend: { - orient: "vertical", - itemWidth: 10, - itemHeight: 10, - right: '30%', - top: 'center', - align: 'left', - data: name, - textStyle: { - color: "#fff", +legend: { + orient: "vertical", + itemWidth: 10, + itemHeight: 10, + // right: '30%', + left: '50%', + top: 'center', + align: 'left', + data: name, + formatter: (name) => { + for (let i = 0; i < option.series[1].data.length; i += 1) { + if (name === option.series[1].data[i].name) { + let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`] + return arr.join('\t'); + } + } + }, + textStyle: { + rich: { + a: { + color: '#E9F7FF', + fontSize: 14, + padding:[0,10] }, - }, + b: { + fontSize: 16, + fontFamily: 'YouSheBiaoTiHei', + color: '#fff', + padding:[0,0,0,15] + }, + } + } +}, grid: { left: '10%' }, diff --git a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js index 502a138c..d18477ed 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js +++ b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js @@ -53,12 +53,34 @@ function Rightbottom(props) { orient: "vertical", itemWidth: 10, itemHeight: 10, - right: '30%', + // right: '30%', + left: '50%', top: 'center', align: 'left', - textStyle: { - color: "#fff", + data: name, + formatter: (name) => { + for (let i = 0; i < option.series[1].data.length; i += 1) { + if (name === option.series[1].data[i].name) { + let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`] + return arr.join('\t'); + } + } }, + textStyle: { + rich: { + a: { + color: '#E9F7FF', + fontSize: 14, + padding:[0,10] + }, + b: { + fontSize: 16, + fontFamily: 'YouSheBiaoTiHei', + color: '#fff', + padding:[0,0,0,15] + }, + } + } }, grid: { left: '10%' From 1a291b0800d9113df131eae726580ce159379a4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98lijianhao=E2=80=99?= Date: Mon, 25 Jul 2022 20:37:25 +0800 Subject: [PATCH 5/8] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=8E=A5=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../footer/conserve/action/index.js | 17 ++++ .../containers/footer/conserve/index.js | 8 +- .../containers/footer/conserve/right.js | 8 +- .../footer/conserve/right/right-center.js | 75 ++++++++++-------- .../footer/conserve/right/right-top.js | 78 +++++++++++-------- 5 files changed, 116 insertions(+), 70 deletions(-) diff --git a/web/client/src/sections/quanju/containers/footer/conserve/action/index.js b/web/client/src/sections/quanju/containers/footer/conserve/action/index.js index e69de29b..09142754 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/action/index.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/action/index.js @@ -0,0 +1,17 @@ +'use strict'; + +import { basicAction } from '@peace/utils' +import { ApiTable } from '$utils' + +//获取路政列表 +export function getHighways() { + return dispatch => basicAction({ + type: 'get', + dispatch: dispatch, + actionType: 'GET_HIGHWAYS', + url: `${ApiTable.getHighways}`, + msg: { error: '获取路政列表失败' }, + reducer: { name: 'highways' } + }); +} +//获取道路养护统计及列表 diff --git a/web/client/src/sections/quanju/containers/footer/conserve/index.js b/web/client/src/sections/quanju/containers/footer/conserve/index.js index 9eda76b9..93338e64 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/index.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/index.js @@ -3,11 +3,14 @@ import Left from './left' import Right from './right' import { connect } from 'react-redux' import { getdaolutongji } from '../../../actions/example' +import { getHighways } from './action' const Conserve = (props) => { const [roadData, setRoadData] = useState() + const [highwaysData, setHighwaysData] = useState() + const [loading, setLoading] = useState(true) const { dispatch } = props useEffect(() => { @@ -15,12 +18,15 @@ const Conserve = (props) => { setLoading(false) setRoadData(res.payload.data || {}) }) + dispatch(getHighways()).then(res =>{ + setHighwaysData(res.payload.data || []) + }) }, []) return (
- +
) } diff --git a/web/client/src/sections/quanju/containers/footer/conserve/right.js b/web/client/src/sections/quanju/containers/footer/conserve/right.js index 98464eec..2d5cfeaf 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/right.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/right.js @@ -4,12 +4,12 @@ import RightCenter from './right/right-center' import RightTop from './right/right-top' const Right = (props) => { - const { roadData } = props + const { highwaysData } = props return (
- - - + + +
) } diff --git a/web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js b/web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js index 053bdb42..64147c84 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js @@ -2,47 +2,56 @@ import React from 'react' import Module from '../../../public/module' import { Col, Row } from 'antd' -const RightCenter = () => { +// const unit =['个','个',] +const icon = [ + 'assets/images/quanju/jiancha.png', + 'assets/images/quanju/yushui.png', + 'assets/images/quanju/lupai.png', + 'assets/images/quanju/zerenpai.png' +] +const RightCenter = (props) => { + const { highwaysData } = props const style = { height: "31%", marginTop: "3%" } const textStyle = { fontSize: 14, color: '#E9F7FF' } const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 } - + const list = highwaysData?.slice(4, 8).map((h,index)=>{ + return { + id:h.id, + name:h.name, + count:h.count, + // unit:unit[index], + icon:icon[index] + } + }) + const arrayChunk = (array, size) => { + let data = [] + for (let i = 0; i < array.length; i += size) { + data.push(array.slice(i, i + size)) + } + return data + } + let lists = list ? arrayChunk(list, 2) : [] return ( <>
- - - icon -
-
检查井
-
89个
+ { + lists?.map((item, index) => { + return
+ { + item?.map(i => ( +
+ icon +
+
{i.name}
+
{`${i.count}个`}
+
+
+ )) + }
- - - icon - -
雨水口
-
61个
-
- - - - - icon - -
路牌名
-
2230个
-
- - - icon - -
养护责任牌
-
1217个
-
- -
+ }) + }
diff --git a/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js b/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js index c2d68d16..e264b79d 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js @@ -1,47 +1,61 @@ import { Col, Row } from 'antd' -import React from 'react' +import React, { useState, useEffect } from 'react' import Module from '../../../public/module' + +const iconSrc = [ + 'assets/images/quanju/biaoxian.png', + 'assets/images/quanju/renxing.png', + 'assets/images/quanju/biaozhi.png', + 'assets/images/quanju/fanghu.png' +] +const unit = ['km', '处', '个', 'km'] + const RightTop = (props) => { + const { highwaysData } = props const style = { height: "31%", marginTop: "3%" } const textStyle = { fontSize: 14, color: '#E9F7FF' } const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 } + const list = highwaysData?.slice(0, 4).map((h,index)=>{ + return { + id:h.id, + name:h.name, + count:h.count, + unit:unit[index], + icon:iconSrc[index] + + } + }) + + const arrayChunk = (array, size) => { + let data = [] + for (let i = 0; i < array.length; i += size) { + data.push(array.slice(i, i + size)) + } + return data + } + let lists = list ? arrayChunk(list, 2) : [] return ( <>
- - - icon -
-
标线
-
1352km
+ { + lists?.map((item, index) => { + return
+ { + item?.map(i => ( +
+ icon +
+
{i.name}
+
{`${i.count}${i.unit}`}
+
+
+ )) + }
- - - icon - -
人行道
-
80处
-
- - - - - icon - -
标志牌
-
4563个
-
- - - icon - -
防护栏
-
1054km
-
- -
+ }) + }
From def4e9985c16b02efa3f6a3dc1f016dc7d9e5886 Mon Sep 17 00:00:00 2001 From: liujiangyong Date: Mon, 25 Jul 2022 21:06:04 +0800 Subject: [PATCH 6/8] =?UTF-8?q?=E5=B7=A1=E6=9F=A5=E4=B8=8A=E6=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../packages/components/inputPicker/index.jsx | 48 +++ .../components/inputPicker/index.scss | 30 ++ weapp/src/packages/patrol/index.jsx | 315 +++++++++++------- weapp/src/packages/patrol/index.scss | 38 ++- weapp/src/packages/patrolView/index.jsx | 2 +- weapp/src/services/api.js | 4 + 6 files changed, 303 insertions(+), 134 deletions(-) create mode 100644 weapp/src/packages/components/inputPicker/index.jsx create mode 100644 weapp/src/packages/components/inputPicker/index.scss diff --git a/weapp/src/packages/components/inputPicker/index.jsx b/weapp/src/packages/components/inputPicker/index.jsx new file mode 100644 index 00000000..f6b4b197 --- /dev/null +++ b/weapp/src/packages/components/inputPicker/index.jsx @@ -0,0 +1,48 @@ +/* +* 输入框筛选选择器 +*/ +import React, { useState, useEffect } from 'react' +import { View, Picker, Image, Input } from '@tarojs/components' +import arrowIcon from '../../../static/img/patrol/arrow-down.svg' +import './index.scss' + +export default function InputPicker(props) { + const { title, placeholder, selector, value, onInput } = props + const [curSelector, setCurSelector] = useState([]) + + useEffect(() => { + setCurSelector(selector) + }, []) + + function handleInput({ detail: { value: v } }) { + onInput(v) + if (v) { + setCurSelector(selector.filter(item => item.includes(v))) + } else { + setCurSelector(selector) + } + } + + const handlePickerChange = (e) => { + onInput(curSelector[e.detail.value]) + } + + return ( + + + {title} + + + + + + + ) +} \ No newline at end of file diff --git a/weapp/src/packages/components/inputPicker/index.scss b/weapp/src/packages/components/inputPicker/index.scss new file mode 100644 index 00000000..5a167df3 --- /dev/null +++ b/weapp/src/packages/components/inputPicker/index.scss @@ -0,0 +1,30 @@ +.input-picker { + display: flex; + justify-content: space-between; + height: 96px; + align-items: center; + background-color: #fff; + margin-bottom: 5px; + + .input-box { + padding: 12px 0; + flex-grow: 1; + display: flex; + align-items: center; + + .title { + margin-left: 30px; + } + + .input { + margin-left: 20px; + flex-grow: 1; + } + } + + .img { + width: 24px; + height: 14px; + margin: 0 30px; + } +} \ No newline at end of file diff --git a/weapp/src/packages/patrol/index.jsx b/weapp/src/packages/patrol/index.jsx index 36390b54..aa7140d9 100644 --- a/weapp/src/packages/patrol/index.jsx +++ b/weapp/src/packages/patrol/index.jsx @@ -7,86 +7,158 @@ import { Button, Image, Input, - Textarea, Picker } from '@tarojs/components'; -import { AtForm, AtInput, AtButton, AtTextarea, AtImagePicker, AtTimeline } from 'taro-ui'; -// import InputPicker from '../components/inputPicker'; +import { AtButton, AtTextarea, AtImagePicker } from 'taro-ui'; +import InputPicker from '../components/inputPicker'; +import request from '@/services/request'; +import { postReport } from '@/services/api'; import './index.scss'; import arrowIcon from '../../static/img/patrol/arrow-down.svg'; const Index = () => { - const [isPatrol, setIsPatrol] = useState(true) // 巡查 or 养护 - const [prjTypeSelector, setPrjTypeSelector] = useState([]) - const [roadSelector, setRoadSelector] = useState([]) - const [projectType, setProjectType] = useState('') - const [road, setRoad] = useState('') + const [reportType, setReportType] = useState('patrol') // 上报类型 + const [projectType, setProjectType] = useState('') // 工程类型 + const [road, setRoad] = useState('') // 所在道路 + const [roadSectionStart, setRoadSectionStart] = useState('') // 路段 Start + const [roadSectionEnd, setRoadSectionEnd] = useState('') // 路段 End + const [address, setAddress] = useState('') // 具体位置 + const [content, setContent] = useState('') // 巡查内容 + const [scenePic, setScenePic] = useState([]) // 现场图片 + const [conserveBeforePic, setConserveBeforePic] = useState([]) // 养护前图片 + const [conserveUnderwayPic, setConserveUnderwayPic] = useState([]) // 养护中图片 + const [conserveAfterPic, setConserveAfterPic] = useState([]) // 养护后图片 - const [images, setimages] = useState([]) + const [roadStartSelector, setRoadStartSelector] = useState([]) + const [roadEndSelector, setRoadEndSelector] = useState([]) - const reportType = [ - { - value: '巡查', - text: '巡查', - checked: true - }, - { - value: '养护', - text: '养护', - checked: false - } - ] + const rPrjTypeSelector = ['道路', '桥梁', '涵洞', '其他'] + const rRoadSelector = ['富山一路', '金沙大道', '玉湖路'] + + const rRoadStartSelector = ['一段', '二段', '三段'] + const rRoadEndSelector = ['一段', '二段', '三段'] useEffect(() => { - const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他'] - const roadSelector = ['富山一路', '金沙大道', '玉湖路'] - setPrjTypeSelector(prjTypeSelector) - setRoadSelector(roadSelector) + setRoadStartSelector(rRoadStartSelector) + setRoadEndSelector(rRoadEndSelector) }, []) - useEffect(() => { - if (projectType) { - setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType))) + function report() { + let data = { + reportType, + projectType, + road, + roadSectionStart, + roadSectionEnd, + address, + content, + longitude: 37.000000000000, + latitude: 69.000000000000 } - }, [projectType]) - // useEffect(() => { - // if (projectType) { - // setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType))) - // } - // }, [projectType]) - - function onTypeChange(e) { - if (e.detail.value === '巡查') { - setIsPatrol(true) + if (reportType === 'patrol') { + data['scenePic'] = scenePic.length > 0 && scenePic.map(item => item.url) } else { - setIsPatrol(false) + data['conserveBeforePic'] = conserveBeforePic.length > 0 && conserveBeforePic.map(item => item.url) + data['conserveUnderwayPic'] = conserveUnderwayPic.length > 0 && conserveUnderwayPic.map(item => item.url) + data['conserveAfterPic'] = conserveAfterPic.length > 0 && conserveAfterPic.map(item => item.url) } + for (var key in data) { + if (!data[key]) { + Taro.showToast({ title: '请完善信息', icon: 'none' }) + return + } + } + if (rPrjTypeSelector.indexOf(data.projectType) === -1) { + Taro.showToast({ title: '工程类型错误', icon: 'none' }) + return + } + request.post(postReport(), data).then(res => { + if (res.statusCode == 200 || res.statusCode == 204) { + Taro.showToast({ title: '上报成功', icon: 'none' }) + } else { + Taro.showToast({ title: res.data.message || '请求出错', icon: 'none' }) + } + }, err => { + Taro.showToast({ title: err.message || '请求出错', icon: 'none' }) + }) } - function onPrjTypeChange(e) { - setProjectType(selector[e.detail.value]) + function handleInput({ detail: { value } }, type) { + switch (type) { + case 'roadSectionStart': + setRoadSectionStart(value) + if (value) { + setRoadStartSelector(rRoadStartSelector.filter(item => item.includes(value))) + } else { + setRoadStartSelector(rRoadStartSelector) + } + break; + case 'roadSectionEnd': + setRoadSectionEnd(value) + if (value) { + setRoadEndSelector(rRoadEndSelector.filter(item => item.includes(value))) + } else { + setRoadEndSelector(rRoadEndSelector) + } + break; + case 'address': + setAddress(value) + break; + case 'content': + setContent(value) + default: + break; + } } - function onImgPickerChange(files) { - setimages(files) + function handleTypeChange(e) { + setReportType(e.detail.value) } - function onImageClick(index, file) { + + function handleImgChange(files, type) { + switch (type) { + case 'scenePic': + setScenePic(files) + break; + case 'conserveBeforePic': + setConserveBeforePic(files) + break; + case 'conserveUnderwayPic': + setConserveUnderwayPic(files) + break; + case 'conserveAfterPic': + setConserveAfterPic(files) + break; + default: + break; + } + } + function handleImgClick(index, file) { Taro.previewImage({ urls: [file.url] // 需要预览的图片http链接列表 }) } - useEffect(() => { - console.log(images); - }, [images]) + const typeList = [ + { + value: 'patrol', + text: '巡查', + checked: true + }, + { + value: 'conserve', + text: '养护', + checked: false + } + ] return ( - + 上报类型 - + { - reportType.map((item, i) => { + typeList.map((item, i) => { return ( { - - setProjectType(value)} - /> - - - - - - setRoad(value)} - /> - - - - - - {/* - */} + onInput={setRoad} + selector={rRoadSelector} + /> - - + 所属路段: + handleInput(e, 'roadSectionStart')} /> - + setRoadSectionStart(roadStartSelector[e.detail.value])} + > - 至  + handleInput(e, 'roadSectionEnd')} /> - + setRoadSectionEnd(roadEndSelector[e.detail.value])} + > - + + 具体位置: + handleInput(e, 'address')} + /> + + handleInput(e, 'content')} /> - { - isPatrol ? - + reportType === 'patrol' ? + 现场图片: = 3 ? false : true} - files={images} - onChange={onImgPickerChange} - onImageClick={onImageClick} + count={3 - scenePic.length} + showAddBtn={scenePic.length >= 3 ? false : true} + files={scenePic} + onChange={files => handleImgChange(files, 'scenePic')} + onImageClick={handleImgClick} /> : - + 养护图片: @@ -211,9 +264,11 @@ const Index = () => { = 3 ? false : true} + files={conserveBeforePic} + onChange={files => handleImgChange(files, 'conserveBeforePic')} + onImageClick={handleImgClick} /> @@ -221,9 +276,11 @@ const Index = () => { = 3 ? false : true} + files={conserveUnderwayPic} + onChange={files => handleImgChange(files, 'conserveUnderwayPic')} + onImageClick={handleImgClick} /> @@ -231,15 +288,15 @@ const Index = () => { = 3 ? false : true} + files={conserveAfterPic} + onChange={files => handleImgChange(files, 'conserveAfterPic')} + onImageClick={handleImgClick} /> } - - 上报 - + 上报 ) } diff --git a/weapp/src/packages/patrol/index.scss b/weapp/src/packages/patrol/index.scss index 83057e4b..186500ad 100644 --- a/weapp/src/packages/patrol/index.scss +++ b/weapp/src/packages/patrol/index.scss @@ -3,6 +3,10 @@ page { width: 100vw; background-color: #f6f6f6; + .patrol { + font-size: 28px; + } + .report-type { height: 96px; background-color: #fff; @@ -20,32 +24,58 @@ page { } } - .input-picker { + .road-section { display: flex; justify-content: space-between; + height: 96px; align-items: center; background-color: #fff; margin-bottom: 5px; + .title { + margin-left: 30px; + } + + .input { + width: 200px; + } + .img-r { width: 24px; height: 14px; margin-right: 30px; - // margin-left: 10px; } .img-l { width: 24px; height: 14px; + margin-right: 10px; + } + } + + .address { + background-color: #fff; + display: flex; + align-items: center; + height: 96px; + margin-bottom: 5px; + + .title { + margin-left: 30px; + } + + .input { + margin-left: 20px; + flex-grow: 1; } } - .patrol-picker { + .patrol-img { background-color: #fff; padding: 20px; } - .conserve-picker { + .conserve-img { background-color: #fff; padding: 20px; diff --git a/weapp/src/packages/patrolView/index.jsx b/weapp/src/packages/patrolView/index.jsx index 04792eea..2b768793 100644 --- a/weapp/src/packages/patrolView/index.jsx +++ b/weapp/src/packages/patrolView/index.jsx @@ -35,7 +35,7 @@ function Index() { throw new Error(error); } useEffect(() => { - request.get(getReportList(),{}, { hideErrorToast: true, hideLoading: true }).then(res => { + request.get(getReportList(), {}, { hideErrorToast: true, hideLoading: true }).then(res => { if (res.statusCode == 200) { console.log(res); setListData(res.data) diff --git a/weapp/src/services/api.js b/weapp/src/services/api.js index bc0f6aeb..dab3cd0f 100644 --- a/weapp/src/services/api.js +++ b/weapp/src/services/api.js @@ -11,6 +11,10 @@ export const getReportList = () => { return `/report/list`; }; +export const postReport = () => { + return `/report`; +}; + //行业查询 export const getIndustryUrl = () => { return `/elec/business/industry` From 2630bab23173f7bb7efddc560e169e3f07229b2b Mon Sep 17 00:00:00 2001 From: dengyinhuan Date: Mon, 25 Jul 2022 21:38:48 +0800 Subject: [PATCH 7/8] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../containers/footer/build/Leftbottom.js | 5 ++-- .../containers/footer/build/Rightcenter.js | 24 ++++++++++--------- .../containers/footer/guanli/style.less | 2 +- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js index f308da30..01857791 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js +++ b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js @@ -136,7 +136,7 @@ function Leftbottom(props) { }, // title: { // text:total,//主标题文本 -// left:'center', +// left:'20%', // // top:'35%', // subtext:chartTitle,//副标题文本 // textStyle:{ @@ -151,6 +151,7 @@ function Leftbottom(props) { // fontSize: 12, // fontWeight:500, // color:'#E9F7FF', +// align:'center' // } // }, @@ -159,7 +160,7 @@ legend: { itemWidth: 10, itemHeight: 10, // right: '30%', - left: '50%', + right: '10%', top: 'center', align: 'left', data: name, diff --git a/web/client/src/sections/quanju/containers/footer/build/Rightcenter.js b/web/client/src/sections/quanju/containers/footer/build/Rightcenter.js index d3e74644..e5cbeb9c 100644 --- a/web/client/src/sections/quanju/containers/footer/build/Rightcenter.js +++ b/web/client/src/sections/quanju/containers/footer/build/Rightcenter.js @@ -20,14 +20,14 @@ export default function Rightcenter({data,sundata}) { // {name: '东新乡', total: 513}, // {name: '银三角', total: 513}, // {name: '八月湖街道', total: 513},] - const province = undefined + // const province = undefined const FIRST = "linear-gradient(360deg, rgba(43, 180, 211, 0.1) 0%, rgba(43, 180, 211, 0.4) 100%)" const SECOND = "linear-gradient(360deg, rgba(255, 209, 86, 0.1) 0%, rgba(255, 209, 86, 0.4) 100%)" const THIRD = "linear-gradient(360deg, rgba(148, 148, 255, 0.1) 0%, rgba(148, 148, 255, 0.4) 100%)" const OTHER = "linear-gradient(360deg, rgba(28, 96, 253, 0) 0%, rgba(28, 96, 253, 0.2) 100%)" let TOTALS = data?.map(({ name, total }, index) => { - let max = province ? data.length * 30 + 100 : data.length * 500 + 100 - console.log(max,'好朋友吗') + let max = Math.max(...data.map(item=>item.total)) + console.log(data.map(item=>item.total),'好朋友吗') return { name, value: total, @@ -36,7 +36,7 @@ let TOTALS = data?.map(({ name, total }, index) => { }) let new_TOTALS = TOTALS && TOTALS.length > 10 ? TOTALS.slice(0, 10) : TOTALS function Cell(props) { - const { name, rank, value, percent, style = {} } = props + const { name, rank, value, percent, style = {},cebg } = props let bg = RNAKS[rank] || OTHER console.log(percent,'百分比') return
+ background: cebg || "linear-gradient(270deg, #1C60FE 0%, rgba(28, 96, 254, 0) 100%)" + }} >{cebg?:""}
+
{value}
@@ -69,11 +71,11 @@ function Cell(props) {
} const renderContent = () => { - return
- {new_TOTALS?.map(({ name, value, percent }, index) => { - return - })} -
+ + return new_TOTALS?.map(({ name, value, percent }, index) => { + return + }) + } const RNAKS = [FIRST, SECOND, THIRD] diff --git a/web/client/src/sections/quanju/containers/footer/guanli/style.less b/web/client/src/sections/quanju/containers/footer/guanli/style.less index ac6fba18..f7620451 100644 --- a/web/client/src/sections/quanju/containers/footer/guanli/style.less +++ b/web/client/src/sections/quanju/containers/footer/guanli/style.less @@ -153,7 +153,7 @@ font-weight: 400; color: rgba(216,240,255,0.8000); line-height: 20px; - // flex:1; + flex:1; text-align: center; // &:nth-child(1){ From 451fa80126be236eb059e2e2a0c49a5c46ef8783 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98lijianhao=E2=80=99?= Date: Mon, 25 Jul 2022 21:39:17 +0800 Subject: [PATCH 8/8] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=8E=A5=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../footer/conserve/action/index.js | 12 +++++- .../footer/conserve/chart/pie-chart.js | 4 +- .../containers/footer/conserve/index.js | 8 +++- .../footer/conserve/left/left-bottom.js | 5 --- .../containers/footer/conserve/right.js | 4 +- .../footer/conserve/right/right-bottom.js | 43 +++++++++++++++---- 6 files changed, 55 insertions(+), 21 deletions(-) diff --git a/web/client/src/sections/quanju/containers/footer/conserve/action/index.js b/web/client/src/sections/quanju/containers/footer/conserve/action/index.js index 09142754..aca6e2bc 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/action/index.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/action/index.js @@ -9,9 +9,19 @@ export function getHighways() { type: 'get', dispatch: dispatch, actionType: 'GET_HIGHWAYS', - url: `${ApiTable.getHighways}`, + url: ApiTable.getHighways, msg: { error: '获取路政列表失败' }, reducer: { name: 'highways' } }); } //获取道路养护统计及列表 +export function getRoadMaintenances() { + return dispatch => basicAction({ + type: 'get', + dispatch: dispatch, + actionType: 'GET_ROAD_MAINTENANCES', + url: ApiTable.getRoadMaintenance, + msg: { error: '获取道路养护列表失败' }, + reducer: { name: 'RoadMaintenances' } + }); +} diff --git a/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js b/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js index 2f3348a7..75ec1b77 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js @@ -43,13 +43,13 @@ const PieChart = (props) => { a: { color: '#E9F7FF', fontSize: 14, - padding:[0,10] + padding:[0,2] }, b: { fontSize: 16, fontFamily: 'YouSheBiaoTiHei', color: '#fff', - padding:[0,0,0,15] + padding:[0,0,0,10] }, } } diff --git a/web/client/src/sections/quanju/containers/footer/conserve/index.js b/web/client/src/sections/quanju/containers/footer/conserve/index.js index 93338e64..750f3285 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/index.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/index.js @@ -3,13 +3,14 @@ import Left from './left' import Right from './right' import { connect } from 'react-redux' import { getdaolutongji } from '../../../actions/example' -import { getHighways } from './action' +import { getHighways, getRoadMaintenances } from './action' const Conserve = (props) => { const [roadData, setRoadData] = useState() const [highwaysData, setHighwaysData] = useState() + const [roadMaintenances, setRoadMaintenances] = useState() const [loading, setLoading] = useState(true) const { dispatch } = props @@ -21,12 +22,15 @@ const Conserve = (props) => { dispatch(getHighways()).then(res =>{ setHighwaysData(res.payload.data || []) }) + dispatch(getRoadMaintenances()).then(res =>{ + setRoadMaintenances(res.payload.data || []) + }) }, []) return (
- +
) } diff --git a/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js b/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js index 5036f587..37394a3a 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js @@ -2,11 +2,6 @@ import React from 'react' import Module from '../../../public/module' import PieChart from '../chart/pie-chart'; -let data = [ - { value: 435, name: "县道" }, - { value: 679, name: "乡道" }, - { value: 848, name: "村道" }, -] let colorList = [ "rgba(7,185,254,1)", "rgba(28,96,254,1)", diff --git a/web/client/src/sections/quanju/containers/footer/conserve/right.js b/web/client/src/sections/quanju/containers/footer/conserve/right.js index 2d5cfeaf..b96513e2 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/right.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/right.js @@ -4,12 +4,12 @@ import RightCenter from './right/right-center' import RightTop from './right/right-top' const Right = (props) => { - const { highwaysData } = props + const { highwaysData,roadMaintenances } = props return (
- +
) } diff --git a/web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js b/web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js index 744165df..919bcdc0 100644 --- a/web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js +++ b/web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js @@ -2,12 +2,6 @@ import React from 'react' import Module from '../../../public/module' import PieChart from '../chart/pie-chart'; -let data = [ - { value: 435, name: "道路" }, - { value: 679, name: "桥梁" }, - { value: 848, name: "涵洞" }, - { value: 666, name: "其他" }, -] let colorList = [ "rgba(7,185,254,1)", "rgba(28,96,254,1)", @@ -20,18 +14,49 @@ let underColorList = [ "rgba(4,251,240,0.5)", "rgba(255,194,20,0.5)" ] -const RightBottom = () => { + +const type = ['road', 'culvert', 'bridge'] + +const RightBottom = (props) => { + const { roadMaintenances } = props + let totalData = null + let typesNum = null + const list = roadMaintenances?.reportCount?.map((r, index) => { + totalData += Number(r.count) + if (r.projectType === type[index]) { + typesNum += Number(r.count) + } + switch (r.projectType) { + case 'road': + return { + name: '道路', + value: r.count + }; + case 'culvert': + return { + name: '涵洞', + value: r.count + }; + case 'bridge': + return { + name: '桥梁', + value: r.count + } + } + }).filter(f => f !== undefined) + const otherNum = totalData - typesNum + otherNum !== null && list?.push({ name: '其他', value: otherNum }) const style = { height: "31%", marginTop: "3%" } return ( <> {/*
*/}