From f04c7913785fd342c73ed1567801a7c47ec52b99 Mon Sep 17 00:00:00 2001 From: "gao.zhiyuan" Date: Thu, 10 Aug 2023 11:10:03 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BB=BA=E8=AE=BE=E7=82=B9=E4=BD=8D=E6=A0=B9?= =?UTF-8?q?=E6=8D=AE=E9=81=93=E8=B7=AF=E8=B5=B7=E7=82=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../left/echarts/leftbottomecharts.js | 333 +++++++++--------- .../quanju/containers/public/olMap.js | 21 +- 2 files changed, 186 insertions(+), 168 deletions(-) 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 5a884e83..8b675754 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,180 +3,183 @@ 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); - 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); + 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 == '2021' && i == index) { + count = 78.7 + } else 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" - }, + 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: { }, - }, - 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)"//折线的颜色 - } - } + tooltip: { + formatter: " {b}年
{c}公里", + trigger: "axis", + axisPointer: { + lineStyle: { + color: "rgba(226,240,255,0.4)", + default: "solid" + }, + }, }, - ], - 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, - }, + legend: { + icon: "rect", + itemWidth: 14, + itemHeight: 5, + itemGap: 13, + data: ["移动"], + right: "4%", + // textStyle: { + // fontSize: 12, + // color: "#F1F1F3", + // }, }, - ], - 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, + grid: { + top: "18%", + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, }, - ], - }; - chartInstance.setOption(option); - window.addEventListener('resize', function () { - chartInstance.resize(); - }) - }, [count, flag, list]); - console.log(flag); + 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.map(v => v.toFixed(3)) : value, + }, + ], + }; + chartInstance.setOption(option); + window.addEventListener('resize', function () { + chartInstance.resize(); + }) + }, [count, flag, list]); + console.log(flag); - 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" }} > -

修建

- {/*
{ + 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/public/olMap.js b/web/client/src/sections/quanju/containers/public/olMap.js index 98243455..931e0ab9 100644 --- a/web/client/src/sections/quanju/containers/public/olMap.js +++ b/web/client/src/sections/quanju/containers/public/olMap.js @@ -497,6 +497,8 @@ const OlMap = (props) => { let renderIndex = 0 for (let res of roadRes) { const corData = projectList[renderIndex] + const corProjectRoadReport = roadProjectList.find(d => d.project_name == corData.entryName) + let roadPointPosition = [] if (res) { if (res.status == 200 && res.body && res.body.code == 1) { const data = res.body.data @@ -563,13 +565,25 @@ const OlMap = (props) => { selectStyle: { stroke: { width: 8, color: '#9933FF' } }, layerName: 'geometry_build_road_' + renderIndex }); + + // + console.log(olMap, olMap.olLayer) + let feat = olMap.olLayer.geometryLayers['geometry_build_road_' + renderIndex].getSource().getFeatures() + if (feat.length > 0) { + let start = feat[0].getGeometry().getFirstCoordinate() + // let end = feat[feat.length - 1].getGeometry().getLastCoordinate() + console.log(start); + roadPointPosition = start + } } } } } - if (corData.roadCodeStart) { + if ( + roadPointPosition.length + // || corData.roadCodeStart + ) { // 画对应的巡查上报的点 - const corProjectRoadReport = roadProjectList.find(d => d.project_name == corData.entryName) if (corProjectRoadReport) { const d = corProjectRoadReport olMap.addGeometryLayer({ @@ -587,7 +601,8 @@ const OlMap = (props) => { olMap.addOverlay('pointClickOpen', { id: 'pointClickOpen', offset: [0, 4], // 偏移 - position: [d.longitude, d.latitude], // 坐标 + // position: [d.longitude, d.latitude], // 坐标 + position: roadPointPosition, // position: [115.944220000000, 28.545380000000], autoPan: true, autoPanMargin: 100,