界面提交

train-web/src/assets/icons/list.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700914243166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2645" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M128 256h64V192H128zM320 256h576V192H320zM128 544h64v-64H128zM320 544h576v-64H320zM128 832h64v-64H128zM320 832h576v-64H320z" fill="#181818" p-id="2646"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700914243166" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2645" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M128 256h64V192H128zM320 256h576V192H320zM128 544h64v-64H128zM320 544h576v-64H320zM128 832h64v-64H128zM320 832h576v-64H320z"  p-id="2646"></path></svg>

train-web/src/pages/device/DeviceAfc.vue

@@ -1,5 +1,98 @@
 <template>
-  <h2>AFC设备仿真</h2>
+  <div class="box">
+    <div class="box-tvm-left">
+      <icon-svg icon-class="客服中心" size="30px" color="#000"/>
+      <icon-svg icon-class="客服中心" size="30px" color="#000" style="margin-top: 3px"/>
+    </div>
+    <div class="box-tvm-right">
+      <icon-svg icon-class="客服中心" size="30px" color="#000"/>
+      <icon-svg icon-class="客服中心" size="30px" color="#000" style="margin-top: 3px"/>
+    </div>
+    <div class="box-ticket-left">
+      <div>
+        <icon-svg icon-class="售票机" size="30px" color="#40BE00"/>
+        <span>TVM01</span>
+      </div>
+      <div>
+        <icon-svg icon-class="售票机" size="30px" color="#40BE00" style="margin-top: 3px"/>
+        <span>TVM02</span>
+      </div>
+    </div>
+    <div class="box-ticket-right">
+      <div>
+        <span>TVM03</span>
+        <icon-svg icon-class="售票机" size="30px" color="#40BE00"/>
+      </div>
+      <div>
+        <span>TVM04</span>
+        <icon-svg icon-class="售票机" size="30px" color="#40BE00" style="margin-top: 3px"/>
+      </div>
+    </div>
+    <div class="box-gate-left">
+      <icon-svg icon-class="闸机" size="30px" color="#00FF00"/>
+      <icon-svg icon-class="闸机" size="30px" color="#00FF00"/>
+      <icon-svg icon-class="闸机" size="30px" color="#00FF00"/>
+    </div>
+    <div class="box-gate-right">
+      <icon-svg icon-class="闸机" size="30px" color="#00FF00"/>
+      <icon-svg icon-class="闸机" size="30px" color="#00FF00"/>
+      <icon-svg icon-class="闸机" size="30px" color="#00FF00"/>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
 </script>
+<style scoped lang="scss">
+.box {
+  width: 180vh;
+  height: 80vh;
+  background-image: url('@/assets/images/backage-afc.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  position: relative;
+
+  .box-tvm-left {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 28vh;
+    top: 37vh;
+  }
+
+  .box-tvm-right {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 143vh;
+    top: 37.5vh;
+  }
+
+  .box-ticket-left {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    left: 6vh;
+    top: 37vh;
+  }
+
+  .box-ticket-right {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    right: 10vh;
+    top: 37vh;
+  }
+
+  .box-gate-left {
+    position: absolute;
+    left: 65.5vh;
+    top: 48.5vh;
+  }
+
+  .box-gate-right {
+    position: absolute;
+    left: 97.5vh;
+    top: 48.5vh;
+  }
+}
+</style>

train-web/src/pages/device/DeviceDoor.vue

@@ -1,3 +1,123 @@
 <template>
-  <h2>站台门设备仿真</h2>
+  <div class="box">
+    <div class="box-up">
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+    </div>
+    <div class="box-body">
+      <div>
+
+      </div>
+      <div>
+
+      </div>
+      <div>
+
+      </div>
+    </div>
+    <div class="box-down">
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="车厢" color="#000" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+      <icon-svg icon-class="屏蔽门" color="#42BF01" size="2em"/>
+    </div>
+  </div>
 </template>
+<style scoped lang="scss">
+.box {
+  width: 100%;
+  height: 80vh;
+  background-color: #A7C0DF;
+  border: 1px solid rgba(0, 0, 0, 0.98);
+
+  .box-up, .box-down {
+    display: flex;
+    justify-content: center;
+  }
+
+  .box-up {
+    margin-top: 10vh;
+  }
+
+  .box-body {
+    width: 100%;
+    height: 35vh;
+    margin: 5vh 0;
+    display: flex;
+    justify-content: space-evenly;
+
+    > div {
+      width: 30vh;
+      border: 1px solid rgba(0, 0, 0, 0.98);
+    }
+  }
+}
+</style>
+<script setup lang="ts">
+</script>

train-web/src/pages/device/DeviceElevator.vue

@@ -1,5 +1,64 @@
 <template>
-  <h2>电扶梯设备仿真</h2>
+  <div class="box">
+    <icon-svg class="elevator-1" icon-class="电梯" size="100px" color="#000"/>
+    <icon-svg class="elevator-2" icon-class="电梯" size="100px" color="#000"/>
+    <icon-svg class="elevator-3" icon-class="电扶梯" size="120px" color="#000"/>
+    <icon-svg class="elevator-4" icon-class="电扶梯" size="120px" color="#000"/>
+    <icon-svg class="elevator-5" icon-class="电扶梯" size="120px" color="#000"/>
+    <icon-svg class="elevator-6" icon-class="电扶梯" size="120px" color="#000"/>
+    <icon-svg class="elevator-7" icon-class="电扶梯" size="120px" color="#000"/>
+  </div>
 </template>
 <script setup lang="ts">
 </script>
+<style scoped lang="scss">
+.box {
+  height: 100vh;
+  width: 180vh;
+  background-image: url('@/assets/images/backage-elevator.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  position: relative;
+
+  .elevator-1 {
+    position: absolute;
+    left: 54vh;
+    top: 44vh;
+  }
+  .elevator-2 {
+    position: absolute;
+    left: 80vh;
+    top: 63vh;
+  }
+  .elevator-3 {
+    position: absolute;
+    left: 60vh;
+    top: 62vh;
+  }
+  .elevator-4 {
+    position: absolute;
+    left: 100vh;
+    top: 62vh;
+  }
+  .elevator-5 {
+    position: absolute;
+    left: 28vh;
+    top: 42vh;
+  }
+  .elevator-5 {
+    position: absolute;
+    left: 28vh;
+    top: 42vh;
+  }
+  .elevator-6 {
+    position: absolute;
+    left: 145vh;
+    top: 42vh;
+  }
+  .elevator-7 {
+    position: absolute;
+    left: 110vh;
+    top: 8vh;
+  }
+}
+</style>

train-web/src/pages/device/DeviceWater.vue

@@ -1,5 +1,15 @@
 <template>
-  <h2>给排水设备仿真</h2>
+  <div class="box">
+    <h2>给排水设备仿真</h2>
+  </div>
 </template>
 <script setup lang="ts">
 </script>
+<style scoped lang="scss">
+.box {
+  width: 100%;
+  height: 80vh;
+  background-color: #A7C0DF;
+  border: 1px solid rgba(0, 0, 0, 0.98);
+}
+</style>

train-web/src/pages/situation/index.vue

@@ -1,6 +1,18 @@
 <template>
-  <h2>场景态势智能体仿真</h2>
+  <div class="box"></div>
 </template>
 <script lang="ts" setup>
 
 </script>
+<style scoped lang="scss">
+.box {
+  width: 160vh;
+  height: 78vh;
+  margin-top: 10vh;
+  background-image: url('@/assets/images/backage-situation.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  position: relative;
+  border: 1px solid #594343;;
+}
+</style>