From 2bad19109ab83701bcf1bcaef0fa8d58a047a5b4 Mon Sep 17 00:00:00 2001
From: binbin0314 <binbin0314@126.com>
Date: Wed, 28 Jul 2021 14:32:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=A4=A7=E5=B1=8F=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js           |  10 +-
 src/views/VScreen/VScreen.vue | 236 ++++++++++++++++++++++++++++++++++
 2 files changed, 244 insertions(+), 2 deletions(-)
 create mode 100644 src/views/VScreen/VScreen.vue

diff --git a/src/router/index.js b/src/router/index.js
index df150ba..519985a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,8 +2,8 @@
  * @Author: aBin
  * @email: binbin0314@126.com
  * @Date: 2021-06-05 12:16:54
- * @LastEditors: aBin
- * @LastEditTime: 2021-07-02 15:38:19
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2021-07-28 14:32:22
  */
 import Vue from 'vue';
 import VueRouter from 'vue-router';
@@ -30,6 +30,12 @@ const routes = [
     name: 'RfidGauge',
     component: () => import(/* webpackChunkName: "Index" */ 'views/RfidGauge/index.vue'),
   },
+  // 竖屏1080*1920界面
+  {
+    path: '/VScreen',
+    name: 'VScreen',
+    component: () => import(/* webpackChunkName: "Index" */ 'views/VScreen/VScreen.vue'),
+  },
 ];
 
 const router = new VueRouter({
diff --git a/src/views/VScreen/VScreen.vue b/src/views/VScreen/VScreen.vue
new file mode 100644
index 0000000..a3389fa
--- /dev/null
+++ b/src/views/VScreen/VScreen.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="wrap">
+    <div v-if="!showVideo">
+      <div class="bg-left" style="height: 98% !important">
+        <img class="pic" src="~assets/bg-left.png" />
+      </div>
+      <div class="bg-top">
+        <img class="pic" src="~assets/bg-top.png" />
+        <div class="animation">
+          <!-- <video src="~assets/top-video.webm"></video> -->
+          <video
+            autoplay
+            height="162"
+            loop
+            src="https://easyv.assets.dtstack.com/data/video/7478/2313/gfO5k3Ztm-1556020310192-qI-NAaykOV.webm"
+            style="width: 100%; height: 162px; object-fit: fill; mix-blend-mode: screen; filter: saturate(200%)"
+          ></video>
+        </div>
+        <span class="b-title">数字化智慧平车数据看板</span>
+      </div>
+      <div class="bg-right" style="height: 98% !important">
+        <img class="pic" src="~assets/bg-right.png" />
+      </div>
+      <div class="bg-bottom" style="top: 98%; width: 94% !important">
+        <img class="pic" src="~assets/bg-bottom.png" />
+      </div>
+      <div class="time">{{ nowTime }}</div>
+      <!--内容区-->
+      <div class="content d-flex flex-column" style="top: 7% !important; height: 91% !important">
+        <!-- 第一行 -->
+        <div class="flex-1 flex-row">
+          <!-- 第一列 -->
+          <div class="flex-1 ma-2">
+            <div class="d-flex flex-column flex-1">
+              <div class="box-top">
+                <span>急救数量统计</span>
+              </div>
+              <div class="flex-1 fill-width box-bottom">
+                <statistics class="flex-1" />
+              </div>
+            </div>
+          </div>
+          <!-- 第二列 -->
+          <div class="d-flex flex-column flex-1 ma-2">
+            <div class="box-top">
+              <span>急救时长分析</span>
+            </div>
+            <div class="flex-1 fill-width box-bottom">
+              <duration class="flex-1" />
+            </div>
+          </div>
+          <!-- 第三列 -->
+          <div class="flex-1 ma-2">
+            <div class="d-flex flex-column flex-1">
+              <div class="box-top">
+                <span>FAST ED结果</span>
+              </div>
+              <div class="flex-1 fill-width box-bottom">
+                <fast-ed class="flex-1" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 第二行 -->
+        <div style="width: 100%; height: 2%"></div>
+        <div class="flex-2 flex-row">
+          <iframe class="fill-width fill-height" src="https://www.thingjs.com/pp/6dab0a018283ef357a85684c"></iframe>
+          <!-- 地图 -->
+          <shanxi-map class="sxmap" />
+        </div>
+        <div style="width: 100%; height: 2%"></div>
+        <!-- 第三行 -->
+        <div class="flex-1 flex-row">
+          <!-- 第二列 -->
+          <div class="flex-1 ma-2">
+            <div class="d-flex flex-column flex-1">
+              <div class="box-top">
+                <span>智慧平车面板数据</span>
+              </div>
+              <div class="flex-1 fill-width box-bottom">
+                <panel class="flex-1" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 第四行 -->
+        <div style="width: 100%; height: 2%"></div>
+        <div class="flex-1 flex-row">
+          <!-- 第一列 -->
+          <div class="flex-1 ma-2">
+            <div class="d-flex flex-column flex-1">
+              <div class="box-top">
+                <span>振动传感器</span>
+              </div>
+              <div class="flex-1 fill-width box-bottom">
+                <sensor class="flex-1" />
+              </div>
+            </div>
+          </div>
+          <!-- 第二列 -->
+          <div class="flex-1 ma-2">
+            <div class="d-flex flex-column flex-1">
+              <div class="box-top">
+                <span>称重传感器</span>
+              </div>
+              <div class="flex-1 fill-width box-bottom">
+                <load-cells />
+              </div>
+            </div>
+          </div>
+          <!-- 第三列 -->
+          <div class="flex-1 ma-2">
+            <div class="d-flex flex-column flex-1">
+              <div class="box-top">
+                <span>RFID</span>
+              </div>
+              <div class="flex-1 fill-width box-bottom">
+                <r-f-i-d />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <img class="fill-width fill-height" src="~assets/aaa.png" />
+    </div>
+  </div>
+</template>
+
+<script>
+import socketMixin from '@/mixins/socket';
+import Statistics from 'components/Statistics/Statistics.vue';
+import Duration from 'components/Duration/Duration.vue';
+import Sensor from 'components/Sensor/Sensor.vue';
+import LoadCells from 'components/LoadCells/LoadCells.vue';
+import RFID from 'components/RFID/RFID.vue';
+import FastEd from 'components/FastEd/FastEd.vue';
+import Panel from 'components/Panel/Panel.vue';
+import ShanxiMap from 'components/Map/Map.vue';
+
+export default {
+  name: 'VScreen',
+  components: { Statistics, Duration, Sensor, LoadCells, RFID, FastEd, Panel, ShanxiMap },
+  mixins: [socketMixin],
+  data() {
+    return {
+      nowTime: new Date(),
+      str: '',
+      showVideo: false,
+    };
+  },
+
+  mounted() {
+    this.nowTimes();
+  },
+  methods: {
+    //显示当前时间（年月日时分秒）
+    timeFormate(timeStamp) {
+      let data = new Date(timeStamp);
+      let year = data.getFullYear();
+      let month = data.getMonth() + 1 < 10 ? '0' + (data.getMonth() + 1) : data.getMonth() + 1;
+      let date = data.getDate() < 10 ? '0' + data.getDate() : data.getDate();
+      let hh = data.getHours() < 10 ? '0' + data.getHours() : data.getHours();
+      let mm = data.getMinutes() < 10 ? '0' + data.getMinutes() : data.getMinutes();
+      let ss = data.getSeconds() < 10 ? '0' + data.getSeconds() : data.getSeconds();
+      this.nowTime = year + '年' + month + '月' + date + '日' + ' ' + hh + ':' + mm + ':' + ss;
+    },
+    nowTimes() {
+      this.timeFormate(new Date());
+      setInterval(this.nowTimes, 1000);
+      this.clear();
+    },
+
+    clear() {
+      clearInterval(this.nowTimes);
+      this.nowTimes = null;
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+.b-title {
+  position: absolute;
+  left: 33%;
+  top: 1px;
+  width: 34%;
+  height: 66px;
+  line-height: 60px;
+  font-size: 30px;
+  color: #fff;
+  text-align: center;
+  overflow: hidden;
+  cursor: pointer;
+  pointer-events: auto;
+  transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(0.8) translate(0px, 0px);
+  text-shadow: #0075ff 0px 0px 8px;
+}
+
+#wrap {
+  overflow: hidden;
+}
+
+iframe {
+  border: none !important;
+}
+
+.sxmap {
+  position: absolute;
+  top: 17%;
+  right: 0;
+  z-index: 9;
+  width: 19rem;
+  height: 25rem;
+}
+
+.time {
+  position: absolute;
+  top: 2.5rem;
+  left: 8rem;
+  font-family: SourceHanSansCN-Medium;
+  font-size: 1.5rem;
+  color: #fff;
+  text-align: left;
+  transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(0.8) translate(0px, 0px);
+}
+
+@media (max-width: 1500px) {
+  .time {
+    top: 4rem;
+    left: 3rem;
+    font-size: 1.5rem;
+  }
+}
+</style>