列车曲线图调整
This commit is contained in:
dong
parent
62544cdafb
commit
06850eb38a
@ -137,6 +137,24 @@ export async function setRelayState(data: {
|
||||
return await api.post(`${UriBase}/relay/operation`, data);
|
||||
}
|
||||
|
||||
interface KilometerRange {
|
||||
Coordinate: string;
|
||||
MinCoordinate: number;
|
||||
MaxCoordinate: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取地图公里标范围
|
||||
* @param
|
||||
* @returns
|
||||
*/
|
||||
export async function getMapKilometerRange(
|
||||
id: string
|
||||
): Promise<KilometerRange> {
|
||||
const response = await api.get(`${UriBase}/${id}/getMapKilometerRange`);
|
||||
return response.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* PSL操作
|
||||
*/
|
||||
|
||||
@ -3,39 +3,52 @@
|
||||
seamless
|
||||
title="列车属性曲线图"
|
||||
@show="onDialogShow"
|
||||
:height="510"
|
||||
:height="546"
|
||||
:width="710"
|
||||
>
|
||||
<div style="height: 510px; width: 710px">
|
||||
<div class="overflow-hidden">
|
||||
<q-tabs v-model="tab" dense align="left" @update:model-value="changeTab">
|
||||
<q-tab name="time" label="时间" />
|
||||
<q-tab name="km" label="公里标" />
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
<div
|
||||
id="train-echarts"
|
||||
class="overflow-hidden"
|
||||
style="height: 100%; width: 100%"
|
||||
class="q-pa-sm overflow-hidden"
|
||||
style="height: 510px; width: 710px"
|
||||
></div>
|
||||
</div>
|
||||
</DraggableDialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { watch } from 'vue';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useLineStore } from 'src/stores/line-store';
|
||||
import DraggableDialog from 'src/components/common/DraggableDialog.vue';
|
||||
import * as echarts from 'echarts';
|
||||
import 'default-passive-events';
|
||||
import { date } from 'quasar';
|
||||
import { getMapKilometerRange } from 'src/api/Simulation';
|
||||
|
||||
const lineStore = useLineStore();
|
||||
|
||||
const tab = ref('time');
|
||||
|
||||
let speedList: [Date, number][] = [];
|
||||
let accelerationList: [Date, number][] = [];
|
||||
let tractionForceList: [Date, number][] = [];
|
||||
let brakeForceList: [Date, number][] = [];
|
||||
let kmList: number[] = [];
|
||||
let km_speedList: [number, number][] = [];
|
||||
let maxKm: number;
|
||||
let minKm: number;
|
||||
|
||||
const props = defineProps<{
|
||||
trainId: string;
|
||||
}>();
|
||||
|
||||
function onDialogShow() {
|
||||
getKilometerRange();
|
||||
if (props.trainId) {
|
||||
getDataList();
|
||||
initEcharts();
|
||||
@ -47,6 +60,8 @@ function getDataList() {
|
||||
accelerationList = [];
|
||||
tractionForceList = [];
|
||||
brakeForceList = [];
|
||||
kmList = [];
|
||||
km_speedList = [];
|
||||
lineStore.trainStateMap.forEach((list, key) => {
|
||||
const find = list.find((ii) => {
|
||||
return ii.id == props.trainId;
|
||||
@ -56,11 +71,18 @@ function getDataList() {
|
||||
accelerationList.push([key, find.dynamicState.acceleration]);
|
||||
tractionForceList.push([key, find.vobcState.tractionForce / 100]);
|
||||
brakeForceList.push([key, find.vobcState.brakeForce / 100]);
|
||||
if (!kmList.includes(find.trainKilometer)) {
|
||||
kmList.push(find.trainKilometer);
|
||||
km_speedList.push([find.trainKilometer, find.dynamicState.speed / 100]);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
let series = [
|
||||
type SeriesObj = echarts.SeriesOption & {
|
||||
unit?: string;
|
||||
};
|
||||
let series: SeriesObj[] = [
|
||||
{
|
||||
name: '速度',
|
||||
type: 'line',
|
||||
@ -72,6 +94,7 @@ let series = [
|
||||
name: '加速度',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
yAxisIndex: 1,
|
||||
data: accelerationList,
|
||||
unit: 'm/s',
|
||||
},
|
||||
@ -90,6 +113,32 @@ let series = [
|
||||
unit: 'kn',
|
||||
},
|
||||
];
|
||||
let km_series: SeriesObj[] = [
|
||||
{
|
||||
name: '速度',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: km_speedList,
|
||||
unit: 'km/h',
|
||||
},
|
||||
];
|
||||
|
||||
function trainKilometerFormat(v: number) {
|
||||
const f = v.toFixed();
|
||||
const r = f.split('').reverse();
|
||||
const x = r.slice(0, 3).reverse();
|
||||
const m = r.slice(3, 6).reverse();
|
||||
const k = r.slice(6).reverse();
|
||||
let n = '';
|
||||
if (k.length) {
|
||||
n = `k${k.join('')}+${m.join('')}.${x.join('')}`;
|
||||
} else if (m.length) {
|
||||
n = `${m.join('')}.${x.join('')}`;
|
||||
} else if (x.length) {
|
||||
n = `0.${x.join('')}`;
|
||||
}
|
||||
return n;
|
||||
}
|
||||
|
||||
let myChart: echarts.EChartsType;
|
||||
function initEcharts() {
|
||||
@ -99,7 +148,8 @@ function initEcharts() {
|
||||
renderer: 'canvas',
|
||||
useDirtyRect: false,
|
||||
});
|
||||
const option = {
|
||||
let option: echarts.EChartsOption = {
|
||||
animation: false,
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
@ -139,6 +189,7 @@ function initEcharts() {
|
||||
`;
|
||||
// eslint-disable-next-line
|
||||
params.forEach((item: any, index: number) => {
|
||||
let val = item.value[1].toFixed(2);
|
||||
result +=
|
||||
"<div style='height: 28px;line-height:28px'>" +
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' +
|
||||
@ -147,7 +198,7 @@ function initEcharts() {
|
||||
item.seriesName +
|
||||
' : ' +
|
||||
'<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:bold">' +
|
||||
item.value[1].toFixed(2) +
|
||||
val +
|
||||
' ' +
|
||||
series[index].unit +
|
||||
'</span>' +
|
||||
@ -169,13 +220,106 @@ function initEcharts() {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
boundaryGap: [0, '100%'],
|
||||
// max: 100,
|
||||
boundaryGap: [0, 0.1],
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
name: '加速度 m/s',
|
||||
boundaryGap: [0, 0.4],
|
||||
},
|
||||
],
|
||||
series: series,
|
||||
};
|
||||
|
||||
if (tab.value == 'km') {
|
||||
option = {
|
||||
animation: false,
|
||||
title: {
|
||||
text: '',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// eslint-disable-next-line
|
||||
formatter: function (params: any) {
|
||||
const title = trainKilometerFormat(params[0].value[0]);
|
||||
let result = `<div
|
||||
style="height:100%;
|
||||
min-height:${30 + 28 * params.length}px;
|
||||
width: 200px;
|
||||
background: rgba(255, 255, 255, 0.27);
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="width: 100%;
|
||||
height: 30px;
|
||||
padding-left:10px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
"
|
||||
>
|
||||
${title}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
height: 100%;
|
||||
padding-left:10px;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
"
|
||||
>
|
||||
`;
|
||||
// eslint-disable-next-line
|
||||
params.forEach((item: any, index: number) => {
|
||||
let val = item.value[1].toFixed(2);
|
||||
result +=
|
||||
"<div style='height: 28px;line-height:28px'>" +
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' +
|
||||
item.color +
|
||||
'"></span>' +
|
||||
item.seriesName +
|
||||
' : ' +
|
||||
'<span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:bold">' +
|
||||
val +
|
||||
' ' +
|
||||
km_series[index].unit +
|
||||
'</span>' +
|
||||
'<div style="clear:both"></div>' +
|
||||
'</div>';
|
||||
});
|
||||
result += '</div>';
|
||||
return result;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['速度'],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
min: minKm,
|
||||
max: maxKm,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: km_series,
|
||||
};
|
||||
}
|
||||
myChart.setOption(option);
|
||||
}
|
||||
|
||||
@ -183,7 +327,7 @@ watch(
|
||||
() => lineStore.socketStates,
|
||||
() => {
|
||||
getDataList();
|
||||
myChart?.setOption({
|
||||
let op: echarts.EChartsOption = {
|
||||
series: [
|
||||
{
|
||||
data: speedList,
|
||||
@ -198,8 +342,38 @@ watch(
|
||||
data: brakeForceList,
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
if (tab.value == 'km') {
|
||||
op = {
|
||||
series: [
|
||||
{
|
||||
data: km_speedList,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
myChart?.setOption(op);
|
||||
}
|
||||
);
|
||||
|
||||
function changeTab() {
|
||||
myChart.dispose();
|
||||
initEcharts();
|
||||
}
|
||||
|
||||
function getKilometerRange() {
|
||||
if (lineStore.simulationId) {
|
||||
getMapKilometerRange(lineStore.simulationId)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
const d = (res.MaxCoordinate - res.MinCoordinate) * 0.05;
|
||||
maxKm = res.MaxCoordinate + d;
|
||||
minKm = res.MinCoordinate - d;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user