free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

建设点位根据道路起点

dev
巴林闲侠 1 year ago
parent
5df4062033
commit
f04c791378
2 changed files with 186 additions and 168 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 333
      web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js
  2. 21
      web/client/src/sections/quanju/containers/public/olMap.js

333
web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js
View File

@ -3,180 +3,183 @@ import * as echarts from 'echarts';
import { getdaolutongji } from "../../../../../actions/example" import { getdaolutongji } from "../../../../../actions/example"
const Leftbottomecharts = (props) => { const Leftbottomecharts = (props) => {
const { dispatch } = props const { dispatch } = props
const [list, setList] = useState([]) const [list, setList] = useState([])
const [count, setCount] = useState([]) const [count, setCount] = useState([])
const [value, setValue] = useState([]) const [value, setValue] = useState([])
const [flag, setFlag] = useState(true) const [flag, setFlag] = useState(true)
const [years, setYears] = useState() const [years, setYears] = useState()
useEffect(() => { useEffect(() => {
const res = dispatch(getdaolutongji()).then((res) => { const res = dispatch(getdaolutongji()).then((res) => {
console.log(res); console.log(res);
let listData = [] let listData = []
res.payload.data.construction.map((item, index) => listData.push(item.year)) res.payload.data.construction.map((item, index) => listData.push(item.year))
setCount(res.payload.data.construction.map((item, index) => { setCount(res.payload.data.construction.map((item, index) => {
let count = item.count let count = item.count
listData.forEach((s, i) => { listData.forEach((s, i) => {
if (s == '2022' && i == index) { if (s == '2021' && i == index) {
count = 78.7 count = 78.7
} else if (s == '2023' && i == index) { } else if (s == '2022' && i == index) {
count = 89.7 // count = 78.7
} }
}) else if (s == '2023' && i == index) {
return count count = 89.7
})) }
setList(listData); })
return count
}))
setList(listData);
setValue(res.payload.data.constructionRebuild.map((item, index) => { setValue(res.payload.data.constructionRebuild.map((item, index) => {
return item.count.toFixed(3) return item.count.toFixed(3)
})) }))
// setYears() // setYears()
}); });
}, []) }, [])
// console.log(list, count); // console.log(list, count);
const chartRef = useRef(null); const chartRef = useRef(null);
useEffect(() => { useEffect(() => {
var chartInstance = echarts.init(chartRef.current); var chartInstance = echarts.init(chartRef.current);
const option = { const option = {
title: { title: {
},
tooltip: {
formatter: " {b}年<br/> {c}公里",
trigger: "axis",
axisPointer: {
lineStyle: {
color: "rgba(226,240,255,0.4)",
default: "solid"
},
}, },
}, tooltip: {
legend: { formatter: " {b}年<br/> {c}公里",
icon: "rect", trigger: "axis",
itemWidth: 14, axisPointer: {
itemHeight: 5, lineStyle: {
itemGap: 13, color: "rgba(226,240,255,0.4)",
data: ["移动"], default: "solid"
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: {
yAxis: [ icon: "rect",
{ itemWidth: 14,
// type: "value", itemHeight: 5,
// show: true, itemGap: 13,
// type: "value", data: ["移动"],
splitLine: { right: "4%",
show: true, // textStyle: {
lineStyle: { // fontSize: 12,
color: "rgba(176,215,255,0.2500)", // color: "#F1F1F3",
type: "dashed" // },
}
}, //去除网格线
// nameTextStyle: {
// color: "#abb8ce",
// },
axisLabel: {
color: "rgba(216,240,255,0.8)",
},
axisTick: {
//y轴刻度线
show: false,
},
axisLine: {
// y轴
show: false,
},
}, },
], grid: {
series: [ top: "18%",
{ left: "3%",
// name: "移动", right: "4%",
type: "line", bottom: "3%",
smooth: true, containLabel: 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: [
}; {
chartInstance.setOption(option); type: "category",
window.addEventListener('resize', function () { boundaryGap: true,
chartInstance.resize(); axisTick: {
}) show: false,
}, [count, flag, list]); },
console.log(flag); 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 ( return (
<> <>
<div onClick={() => { <div onClick={() => {
setFlag(true) 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" }} > }} 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" }} >
<p style={{ color: flag == false ? "rgba(216,240,255,0.8000)" : "#fff", fontSize: "14px", lineHeight: "20px" }}>修建</p></div> <p style={{ color: flag == false ? "rgba(216,240,255,0.8000)" : "#fff", fontSize: "14px", lineHeight: "20px" }}>修建</p></div>
{/* <div onClick={() => { {/* <div onClick={() => {
setFlag(false) 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" }}> }} 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" }}>
<p style={{ color: flag == true ? "rgba(216,240,255,0.8000)" : "#fff", fontSize: "0.4vh", lineHeight: "20px" }} >改建</p></div > */} <p style={{ color: flag == true ? "rgba(216,240,255,0.8000)" : "#fff", fontSize: "0.4vh", lineHeight: "20px" }} >改建</p></div > */}
<div ref={chartRef} style={{ <div ref={chartRef} style={{
height: "18vh", width: "100%", position: "absolute", top: "77%" height: "18vh", width: "100%", position: "absolute", top: "77%"
}}></div> }}></div>
</> </>
); );
} }
export default Leftbottomecharts export default Leftbottomecharts

21
web/client/src/sections/quanju/containers/public/olMap.js
View File

@ -497,6 +497,8 @@ const OlMap = (props) => {
let renderIndex = 0 let renderIndex = 0
for (let res of roadRes) { for (let res of roadRes) {
const corData = projectList[renderIndex] const corData = projectList[renderIndex]
const corProjectRoadReport = roadProjectList.find(d => d.project_name == corData.entryName)
let roadPointPosition = []
if (res) { if (res) {
if (res.status == 200 && res.body && res.body.code == 1) { if (res.status == 200 && res.body && res.body.code == 1) {
const data = res.body.data const data = res.body.data
@ -563,13 +565,25 @@ const OlMap = (props) => {
selectStyle: { stroke: { width: 8, color: '#9933FF' } }, selectStyle: { stroke: { width: 8, color: '#9933FF' } },
layerName: 'geometry_build_road_' + renderIndex 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) { if (corProjectRoadReport) {
const d = corProjectRoadReport const d = corProjectRoadReport
olMap.addGeometryLayer({ olMap.addGeometryLayer({
@ -587,7 +601,8 @@ const OlMap = (props) => {
olMap.addOverlay('pointClickOpen', { olMap.addOverlay('pointClickOpen', {
id: 'pointClickOpen', id: 'pointClickOpen',
offset: [0, 4], // 偏移 offset: [0, 4], // 偏移
position: [d.longitude, d.latitude], // 坐标 // position: [d.longitude, d.latitude], // 坐标
position: roadPointPosition,
// position: [115.944220000000, 28.545380000000], // position: [115.944220000000, 28.545380000000],
autoPan: true, autoPan: true,
autoPanMargin: 100, autoPanMargin: 100,

Write Preview
Loading…
Cancel
Save