tms页面数据修改
This commit is contained in:
Yuan
parent
ef230ae278
commit
29197c56ee
@ -1,304 +1,430 @@
|
||||
<template>
|
||||
<div id="container">
|
||||
<div id="content">
|
||||
<table id="trainInfo">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2">运行</td>
|
||||
<td>网压</td>
|
||||
<td>网流</td>
|
||||
<td>速度</td>
|
||||
<td>牵引/制动级位</td>
|
||||
<td>里程标</td>
|
||||
<td>下一站</td>
|
||||
<td>目的站</td>
|
||||
<td rowspan="2">2022/02/02</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ trainInfo.voltage }}V</td>
|
||||
<td>{{ trainInfo.current }}A</td>
|
||||
<td>{{ trainInfo.speed }} km/h</td>
|
||||
<td :class="{ bg_g: trainInfo.tractionPercent > 0, bg_r: trainInfo.tractionPercent < 0 }">
|
||||
{{ Math.abs(trainInfo.tractionPercent) }}%
|
||||
</td>
|
||||
<td>{{ trainInfo.mileage || '--' }}</td>
|
||||
<td>{{ trainInfo.nextStation }}</td>
|
||||
<td>{{ trainInfo.destination }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<img id="trainImg" :src="localStatic + '/jl3d/tms/PMsa2.png'" />
|
||||
<table id="carInfo">
|
||||
<tbody>
|
||||
<tr v-for="([k, v], i) in Object.entries({ 车号: [0, 1, 2, 3, 4, 5], ...carInfo })" :key="k">
|
||||
<td>{{ k }}</td>
|
||||
<template v-if="k === '车号'">
|
||||
<td v-for="(item, j) in v" :key="j">{{ j + 1 }}</td>
|
||||
</template>
|
||||
<template v-else-if="k === '辅助状态'">
|
||||
<td :class="{ bg_g: item === 'ON', bg_r: item === 'OFF' }" v-for="(item, j) in v" :key="j">
|
||||
{{ `${item === '--' ? '' : '辅助'}${item}` }}
|
||||
</td>
|
||||
</template>
|
||||
<template v-else-if="k === '牵引系统状态'">
|
||||
<td :class="{ bg_g: item !== 0 }" v-for="(item, j) in v" :key="j">
|
||||
{{ item === 0 ? '--' : `${item} A` }}
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '制动缸压力'">
|
||||
<td v-for="(item, j) in v" :key="j">
|
||||
<div class="multi">
|
||||
<div style="width: 50%">{{ item }}</div>
|
||||
<div style="width: 50%">{{ item }}</div>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
<template v-else-if="k === '转向架切除'">
|
||||
<td v-for="(item, j) in v" :key="j">
|
||||
<div class="multi">
|
||||
<div style="width: 50%">{{ item[0] }}</div>
|
||||
<div style="width: 50%">{{ item[1] }}</div>
|
||||
</div>
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '1侧门'">
|
||||
<td v-for="j in 6" :key="j">
|
||||
<div class="multi">
|
||||
<div :class="v ? 'bg_g' : 'bg_r'" style="width: 25%">{{ j < 3 ? 1 : 8 }}</div>
|
||||
<div :class="v ? 'bg_g' : 'bg_r'" style="width: 25%">{{ j < 3 ? 3 : 6 }}</div>
|
||||
<div :class="v ? 'bg_g' : 'bg_r'" style="width: 25%">{{ j < 3 ? 5 : 4 }}</div>
|
||||
<div :class="v ? 'bg_g' : 'bg_r'" style="width: 25%">{{ j < 3 ? 7 : 2 }}</div>
|
||||
</div>
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '2侧门'">
|
||||
<td v-for="j in 6" :key="j">
|
||||
<div class="multi">
|
||||
<div :class="v ? 'bg_g' : 'bg_r'" style="width: 25%">{{ j < 3 ? 2 : 7 }}</div>
|
||||
<div :class="v ? 'bg_g' : 'bg_r'" style="width: 25%">{{ j < 3 ? 4 : 5 }}</div>
|
||||
<div :class="v ? 'bg_g' : 'bg_r'" style="width: 25%">{{ j < 3 ? 6 : 3 }}</div>
|
||||
<div :class="v ? 'bg_g' : 'bg_r'" style="width: 25%">{{ j < 3 ? 8 : 1 }}</div>
|
||||
</div>
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '交流输出电压'">
|
||||
<td v-for="(item, j) in v" :key="j">{{ item }}</td></template
|
||||
>
|
||||
<template v-else-if="k === '空压机状态'">
|
||||
<td v-for="(item, j) in v" :key="j">{{ item }}</td></template
|
||||
>
|
||||
<template v-else-if="k === '停放制动施加状态'">
|
||||
<td :class="Number(item) < 1 ? 'bg_r' : 'bg_g'" v-for="(item, j) in v" :key="j">
|
||||
{{ item }} bar
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === 'HSCB状态'">
|
||||
<td :class="{ bg_g: item }" v-for="(item, j) in v" :key="j">{{ item ? '' : '-- --' }}</td></template
|
||||
>
|
||||
<template v-else-if="k === '牵引脉冲使能'">
|
||||
<td :class="{ bg_g: item }" v-for="(item, j) in v" :key="j">{{ item ? '' : '-- --' }}</td></template
|
||||
>
|
||||
<td v-if="i === 0" :rowspan="Object.keys(carInfo).length + 1">
|
||||
<div class="speedBg">
|
||||
<img :src="`${localStatic}/jl3d/tms/PMS3.png`" />
|
||||
<div
|
||||
id="accBar"
|
||||
:style="{
|
||||
transform: `scaleY(${Math.abs(trainInfo.tractionPercent) / 100})`,
|
||||
}"
|
||||
:class="{ bg_g: trainInfo.tractionPercent > 0, bg_r: trainInfo.tractionPercent < 0 }"
|
||||
></div>
|
||||
<div class="gap"></div>
|
||||
<div id="speedBar" :style="{ transform: `scaleY(${trainInfo.speed / 80})` }"></div>
|
||||
</div>
|
||||
<div>{{ trainInfo.speed }} km/h</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container">
|
||||
<div id="content">
|
||||
<table id="trainInfo">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td rowspan="2">运行</td>
|
||||
<td>网压</td>
|
||||
<td>网流</td>
|
||||
<td>速度</td>
|
||||
<td>牵引/制动级位</td>
|
||||
<td>里程标</td>
|
||||
<td>下一站</td>
|
||||
<td>目的站</td>
|
||||
<td rowspan="2">2022/02/02</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ trainInfo.voltage }}V</td>
|
||||
<td>{{ trainInfo.current }}A</td>
|
||||
<td>{{ trainInfo.speed }} km/h</td>
|
||||
<td
|
||||
:class="{
|
||||
bg_g: trainInfo.tractionPercent > 0,
|
||||
bg_r: trainInfo.tractionPercent < 0
|
||||
}"
|
||||
>
|
||||
{{ Math.abs(trainInfo.tractionPercent) }}%
|
||||
</td>
|
||||
<td>{{ trainInfo.mileage || "--" }}</td>
|
||||
<td>{{ trainInfo.nextStation }}</td>
|
||||
<td>{{ trainInfo.destination }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<img id="trainImg" :src="localStatic + '/jl3d/tms/PMsa2.png'" />
|
||||
<table id="carInfo">
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="([k, v], i) in Object.entries({
|
||||
车号: [0, 1, 2, 3, 4, 5],
|
||||
...carInfo
|
||||
})"
|
||||
:key="k"
|
||||
>
|
||||
<td>{{ k }}</td>
|
||||
<template v-if="k === '车号'">
|
||||
<td v-for="(item, j) in v" :key="j">{{ j + 1 }}</td>
|
||||
</template>
|
||||
<template v-else-if="k === '辅助状态'">
|
||||
<td
|
||||
:class="{
|
||||
bg_g: item === 'ON',
|
||||
bg_r: item === 'OFF'
|
||||
}"
|
||||
v-for="(item, j) in v"
|
||||
:key="j"
|
||||
>
|
||||
{{ `${item === "--" ? "" : "辅助"}${item}` }}
|
||||
</td>
|
||||
</template>
|
||||
<template v-else-if="k === '牵引系统状态'">
|
||||
<td
|
||||
:class="{ bg_g: item !== 0 }"
|
||||
v-for="(item, j) in v"
|
||||
:key="j"
|
||||
>
|
||||
{{ item === 0 ? "--" : `${item} A` }}
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '制动缸压力'">
|
||||
<td v-for="(item, j) in v" :key="j">
|
||||
<div class="multi">
|
||||
<div style="width: 50%">{{ item }}</div>
|
||||
<div style="width: 50%">{{ item }}</div>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
<template v-else-if="k === '转向架切除'">
|
||||
<td v-for="(item, j) in v" :key="j">
|
||||
<div class="multi">
|
||||
<div style="width: 50%">{{ item[0] }}</div>
|
||||
<div style="width: 50%">{{ item[1] }}</div>
|
||||
</div>
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '1侧门'">
|
||||
<td v-for="j in 6" :key="j">
|
||||
<div class="multi">
|
||||
<div
|
||||
:class="v ? 'bg_r' : 'bg_g'"
|
||||
style="width: 25%"
|
||||
>
|
||||
{{ j < 3 ? 1 : 8 }}
|
||||
</div>
|
||||
<div
|
||||
:class="v ? 'bg_r' : 'bg_g'"
|
||||
style="width: 25%"
|
||||
>
|
||||
{{ j < 3 ? 3 : 6 }}
|
||||
</div>
|
||||
<div
|
||||
:class="v ? 'bg_r' : 'bg_g'"
|
||||
style="width: 25%"
|
||||
>
|
||||
{{ j < 3 ? 5 : 4 }}
|
||||
</div>
|
||||
<div
|
||||
:class="v ? 'bg_r' : 'bg_g'"
|
||||
style="width: 25%"
|
||||
>
|
||||
{{ j < 3 ? 7 : 2 }}
|
||||
</div>
|
||||
</div>
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '2侧门'">
|
||||
<td v-for="j in 6" :key="j">
|
||||
<div class="multi">
|
||||
<div
|
||||
:class="v ? 'bg_r' : 'bg_g'"
|
||||
style="width: 25%"
|
||||
>
|
||||
{{ j < 3 ? 2 : 7 }}
|
||||
</div>
|
||||
<div
|
||||
:class="v ? 'bg_r' : 'bg_g'"
|
||||
style="width: 25%"
|
||||
>
|
||||
{{ j < 3 ? 4 : 5 }}
|
||||
</div>
|
||||
<div
|
||||
:class="v ? 'bg_r' : 'bg_g'"
|
||||
style="width: 25%"
|
||||
>
|
||||
{{ j < 3 ? 6 : 3 }}
|
||||
</div>
|
||||
<div
|
||||
:class="v ? 'bg_r' : 'bg_g'"
|
||||
style="width: 25%"
|
||||
>
|
||||
{{ j < 3 ? 8 : 1 }}
|
||||
</div>
|
||||
</div>
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '交流输出电压'">
|
||||
<td v-for="(item, j) in v" :key="j">
|
||||
{{ item }}
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '空压机状态'">
|
||||
<td v-for="(item, j) in v" :key="j">
|
||||
{{ item }}
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '停放制动施加状态'">
|
||||
<td
|
||||
:class="Number(item) < 1 ? 'bg_r' : 'bg_g'"
|
||||
v-for="(item, j) in v"
|
||||
:key="j"
|
||||
>
|
||||
{{ item }} bar
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === 'HSCB状态'">
|
||||
<td
|
||||
:class="{ bg_g: item }"
|
||||
v-for="(item, j) in v"
|
||||
:key="j"
|
||||
>
|
||||
{{ item ? "" : "-- --" }}
|
||||
</td></template
|
||||
>
|
||||
<template v-else-if="k === '牵引脉冲使能'">
|
||||
<td
|
||||
:class="{ bg_g: item }"
|
||||
v-for="(item, j) in v"
|
||||
:key="j"
|
||||
>
|
||||
{{ item ? "" : "-- --" }}
|
||||
</td></template
|
||||
>
|
||||
<td
|
||||
v-if="i === 0"
|
||||
:rowspan="Object.keys(carInfo).length + 1"
|
||||
>
|
||||
<div class="speedBg">
|
||||
<img
|
||||
:src="`${localStatic}/jl3d/tms/PMS3.png`"
|
||||
/>
|
||||
<div
|
||||
id="accBar"
|
||||
:style="{
|
||||
transform: `scaleY(${Math.abs(
|
||||
trainInfo.tractionPercent
|
||||
) / 100})`
|
||||
}"
|
||||
:class="{
|
||||
bg_g: trainInfo.tractionPercent > 0,
|
||||
bg_r: trainInfo.tractionPercent < 0
|
||||
}"
|
||||
></div>
|
||||
<div class="gap"></div>
|
||||
<div
|
||||
id="speedBar"
|
||||
:style="{
|
||||
transform: `scaleY(${trainInfo.speed /
|
||||
80})`
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<div>{{ trainInfo.speed }} km/h</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { JL3D_LOCAL_STATIC } from '@/api/jlmap3d/assets3d.js';
|
||||
import { creatSubscribe, clearSubscribe, getTopic } from '@/utils/stomp';
|
||||
import { getToken } from '@/utils/auth';
|
||||
import { JL3D_LOCAL_STATIC } from "@/api/jlmap3d/assets3d.js";
|
||||
import { creatSubscribe, clearSubscribe, getTopic } from "@/utils/stomp";
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
let timer = null;
|
||||
|
||||
export default {
|
||||
name: 'tmsPage',
|
||||
data() {
|
||||
return {
|
||||
localStatic: JL3D_LOCAL_STATIC,
|
||||
trainInfo: {
|
||||
voltage: 1600,
|
||||
current: 317,
|
||||
speed: 0,
|
||||
tractionPercent: 0,
|
||||
mileage: '--',
|
||||
nextStation: '',
|
||||
destination: '',
|
||||
},
|
||||
carInfo: {
|
||||
辅助状态: ['ON', '--', 'OFF', '--', '--', 'ON'],
|
||||
牵引系统状态: [0, 58, 47, 52, 50, 0],
|
||||
制动缸压力: [0, 0, 0, 0, 0, 0],
|
||||
转向架切除: [[' ', ' '], [' ', ' '], [' ', ' '], [' ', ' '], [' ', ' '], [' ', ' ']],
|
||||
'1侧门': true,
|
||||
'2侧门': true,
|
||||
交流输出电压: [378, '--', '--', '--', '--', 378],
|
||||
空压机状态: ['--', '--', '', '', '--', '--'],
|
||||
停放制动施加状态: [7.85, 7.85, 7.85, 7.85, 7.85, 7.85],
|
||||
HSCB状态: [false, true, true, true, true, false],
|
||||
牵引脉冲使能: [true, false, false, false, false, true],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.group = this.$route.query.group;
|
||||
this.subscribe();
|
||||
this.setTractionWave(true);
|
||||
},
|
||||
unmounted() {
|
||||
this.unsubscribe();
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
subscribe() {
|
||||
const header = { group: this.group || '', 'X-Token': getToken() };
|
||||
creatSubscribe(getTopic('TMS', this.group), header, msg => {
|
||||
let res = JSON.parse(msg.body);
|
||||
console.log(res);
|
||||
if (!res) return;
|
||||
name: "tmsPage",
|
||||
data() {
|
||||
return {
|
||||
localStatic: JL3D_LOCAL_STATIC,
|
||||
trainInfo: {
|
||||
voltage: 1600,
|
||||
current: 317,
|
||||
speed: 0,
|
||||
tractionPercent: 0,
|
||||
mileage: "--",
|
||||
nextStation: "",
|
||||
destination: ""
|
||||
},
|
||||
carInfo: {
|
||||
辅助状态: ["ON", "--", "OFF", "--", "--", "ON"],
|
||||
牵引系统状态: [0, 58, 47, 52, 50, 0],
|
||||
制动缸压力: [0, 0, 0, 0, 0, 0],
|
||||
转向架切除: [
|
||||
[" ", " "],
|
||||
[" ", " "],
|
||||
[" ", " "],
|
||||
[" ", " "],
|
||||
[" ", " "],
|
||||
[" ", " "]
|
||||
],
|
||||
"1侧门": false,
|
||||
"2侧门": false,
|
||||
交流输出电压: [378, "--", "--", "--", "--", 378],
|
||||
空压机状态: ["--", "--", "", "", "--", "--"],
|
||||
停放制动施加状态: [7.85, 7.85, 7.85, 7.85, 7.85, 7.85],
|
||||
HSCB状态: [false, true, true, true, true, false],
|
||||
牵引脉冲使能: [true, false, false, false, false, true]
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.group = this.$route.query.group;
|
||||
this.subscribe();
|
||||
this.setTractionWave(true);
|
||||
},
|
||||
unmounted() {
|
||||
this.unsubscribe();
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
subscribe() {
|
||||
const header = { group: this.group || "", "X-Token": getToken() };
|
||||
creatSubscribe(getTopic("TMS", this.group), header, msg => {
|
||||
let res = JSON.parse(msg.body);
|
||||
console.log(res);
|
||||
console.log(res.parkingBreakPressure);
|
||||
if (!res) return;
|
||||
|
||||
if (res.current) this.trainInfo.current = res.current;
|
||||
if (res.voltage) this.trainInfo.voltage = res.voltage;
|
||||
if (res.speed) this.trainInfo.speed = res.speed.toFixed(2);
|
||||
if (res.tbLevelPercent) this.trainInfo.tractionPercent = res.tbLevelPercent;
|
||||
if (res.mileage) this.trainInfo.mileage = res.mileage;
|
||||
if (res.nextStation) this.trainInfo.nextStation = res.nextStation;
|
||||
if (res.destination) this.trainInfo.destination = res.destination;
|
||||
if (res.pressureOfBrakeCylinder)
|
||||
this.carInfo.制动缸压力 = Array(6).fill(res.pressureOfBrakeCylinder.toFixed(2));
|
||||
if (res.oneSideDoorOpened) this.carInfo['1侧门'] = res.oneSideDoorOpened;
|
||||
if (res.twoSideDoorOpened) this.carInfo['2侧门'] = res.twoSideDoorOpened;
|
||||
if (res.parkingBreakPressure) this.carInfo.停放制动施加状态 = Array(6).fill(res.parkingBreakPressure);
|
||||
this.setTractionWave(res.traction);
|
||||
});
|
||||
},
|
||||
unsubscribe() {
|
||||
clearSubscribe(getTopic('TMS', this.group));
|
||||
},
|
||||
setTractionWave(flag) {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
if (flag) {
|
||||
timer = setInterval(() => {
|
||||
this.carInfo.牵引系统状态 = Array(6)
|
||||
.fill(true)
|
||||
.map(b => (b ? (Math.random() * 10 + 46).toFixed() : '--'));
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
},
|
||||
if (res.current !== undefined)
|
||||
this.trainInfo.current = res.current;
|
||||
if (res.voltage !== undefined)
|
||||
this.trainInfo.voltage = res.voltage;
|
||||
if (res.speed !== undefined)
|
||||
this.trainInfo.speed = res.speed.toFixed(2);
|
||||
if (res.tbLevelPercent !== undefined)
|
||||
this.trainInfo.tractionPercent = res.tbLevelPercent;
|
||||
if (res.mileage !== undefined)
|
||||
this.trainInfo.mileage = res.mileage;
|
||||
if (res.nextStation !== undefined)
|
||||
this.trainInfo.nextStation = res.nextStation;
|
||||
if (res.destination !== undefined)
|
||||
this.trainInfo.destination = res.destination;
|
||||
if (res.pressureOfBrakeCylinder !== undefined)
|
||||
this.carInfo.制动缸压力.splice(
|
||||
0,
|
||||
6,
|
||||
...Array(6).fill(res.pressureOfBrakeCylinder.toFixed(2))
|
||||
);
|
||||
if (res.oneSideDoorOpened !== undefined)
|
||||
this.carInfo["1侧门"] = res.oneSideDoorOpened;
|
||||
if (res.twoSideDoorOpened !== undefined)
|
||||
this.carInfo["2侧门"] = res.twoSideDoorOpened;
|
||||
if (res.parkingBreakPressure !== undefined)
|
||||
this.carInfo.停放制动施加状态.splice(
|
||||
0,
|
||||
6,
|
||||
...Array(6).fill(res.parkingBreakPressure)
|
||||
);
|
||||
this.setTractionWave(res.traction);
|
||||
});
|
||||
},
|
||||
unsubscribe() {
|
||||
clearSubscribe(getTopic("TMS", this.group));
|
||||
},
|
||||
setTractionWave(flag) {
|
||||
if (timer) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
if (flag) {
|
||||
timer = setInterval(() => {
|
||||
this.carInfo.牵引系统状态 = Array(6)
|
||||
.fill(true)
|
||||
.map(b =>
|
||||
b ? (Math.random() * 10 + 46).toFixed() : "--"
|
||||
);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
#container {
|
||||
background: #000;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.bg_g {
|
||||
background: #0f0;
|
||||
color: #000;
|
||||
}
|
||||
.bg_r {
|
||||
background: #f00;
|
||||
}
|
||||
#content {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
table {
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
td {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
#trainInfo {
|
||||
height: 25%;
|
||||
}
|
||||
#trainImg {
|
||||
width: 75%;
|
||||
height: 10%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#carInfo {
|
||||
height: 58%;
|
||||
td {
|
||||
width: 12.5%;
|
||||
padding: 0;
|
||||
.multi {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
& > div {
|
||||
border-right: 1px solid #fff;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& :last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.speedBg {
|
||||
height: 90%;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
}
|
||||
background: #000;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.bg_g {
|
||||
background: #0f0;
|
||||
color: #000;
|
||||
}
|
||||
.bg_r {
|
||||
background: #f00;
|
||||
}
|
||||
#content {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
table {
|
||||
width: 100%;
|
||||
font-size: 1.4rem;
|
||||
text-align: center;
|
||||
border-collapse: collapse;
|
||||
td {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
#trainInfo {
|
||||
height: 25%;
|
||||
}
|
||||
#trainImg {
|
||||
width: 75%;
|
||||
height: 10%;
|
||||
margin-top: 5px;
|
||||
}
|
||||
#carInfo {
|
||||
height: 58%;
|
||||
td {
|
||||
width: 12.5%;
|
||||
padding: 0;
|
||||
.multi {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
& > div {
|
||||
border-right: 1px solid #fff;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
& :last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.speedBg {
|
||||
height: 90%;
|
||||
padding: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
}
|
||||
.gap {
|
||||
width: 4%;
|
||||
}
|
||||
div {
|
||||
width: 23%;
|
||||
transform-origin: bottom;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
#speedBar {
|
||||
background: #0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
width: 23%;
|
||||
transform-origin: bottom;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
#speedBar {
|
||||
background: #0ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user