pis设备登录代码调整

src/views/login/index.vue

@@ -302,7 +302,9 @@ export default {
                     if (config.deviceCode) { query.deviceCode = config.deviceCode; }
                     // iscs
                     if (config.picture) { query.deviceCode = config.picture; }
-
+                    // pis
+                    if (config.standCode) { query.standCode = config.standCode; }
+                    if (config.groupNumber) { query.groupNumber = config.groupNumber; }
                     //
                     // if (config.client) { query.client = config.client; }
                 }

src/views/newMap/display/terminals/index.vue

@@ -25,6 +25,7 @@
     <diagram-load v-else-if="picture === 'diagramLoad'" ref="diagramLoad" :group="group" />
     <diagram-preview v-else-if="picture === 'diagramPreview'" ref="diagramPreview" />
     <diagram-edit v-else-if="picture === 'diagramEdit'" ref="diagramEdit" />
+    <pis-terminal v-else-if="picture === 'pis'" ref="pisTerminal" />
     <terminal-menu
       v-if="menuShow"
       ref="terminalMenu"
@@ -54,6 +55,7 @@ import TrafficTerminalWork from './trafficTerminalWork';
 import BigTrainRunplanManage from '@/views/bigTrainRunplanManage/index';
 import IscsSystem from '@/views/iscs/iscsSystemNew/index';
 import PslTerminal from './psl';
+import PisTerminal from './pis/index';
 import DispatcherManage from './dispatcherManage';
 import LargePassengerStrategy from './largePassengerStrategy';
 import LargePassengerView from './largePassengerView';
@@ -85,6 +87,7 @@ export default {
         LargePassengerStrategy,
         LargePassengerView,
         PslTerminal,
+        PisTerminal,
         DispatcherManage,
         BigScreen,
         ScheduleWork,

src/views/newMap/display/terminals/pis/components/slideshow.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="wrapper">
+    <div class="slidecontent" :class="{ animation: animation }" :style="`transform: translateX(-${currentIndex}00%)`">
+      <template v-for="(path, idx) in _paths">
+        <img class="img" :src="idx - currentIndex < 3 ? `${prefix}${path}` : ''" :key="`${path}${idx}`" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+let timer
+export default {
+  name: 'SlideShow',
+  props: {
+    paths: {
+      type: Array,
+      validator: val => Array.isArray(val) && val.every(item => typeof item === 'string'),
+    },
+    prefix: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      animation: true,
+    }
+  },
+  computed: {
+    len() {
+      return this._paths.length
+    },
+    _paths() {
+      return [...this.paths, this.paths[0]]
+    },
+  },
+  mounted() {
+    this.initAnimation()
+    window.addEventListener('visibilitychange', this.visibilityChangeHandler)
+  },
+  methods: {
+    initAnimation() {
+      timer = setInterval(() => {
+        this.animation = true
+        this.currentIndex = this.nextIndex(this.currentIndex)
+        setTimeout(() => {
+          if (this.currentIndex === this.len - 1) {
+            this.animation = false
+            this.currentIndex = this.nextIndex(this.currentIndex)
+          }
+        }, 1000)
+      }, 4000)
+    },
+    pauseAnimation() {
+      clearInterval(timer)
+    },
+    visibilityChangeHandler() {
+      if (document.hidden) this.pauseAnimation()
+      else this.initAnimation()
+    },
+    nextIndex(idx) {
+      return idx < this.len - 1 ? idx + 1 : 0
+    },
+  },
+  beforeDestroy() {
+    timer = null
+    window.removeEventListener('visibilitychange', this.visibilityChangeHandler)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  .slidecontent {
+    height: 100%;
+    white-space: nowrap;
+    .img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+.animation {
+  transition: 1s linear all;
+}
+</style>

src/views/newMap/display/terminals/pis/index.vue

@@ -0,0 +1,441 @@
+<template>
+  <div class="screen">
+    <div v-if="view === 'stand'" class="station">
+      <div class="datetime">
+        <div class="logo">
+          <img :src="logo" alt="">
+        </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">{{ standPisState.stationName }}</div>
+          <div class="text-center">{{ standPisState.stationNameEn }}</div>
+        </div>
+        <div class="devide" />
+        <div class="nextTrain">
+          <div>第一班列车 1st</div>
+          <div v-if="standPisState.secondTrainRemain !== null">
+            <div v-if="standPisState.firstTrainRemain > 0" class="text-center yellow">
+              <span class="bigger">{{ standPisState.firstTrainRemain }} 分钟</span> <span>min</span>
+            </div>
+            <div v-else-if="standPisState.firstTrainRemain > -1" class="text-center yellow">
+              <span class="bigger">即将进站</span>
+            </div>
+            <div v-else class="text-center yellow">
+              <span class="bigger">列车到达</span>
+            </div>
+          </div>
+          <div>开往 {{ standPisState.firstEndStationName }}</div>
+          <div v-if="standPisState.firstEndStationNameEn">TO {{ standPisState.firstEndStationNameEn }}</div>
+        </div>
+        <div class="devide" />
+        <div class="secondTrain">
+          <div>第二班列车 2nd</div>
+          <div v-if="standPisState.secondTrainRemain !== null">
+            <div v-if="standPisState.secondTrainRemain > 0" class="text-center bigger">
+              {{ standPisState.secondTrainRemain }} 分钟 <span>min</span>
+            </div>
+            <div v-else-if="standPisState.secondTrainRemain > -1" class="text-center bigger">即将进站</div>
+            <div v-else class="text-center bigger">列车到达</div>
+          </div>
+          <div>开往 {{ standPisState.secondEndStationName }}</div>
+          <div v-if="standPisState.secondEndStationNameEn">TO {{ standPisState.secondEndStationNameEn }}</div>
+        </div>
+      </div>
+      <div class="media">
+        <div class="mediacontent">
+          <SlideShow
+            :prefix="prefix"
+            :paths="
+              Array(27)
+                .fill()
+                .map((e, i) => `img${i + 1}.jpg`)
+            "
+          />
+        </div>
+        <div class="banner">
+          <div class="text">{{ standPisState.text }}</div>
+          <div class="text">{{ standPisState.text }}</div>
+        </div>
+      </div>
+      <div class="tempratrue">
+        <div class="directionIdentifer">《《</div>
+        <div class="trainpic">
+          <div class="pic" />
+          <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="train-pis-content">
+        <div class="left">
+          <div class="logo">
+            <img :src="logo" alt="">
+          </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>{{ !!onboardPisState.parking ? '当前站' : '下一站' }}</div>
+                <div>{{ !!onboardPisState.parking ? 'Current Station' : 'Next Station' }}</div>
+              </div>
+              <div class="down">
+                <div>{{ onboardPisState.stationName }}</div>
+                <div>{{ onboardPisState.stationNameEN }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="dest">
+            <div>
+              开往: {{ onboardPisState.endStationName
+              }}{{ onboardPisState.endStationNameEn ? ' / TO: ' + currentTrain.endStationNameEn : '' }}
+            </div>
+          </div>
+          <div class="media">
+            <SlideShow
+              :prefix="prefix"
+              :paths="
+                Array(27)
+                  .fill()
+                  .map((e, i) => `img${i + 1}.jpg`)
+              "
+            />
+          </div>
+        </div>
+      </div>
+      <div class="banner">
+        <div class="text">{{ onboardPisState.text }}</div>
+        <div class="text">{{ onboardPisState.text }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { creatSubscribe, clearSubscribe, getTopic, displayTopic } from '@/utils/stomp';
+import { timestampFormat } from '@/utils/date';
+import logo from '@/assets/icon/favicon_hhzy.png';
+import SlideShow from './components/slideshow';
+export default {
+    name: 'PIS',
+    components: { SlideShow },
+    data() {
+        return {
+            view: '',
+            date: '',
+            time: '',
+            logo,
+            standPisState: {
+                standCode: '',
+                stationName: '',
+                firstTrainRemain: undefined,
+                firstEndStationName: '',
+                secondTrainRemain: undefined,
+                secondEndStationName: '',
+                text:
+          '党的十八大提出，倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则，这24个字是社会主义核心价值观的基本内容。'
+            },
+            onboardPisState: {
+                groupNumber: '',
+                stationName: '',
+                endStationName: '',
+                parking: 0,
+                text: '今日天气：晴，最低气温15℃，最高气温22℃，风向风力：东北风3级，空气质量：良好'
+            },
+            standPisImgUrl: `${this.$store.state.user.resourcesUrl}/PICTURE/2022-08-01/standPis.png`,
+            onboardPisImgUrl: `${this.$store.state.user.resourcesUrl}/PICTURE/2022-08-01/onboardPis.png`,
+            prefix: `${this.$store.state.user.resourcesUrl}/PICTURE/pis/`
+        };
+    },
+    watch: {
+        '$store.state.socket.simulationTimeSync': function(val) {
+            this.time = timestampFormat('HH:mm', val);
+            this.date = timestampFormat('YYYY年MM月DD日', val);
+        },
+        '$store.state.socket.standPisState': function(val) {
+            this.standPisState.stationName = val.stationName;
+            this.standPisState.firstTrainRemain = val.firstTrainRemain;
+            this.standPisState.firstEndStationName = val.firstEndStationName;
+            this.standPisState.secondTrainRemain = val.secondTrainRemain;
+            this.standPisState.secondEndStationName = val.secondEndStationName;
+            if (val.text) this.standPisState.text = val.text;
+        },
+        '$store.state.socket.onboardPisState': function(val) {
+            this.onboardPisState.stationName = val.stationName;
+            this.onboardPisState.endStationName = val.endStationName;
+            this.onboardPisState.parking = val.parking;
+        }
+    },
+    mounted() {
+        this.initPage(this.$route.query);
+    },
+    beforeDestroy() {
+        this.clearPage();
+    },
+
+    methods: {
+        initPage(query) {
+            const { type, group, standCode, groupNumber } = query;
+            this.query = query;
+            if (type === 'PIS_STAND') {
+                this.view = 'stand';
+                creatSubscribe(getTopic(type, group, { standCode }));
+            } else if (type === 'PIS_TRAIN') {
+                this.view = 'train';
+                creatSubscribe(getTopic(type, group, { groupNumber }));
+            }
+            creatSubscribe(`${displayTopic}\/${group}`);
+        },
+        clearPage() {
+            clearSubscribe(
+                getTopic(
+                    this.query.type,
+                    this.query.group,
+                    this.view === 'stand' ? { standCode: this.query.standCode } : { groupNumber: this.query.groupNumber }
+                )
+            );
+            clearSubscribe(`${displayTopic}\/${this.query.group}`);
+        }
+    }
+};
+</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, 0px 0px 5px 0px inset lightgrey;
+  }
+  .datetime {
+    grid-area: 1/1/2/2;
+    flex-direction: column;
+    justify-content: space-evenly;
+    .time {
+      font-size: 1.2em;
+      margin-left: 0.5em;
+    }
+    .logo {
+      & > img {
+        height: 110px;
+      }
+    }
+  }
+  .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);
+      background-position: center;
+      background-size: cover;
+    }
+    .banner {
+      width: 100%;
+      height: 15%;
+      border: 1px solid rgb(143, 192, 184);
+      border-radius: 5px;
+      background: #009ab8;
+      box-shadow: 2px 2px 3px 1px #69898f, 0px 0px 5px 0px inset lightgrey;
+      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);
+  .train-pis-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%;
+        display: flex;
+        justify-content: center;
+        & > img {
+          height: 100%;
+          transform: translateY(-10px);
+        }
+      }
+      .info {
+        height: 88%;
+        background-color: #7076b0;
+        border-radius: 15px;
+        padding: 8px;
+        overflow: visible;
+        display: flex;
+        flex-direction: column;
+        font-size: 2rem;
+        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);
+        background-position: center;
+        background-size: cover;
+      }
+    }
+  }
+  .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>