|
|
@@ -1,118 +1,228 @@
|
|
|
<template>
|
|
|
<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>
|
|
|
-
|
|
|
+ <template v-for="boxItem in [doorUpList, undefined, stationDown]">
|
|
|
+ <div v-if="!boxItem" class="station-body">
|
|
|
+ <div>
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column prop="date" label="状态" />
|
|
|
+ <el-table-column prop="name" label="上行" width="60" />
|
|
|
+ <el-table-column prop="address" label="下行" width="60">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-switch v-model="scope.row.date" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div> </div>
|
|
|
+ <div> </div>
|
|
|
</div>
|
|
|
- <div>
|
|
|
-
|
|
|
+ <div v-else class="station-box">
|
|
|
+ <div class="station-title">{{ boxItem.name }}</div>
|
|
|
+ <div class="carriage-box" v-for="(carriage, index) in boxItem.carriage " :key="index">
|
|
|
+ <div class="door-box">
|
|
|
+ <div class="door-item" v-for="(doorItem, doorIndex) in carriage.doors " :key="doorIndex">
|
|
|
+ <icon-svg :icon-class="doorItem.icon" :color="doorItem.color || '#42BF01'" size="2em" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="carriage-title">{{ carriage.name }}</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>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</template>
|
|
|
+<script setup lang="ts">
|
|
|
+
|
|
|
+interface StationItem {
|
|
|
+ name: string;
|
|
|
+ // 车厢
|
|
|
+ carriage: Array<{
|
|
|
+ name: string;
|
|
|
+ // 屏蔽门
|
|
|
+ doors: Array<{
|
|
|
+ name: string;
|
|
|
+ icon: string;
|
|
|
+ color?: string;
|
|
|
+ }>
|
|
|
+ }>
|
|
|
+}
|
|
|
+const doorUpList = ref<StationItem>({
|
|
|
+ name: "上行",
|
|
|
+ carriage: [
|
|
|
+ {
|
|
|
+ name: '车厢1',
|
|
|
+ doors: [
|
|
|
+ { name: 'XA1-1', icon: '屏蔽门', },
|
|
|
+ { name: 'XA1-2', icon: '屏蔽门', },
|
|
|
+ { name: 'XE01', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'XA1-3', icon: '屏蔽门', },
|
|
|
+ { name: 'XA1-4', icon: '屏蔽门', },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '车厢2',
|
|
|
+ doors: [
|
|
|
+ { name: 'XA2-1', icon: '屏蔽门', },
|
|
|
+ { name: 'XA2-2', icon: '屏蔽门', },
|
|
|
+ { name: 'XE02', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'XA2-3', icon: '屏蔽门', },
|
|
|
+ { name: 'XA2-4', icon: '屏蔽门', },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '车厢3',
|
|
|
+ doors: [
|
|
|
+ { name: 'XA3-1', icon: '屏蔽门', },
|
|
|
+ { name: 'XA3-2', icon: '屏蔽门', },
|
|
|
+ { name: 'XE03', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'XA3-3', icon: '屏蔽门', },
|
|
|
+ { name: 'XA3-4', icon: '屏蔽门', },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '车厢4',
|
|
|
+ doors: [
|
|
|
+ { name: 'XA4-1', icon: '屏蔽门', },
|
|
|
+ { name: 'XA4-2', icon: '屏蔽门', },
|
|
|
+ { name: 'XE04', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'XA4-3', icon: '屏蔽门', },
|
|
|
+ { name: 'XA4-4', icon: '屏蔽门', },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '车厢5',
|
|
|
+ doors: [
|
|
|
+ { name: 'XA5-1', icon: '屏蔽门', },
|
|
|
+ { name: 'XA5-2', icon: '屏蔽门', },
|
|
|
+ { name: 'XE05', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'XA5-3', icon: '屏蔽门', },
|
|
|
+ { name: 'XA5-4', icon: '屏蔽门', },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '车厢6',
|
|
|
+ doors: [
|
|
|
+ { name: 'XA6-1', icon: '屏蔽门' },
|
|
|
+ { name: 'XA6-2', icon: '屏蔽门', },
|
|
|
+ { name: 'XE06', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'XA6-3', icon: '屏蔽门', },
|
|
|
+ { name: 'XA6-4', icon: '屏蔽门', },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+const stationDown = ref<StationItem>({
|
|
|
+ name: "下行",
|
|
|
+ carriage: [
|
|
|
+ {
|
|
|
+ name: '车厢6',
|
|
|
+ doors: [
|
|
|
+ { name: 'SA6-4', icon: '屏蔽门' },
|
|
|
+ { name: 'SA6-3', icon: '屏蔽门' },
|
|
|
+ { name: 'SE06', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'SA6-2', icon: '屏蔽门' },
|
|
|
+ { name: 'SA6-1', icon: '屏蔽门' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '车厢5',
|
|
|
+ doors: [
|
|
|
+ { name: 'SA5-4', icon: '屏蔽门' },
|
|
|
+ { name: 'SA5-3', icon: '屏蔽门' },
|
|
|
+ { name: 'SE05', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'SA5-2', icon: '屏蔽门' },
|
|
|
+ { name: 'SA5-1', icon: '屏蔽门' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '车厢4',
|
|
|
+ doors: [
|
|
|
+ { name: 'SA4-4', icon: '屏蔽门' },
|
|
|
+ { name: 'SA4-3', icon: '屏蔽门' },
|
|
|
+ { name: 'SE04', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'SA4-2', icon: '屏蔽门' },
|
|
|
+ { name: 'SA4-1', icon: '屏蔽门' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '车厢3',
|
|
|
+ doors: [
|
|
|
+ { name: 'SA3-4', icon: '屏蔽门' },
|
|
|
+ { name: 'SA3-3', icon: '屏蔽门' },
|
|
|
+ { name: 'SE03', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'SA3-2', icon: '屏蔽门' },
|
|
|
+ { name: 'SA3-1', icon: '屏蔽门' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '车厢2',
|
|
|
+ doors: [
|
|
|
+ { name: 'SA2-4', icon: '屏蔽门' },
|
|
|
+ { name: 'SA2-3', icon: '屏蔽门' },
|
|
|
+ { name: 'SE02', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'SA2-2', icon: '屏蔽门' },
|
|
|
+ { name: 'SA2-1', icon: '屏蔽门' },
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '车厢1',
|
|
|
+ doors: [
|
|
|
+ { name: 'SA1-4', icon: '屏蔽门' },
|
|
|
+ { name: 'SA1-3', icon: '屏蔽门' },
|
|
|
+ { name: 'SE01', icon: '车厢', color: "#000" },
|
|
|
+ { name: 'SA1-2', icon: '屏蔽门' },
|
|
|
+ { name: 'SA1-1', icon: '屏蔽门' },
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+});
|
|
|
+// 表格
|
|
|
+const tableData = []
|
|
|
+
|
|
|
+</script>
|
|
|
<style scoped lang="scss">
|
|
|
.box {
|
|
|
width: 100%;
|
|
|
height: 80vh;
|
|
|
background-color: #A7C0DF;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.98);
|
|
|
+ padding-top: 60px;
|
|
|
|
|
|
- .box-up, .box-down {
|
|
|
+ .station-box {
|
|
|
display: flex;
|
|
|
+ flex-direction: row;
|
|
|
justify-content: center;
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .station-title {
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .carriage-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
|
|
|
- .box-up {
|
|
|
- margin-top: 10vh;
|
|
|
+ .carriage-title {
|
|
|
+ border: 1px solid #fff;
|
|
|
+ border-radius: 60px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .door-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .box-body {
|
|
|
+ .station-body {
|
|
|
width: 100%;
|
|
|
height: 35vh;
|
|
|
margin: 5vh 0;
|
|
|
display: flex;
|
|
|
justify-content: space-evenly;
|
|
|
|
|
|
- > div {
|
|
|
+ >div {
|
|
|
width: 30vh;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.98);
|
|
|
}
|