From 29197c56ee4a3436406b1992829f09ab03fa8e17 Mon Sep 17 00:00:00 2001
From: Yuan <yuanliye@joylink.club>
Date: Thu, 30 Nov 2023 15:55:14 +0800
Subject: [PATCH] =?UTF-8?q?tms=E9=A1=B5=E9=9D=A2=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/jlmap3d/drive/sceneview/tmsPage.vue | 696 +++++++++++-------
 1 file changed, 411 insertions(+), 285 deletions(-)

diff --git a/src/views/jlmap3d/drive/sceneview/tmsPage.vue b/src/views/jlmap3d/drive/sceneview/tmsPage.vue
index 72e3d9d87..a1462ca8a 100644
--- a/src/views/jlmap3d/drive/sceneview/tmsPage.vue
+++ b/src/views/jlmap3d/drive/sceneview/tmsPage.vue
@@ -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>