PIS界面
This commit is contained in:
Yuan
parent
83736869c3
commit
bad5568564
BIN
src/assets/pis/train.png
Normal file
BIN
src/assets/pis/train.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -203,6 +203,8 @@ const VoiceManage = () => import('@/views/fileManage/voiceManage');
|
|||||||
const IscsDeviceManage = () => import('@/views/system/iscsDeviceManage');
|
const IscsDeviceManage = () => import('@/views/system/iscsDeviceManage');
|
||||||
const IscsResourcesManage = () => import('@/views/system/iscsResourcesManage');
|
const IscsResourcesManage = () => import('@/views/system/iscsResourcesManage');
|
||||||
|
|
||||||
|
const PisScreen = () => import('@/views/pis/index')
|
||||||
|
|
||||||
// import { GenerateRouteProjectList } from '@/scripts/ProjectConfig';
|
// import { GenerateRouteProjectList } from '@/scripts/ProjectConfig';
|
||||||
// import { getSessionStorage } from '@/utils/auth';
|
// import { getSessionStorage } from '@/utils/auth';
|
||||||
|
|
||||||
@ -703,6 +705,11 @@ export const publicAsyncRoute = [
|
|||||||
path: '/bigTrainRunplanManage',
|
path: '/bigTrainRunplanManage',
|
||||||
component: BigTrainRunplanManage,
|
component: BigTrainRunplanManage,
|
||||||
hidden: true
|
hidden: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/pis',
|
||||||
|
component: PisScreen,
|
||||||
|
hidden: true
|
||||||
}
|
}
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|||||||
368
src/views/pis/index.vue
Normal file
368
src/views/pis/index.vue
Normal file
@ -0,0 +1,368 @@
|
|||||||
|
<template>
|
||||||
|
<div class="screen">
|
||||||
|
<el-button @click="changeView" style="position:fixed; top: 0; right: 0">{{ this.view }}</el-button>
|
||||||
|
<div v-if="view === 'station'" class="station">
|
||||||
|
<div class="datetime">
|
||||||
|
<div class="logo">LOGO</div>
|
||||||
|
<div>
|
||||||
|
<span>{{ date }}</span>
|
||||||
|
<span class="time">{{ time }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="traininfo">
|
||||||
|
<div class="currentStation">
|
||||||
|
<div>本站 This Station</div>
|
||||||
|
<div class="text-center bigger">{{ trainInfo.station.name }}</div>
|
||||||
|
<div class="text-center">{{ trainInfo.station.nameEN }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="devide"></div>
|
||||||
|
<div class="nextTrain">
|
||||||
|
<div>第一班列车 1st</div>
|
||||||
|
<div class="text-center yellow">
|
||||||
|
<span class="bigger">{{ trainInfo.nextTrain.time }} 分钟</span> <span>min</span>
|
||||||
|
</div>
|
||||||
|
<div>开往 {{ trainInfo.nextTrain.to }}</div>
|
||||||
|
<div>TO {{ trainInfo.nextTrain.toEN }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="devide"></div>
|
||||||
|
<div class="secondTrain">
|
||||||
|
<div>第二班列车 2nd</div>
|
||||||
|
<div class="text-center bigger">{{ trainInfo.secondTrain.time }} 分钟 <span>min</span></div>
|
||||||
|
<div>开往 {{ trainInfo.secondTrain.to }}</div>
|
||||||
|
<div>TO {{ trainInfo.secondTrain.toEN }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="media">
|
||||||
|
<div class="mediacontent"></div>
|
||||||
|
<div class="banner">
|
||||||
|
<div class="text">{{ bannerText }}</div>
|
||||||
|
<div class="text">{{ bannerText }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tempratrue">
|
||||||
|
<div class="directionIdentifer">《《</div>
|
||||||
|
<div class="trainpic">
|
||||||
|
<div class="pic"></div>
|
||||||
|
<div class="textarea">
|
||||||
|
<div v-for="i in 6" :key="i">舒适 Vacant</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="view === 'train'" class="train">
|
||||||
|
<div class="content">
|
||||||
|
<div class="left">
|
||||||
|
<div class="logo">LOGO</div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="time block">
|
||||||
|
<div>时间 TIME</div>
|
||||||
|
<div>{{ time }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="date block">
|
||||||
|
<div>日期 DATE</div>
|
||||||
|
<div>{{ date }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="next block">
|
||||||
|
<div class="up">
|
||||||
|
<div>下一站</div>
|
||||||
|
<div>Next Station</div>
|
||||||
|
</div>
|
||||||
|
<div class="down">
|
||||||
|
<div>{{ currentTrain.nextStationName }}</div>
|
||||||
|
<div>{{ currentTrain.nextStationNameEN }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<div class="dest">
|
||||||
|
<div>开往: {{ currentTrain.destination }} / TO: {{ currentTrain.destinationEN }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="media"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="banner">
|
||||||
|
<div class="text">{{ bannerText }}</div>
|
||||||
|
<div class="text">{{ bannerText }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let timer
|
||||||
|
export default {
|
||||||
|
name: 'PIS',
|
||||||
|
components: {},
|
||||||
|
computed: {
|
||||||
|
date() {
|
||||||
|
return `${this.datetime.getFullYear()}年${this.datetime.getMonth() + 1}月${this.datetime.getDate()}日`
|
||||||
|
},
|
||||||
|
time() {
|
||||||
|
return `${this.datetime.getHours()}:${this.datetime.getMinutes() + 1}`
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
view: 'station',
|
||||||
|
datetime: new Date(),
|
||||||
|
trainInfo: {
|
||||||
|
station: {
|
||||||
|
name: '科技路',
|
||||||
|
nameEN: 'KEJILU',
|
||||||
|
},
|
||||||
|
nextTrain: {
|
||||||
|
time: 3,
|
||||||
|
to: '航天东路',
|
||||||
|
toEN: 'HANGTIANDONGLU',
|
||||||
|
},
|
||||||
|
secondTrain: {
|
||||||
|
time: 7,
|
||||||
|
to: '航天新城',
|
||||||
|
toEN: 'HANGTIANXINCHENG',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
bannerText:
|
||||||
|
'党的十八大提出，倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则，这24个字是社会主义核心价值观的基本内容。',
|
||||||
|
currentTrain: {
|
||||||
|
nextStationName: '丈八一路',
|
||||||
|
nextStationNameEN: 'ZHANGBA 1 LU',
|
||||||
|
destination: '西安国际医学中心',
|
||||||
|
destinationEN: `XI'ANGUOJIYIXUEZHONGXIN`,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
clearTimeout(timer)
|
||||||
|
timer = setInterval(() => {
|
||||||
|
this.tick()
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
destroyed() {
|
||||||
|
clearInterval(timer)
|
||||||
|
timer = null
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
changeView() {
|
||||||
|
if (this.view === 'station') {
|
||||||
|
this.view = 'train'
|
||||||
|
} else {
|
||||||
|
this.view = 'station'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tick() {
|
||||||
|
this.datetime = new Date()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.screen {
|
||||||
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #fff;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.station {
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
background: linear-gradient(#009eb5, #00b7d7);
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-template-rows: repeat(5, 1fr);
|
||||||
|
& > div {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
.datetime,
|
||||||
|
.traininfo {
|
||||||
|
border: 1px solid rgb(143, 192, 184);
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #009ab8;
|
||||||
|
box-shadow: 2px 2px 3px 1px #69898f;
|
||||||
|
}
|
||||||
|
.datetime {
|
||||||
|
grid-area: 1/1/2/2;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.time {
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.traininfo {
|
||||||
|
grid-area: 2/1/5/2;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
font-size: 24px;
|
||||||
|
& > div {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 30px;
|
||||||
|
line-height: 1.6em;
|
||||||
|
}
|
||||||
|
.devide {
|
||||||
|
width: 80%;
|
||||||
|
height: 2px;
|
||||||
|
background: rgba($color: #fff, $alpha: 0.7);
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.bigger {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
.yellow {
|
||||||
|
color: #cff055;
|
||||||
|
}
|
||||||
|
.nextTrain {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.media {
|
||||||
|
grid-area: 1/2/5/5;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.mediacontent {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(85% - 10px);
|
||||||
|
background: linear-gradient(#cff055, #009eb5);
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
width: 100%;
|
||||||
|
height: 15%;
|
||||||
|
border: 1px solid rgb(143, 192, 184);
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #009ab8;
|
||||||
|
box-shadow: 2px 2px 3px 1px #69898f;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
.text {
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 60px;
|
||||||
|
animation: 40s linear infinite scroll;
|
||||||
|
color: #cff055;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tempratrue {
|
||||||
|
grid-area: 5/1/6/5;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.directionIdentifer {
|
||||||
|
font-size: 72px;
|
||||||
|
}
|
||||||
|
.trainpic {
|
||||||
|
width: 80%;
|
||||||
|
.pic {
|
||||||
|
height: 120px;
|
||||||
|
background-image: url('~@/assets/pis/train.png');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.textarea {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.train {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #44537b, #445567, #44537b);
|
||||||
|
.content {
|
||||||
|
height: 88%;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
.left,
|
||||||
|
.right {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
width: 30%;
|
||||||
|
background: linear-gradient(90deg, #3e4e69, #586baa, #3e4e69);
|
||||||
|
padding: 20px;
|
||||||
|
.logo {
|
||||||
|
height: 12%;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
height: 88%;
|
||||||
|
background-color: #7076b0;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 8px;
|
||||||
|
overflow: visible;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
.time {
|
||||||
|
height: 25%;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
height: 25%;
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
.next {
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
background: linear-gradient(90deg, #445397, #7b7cc2, #445397);
|
||||||
|
border-radius: 7px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
.up,
|
||||||
|
.down {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
width: 70%;
|
||||||
|
.dest {
|
||||||
|
height: 15%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
.media {
|
||||||
|
height: 85%;
|
||||||
|
background: linear-gradient(#7b7cc2, #cff055);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.banner {
|
||||||
|
height: 12%;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
.text {
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 60px;
|
||||||
|
animation: 40s linear infinite scroll;
|
||||||
|
color: #cff055;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes scroll {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user