|
@@ -1,21 +1,20 @@
|
|
|
<script lang="ts" setup>
|
|
|
import * as echarts from "echarts";
|
|
|
import Chart from "@/components/Chart.vue";
|
|
|
-import {getCurrentInstance, onMounted, reactive, ref} from "vue";
|
|
|
+import {onMounted, reactive, ref} from "vue";
|
|
|
import section_63304650 from '@/assets/json/63304650_section.json'
|
|
|
import section_63304700 from '@/assets/json/63304700_section.json'
|
|
|
import water_area_63304650 from '@/assets/json/63304650_water_area.json'
|
|
|
import water_area_63304700 from '@/assets/json/63304700_water_area.json'
|
|
|
import {useStationStore} from '@/stores/station'
|
|
|
-import {CEMENT_COLOR} from "@/assets/scripts/base64image";
|
|
|
+import {CEMENT_COLOR, CLAY} from "@/assets/scripts/base64image";
|
|
|
import ColorTag from "@/components/tag/ColorTag.vue";
|
|
|
import {useRoute} from "vue-router";
|
|
|
|
|
|
const route = useRoute()
|
|
|
const store = useStationStore()
|
|
|
-const {props} = getCurrentInstance()
|
|
|
const chartRef = ref(null)
|
|
|
-const totalValue = reactive({'水面积': 0, '水位': 0, '水面宽': 111, '高程': 111})
|
|
|
+const totalValue = reactive({'水面积': 0, '水位': 0, '水面宽': (route.params.stcd == '63304650') ? '48.5' : '83.0'})
|
|
|
let start = 0
|
|
|
let end = 100
|
|
|
let data = null;
|
|
@@ -40,10 +39,7 @@ function calculateWaterArea() {
|
|
|
}
|
|
|
|
|
|
async function reloadChart(data) {
|
|
|
- totalValue['水面宽'] = data[data.length - 1].distance
|
|
|
- totalValue['高程'] = data[0].elevation
|
|
|
- totalValue['水位'] = await store.getZ()
|
|
|
- calculateWaterArea()
|
|
|
+
|
|
|
|
|
|
const option = {
|
|
|
tooltip: {
|
|
@@ -51,18 +47,20 @@ async function reloadChart(data) {
|
|
|
formatter: (params) => {
|
|
|
let str = `起点距: ${params[0].axisValue} m<br/>`;
|
|
|
params.forEach((item, idx) => {
|
|
|
- str += `${item.marker}${item.seriesName}: ${item.data}`
|
|
|
- switch (idx) {
|
|
|
- case 0:
|
|
|
- str += 'm';
|
|
|
- break;
|
|
|
- case 1:
|
|
|
- str += 'm';
|
|
|
- break;
|
|
|
- default:
|
|
|
- str += 'm'
|
|
|
+ if (idx !== 2) {
|
|
|
+ str += `${item.marker}${item.seriesName}: ${item.data}`
|
|
|
+ switch (idx) {
|
|
|
+ case 0:
|
|
|
+ str += 'm';
|
|
|
+ break;
|
|
|
+ case 1:
|
|
|
+ str += 'm';
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ str += 'm'
|
|
|
+ }
|
|
|
+ str += idx === params.length - 1 ? '' : '<br/>'
|
|
|
}
|
|
|
- str += idx === params.length - 1 ? '' : '<br/>'
|
|
|
})
|
|
|
return str
|
|
|
}
|
|
@@ -81,7 +79,7 @@ async function reloadChart(data) {
|
|
|
formatter: value => Number(value).toFixed(1),
|
|
|
},
|
|
|
boundaryGap: false,
|
|
|
- data: data.map(d => d.distance)
|
|
|
+ data: data.map(d => d[0])
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
@@ -112,7 +110,10 @@ async function reloadChart(data) {
|
|
|
// sampling: 'lttb',
|
|
|
smooth: true, //是否平滑曲线显示
|
|
|
itemStyle: {
|
|
|
- color: '#00ccff'
|
|
|
+ color: '#00ccff',
|
|
|
+ lineStyle: {
|
|
|
+ width: 0
|
|
|
+ }
|
|
|
},
|
|
|
areaStyle: {
|
|
|
origin: 'start',
|
|
@@ -133,27 +134,49 @@ async function reloadChart(data) {
|
|
|
name: '高程',
|
|
|
type: 'line',
|
|
|
symbol: 'none',
|
|
|
- // sampling: 'lttb',
|
|
|
smooth: true, //是否平滑曲线显示
|
|
|
itemStyle: {
|
|
|
- color: '#7999a3'
|
|
|
- // color: '#75604b'
|
|
|
+ color: '#75604b',
|
|
|
+ lineStyle: {
|
|
|
+ width: 0
|
|
|
+ }
|
|
|
},
|
|
|
areaStyle: {
|
|
|
+ opacity: 1,
|
|
|
+ origin: 'start',
|
|
|
+ color: {
|
|
|
+ image: CLAY,
|
|
|
+ repeat: 'repeat'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data.map(d => d[2])
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '高程',
|
|
|
+ type: 'line',
|
|
|
+ symbol: 'none',
|
|
|
+ itemStyle: {
|
|
|
+ color: '#7999a3',
|
|
|
+ lineStyle: {
|
|
|
+ width: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ opacity: 1,
|
|
|
origin: 'start',
|
|
|
color: {
|
|
|
image: CEMENT_COLOR,
|
|
|
repeat: 'repeat'
|
|
|
}
|
|
|
},
|
|
|
- data: data.map(d => (d.elevation).toFixed(2))
|
|
|
- }
|
|
|
+ data: data.map(d => d[1])
|
|
|
+ },
|
|
|
]
|
|
|
};
|
|
|
chartRef.value.loadChart(option)
|
|
|
}
|
|
|
|
|
|
-onMounted(() => {
|
|
|
+onMounted(async () => {
|
|
|
if (route.params.stcd == '63304650') {
|
|
|
data = section_63304650
|
|
|
waterAreaData = water_area_63304650
|
|
@@ -161,6 +184,8 @@ onMounted(() => {
|
|
|
data = section_63304700
|
|
|
waterAreaData = water_area_63304700
|
|
|
}
|
|
|
+ totalValue['水位'] = await store.getZ()
|
|
|
+ calculateWaterArea()
|
|
|
reloadChart(data)
|
|
|
})
|
|
|
</script>
|