ZhangBin
/
salt-lake-hospital
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

更新大屏代码

master
aBin 4 years ago
parent
33a2bb90f1
commit
2bad19109a
2 changed files with 244 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      src/router/index.js
  2. 236
      src/views/VScreen/VScreen.vue

10
src/router/index.js
View File

@ -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({

236
src/views/VScreen/VScreen.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save