update
This commit is contained in:
hzz
parent
cbb689a554
commit
9877f6ca84
@ -7,6 +7,7 @@
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cycjimmy/jsmpeg-player": "^6.0.5",
|
||||
"@dataview/datav-vue3": "^0.0.0-test.1672506674342",
|
||||
"@iamzzg/data-view": "^2.10.0",
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
|
||||
79
src/views/Elevator/components/Buttons.vue
Normal file
79
src/views/Elevator/components/Buttons.vue
Normal file
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="buttons-container">
|
||||
<div class="button-item" v-for="item in (prop.btns as any)">
|
||||
<i class=" iconfont icon-style" :style="{color:item.status?'#E0D610':'#ccc'}" :class="item.icon" ></i>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { onMounted, onUnmounted,ref,reactive } from 'vue'
|
||||
|
||||
const prop = defineProps({
|
||||
btns:{
|
||||
type:Array,
|
||||
default:[
|
||||
{
|
||||
name:'上升',
|
||||
icon:'icon-shangsheng',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
name:'下降',
|
||||
icon:'icon-xiajiang',
|
||||
status: false
|
||||
},
|
||||
{
|
||||
name:'急停',
|
||||
icon:'icon-jiting',
|
||||
status: false
|
||||
},
|
||||
{
|
||||
name:'停止',
|
||||
icon:'icon-tingzhi',
|
||||
status: false
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
// let buttons = reactive({
|
||||
// up: 'icon-shangsheng',
|
||||
// down: 'icon-xiajiang',
|
||||
// jiting: 'icon-jiting',
|
||||
// stop: 'icon-tingzhi',
|
||||
// })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.buttons-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #AEEEFA;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
.button-item {
|
||||
width: 50%;
|
||||
height: 40%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.button-item i,.button-item span {
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
.icon-style {
|
||||
font-size: 50px;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
63
src/views/Elevator/components/LeftStatus.vue
Normal file
63
src/views/Elevator/components/LeftStatus.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="left-box">
|
||||
<div class="sheng">
|
||||
<p>升到位</p>
|
||||
<p><i class="iconfont icon-zhengque"></i></p>
|
||||
</div>
|
||||
<div class="zhong">
|
||||
<div class="zhong-left">
|
||||
<div>上升中</div>
|
||||
<div><i class="iconfont icon-shangshengzhong"></i></div>
|
||||
</div>
|
||||
<div class="zhong-right">
|
||||
<div><i class="iconfont icon-xiajiangzhong"></i></div>
|
||||
<div>下降中</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="jiang">
|
||||
<p><i class="iconfont icon-zhengque"></i></p>
|
||||
<p>降到位</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.left-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-family: "华文新魏", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #AEEEFA;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.zhong {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.zhong-left,.zhong-right {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.icon-shangshengzhong,.icon-xiajiangzhong {
|
||||
font-size: 150px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.icon-zhengque {
|
||||
font-size: 50px;
|
||||
color: #ccc;
|
||||
}
|
||||
</style>
|
||||
1
src/views/Elevator/images/elevator.svg
Normal file
1
src/views/Elevator/images/elevator.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703051430791" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18619" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M922.587429 311.661714V111.286857c0-24.576-19.346286-44.507429-43.227429-44.507428H144.64c-23.881143 0-43.227429 19.931429-43.227429 44.507428v200.374857h821.174858z m0 66.779429H101.412571v534.272c0 24.576 19.346286 44.507429 43.227429 44.507428h734.72c23.881143 0 43.227429-19.931429 43.227429-44.507428v-534.308572zM123.026286 0h777.947428C948.736 0 987.428571 39.862857 987.428571 89.051429v845.897142C987.428571 984.137143 948.736 1024 900.973714 1024H123.026286C75.264 1024 36.571429 984.137143 36.571429 934.948571V89.051429C36.571429 39.862857 75.264 0 123.026286 0z m403.2 204.324571l-18.249143-8.411428m-255.268572 271.579428h237.714286v178.102858h-237.714286v-178.102858z m280.868572 0h237.714286v178.102858h-237.714286v-178.102858zM252.708571 690.102857h237.714286v178.102857h-237.714286v-178.102857z m280.868572 0h237.714286v178.102857h-237.714286v-178.102857z" fill="#707070" p-id="18620"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/views/Elevator/images/left.png
Normal file
BIN
src/views/Elevator/images/left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
BIN
src/views/Elevator/images/right.png
Normal file
BIN
src/views/Elevator/images/right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
@ -10,19 +10,36 @@
|
||||
<div class="l-content">
|
||||
<div class="l-content-box">
|
||||
<Border title="实时状态">
|
||||
<LeftStatus></LeftStatus>
|
||||
</Border>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="center"></div>
|
||||
<div class="center">
|
||||
<div class="left-column"></div>
|
||||
<div class="right-column"></div>
|
||||
<div class="sec_floor" :class="{sec_door}">
|
||||
<img src="./images/left.png" class="left-door" alt="">
|
||||
<img src="./images/right.png" class="right-door" alt="">
|
||||
</div>
|
||||
<div class="fir_floor" :class="{fir_door}">
|
||||
<img src="./images/left.png" class="left-door" alt="">
|
||||
<img src="./images/right.png" class="right-door" alt="">
|
||||
</div>
|
||||
<div class="elevator">
|
||||
<img src="./images/elevator.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="r-box">
|
||||
<Border title="二层按钮">
|
||||
<Buttons :btns="sec_floor"></Buttons>
|
||||
</Border>
|
||||
</div>
|
||||
<div class="r-box">
|
||||
<Border title="一层按钮">
|
||||
<Buttons :btns="fir_floor"></Buttons>
|
||||
</Border>
|
||||
</div>
|
||||
</div>
|
||||
@ -30,13 +47,61 @@
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { onMounted, onUnmounted, ref, reactive } from 'vue'
|
||||
import Border from './components/Border.vue'
|
||||
import LeftStatus from './components/LeftStatus.vue'
|
||||
import Buttons from './components/Buttons.vue'
|
||||
import useNowTime from "@/hook/nowTime";
|
||||
|
||||
|
||||
|
||||
let { timeHtml } = useNowTime();
|
||||
|
||||
|
||||
let thatstatus = ref(true)
|
||||
//二楼电梯门
|
||||
let sec_door = ref(false)
|
||||
//一楼电梯门
|
||||
let fir_door = ref(false)
|
||||
let sec_floor = reactive([
|
||||
{
|
||||
name: '上升',
|
||||
icon: 'icon-shangsheng',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
name: '下降',
|
||||
icon: 'icon-xiajiang',
|
||||
status: false
|
||||
},
|
||||
{
|
||||
name: '急停',
|
||||
icon: 'icon-jiting',
|
||||
status: false
|
||||
},
|
||||
{
|
||||
name: '停止',
|
||||
icon: 'icon-tingzhi',
|
||||
status: false
|
||||
}
|
||||
])
|
||||
|
||||
let fir_floor = reactive([
|
||||
{
|
||||
name: '上升',
|
||||
icon: 'icon-shangsheng',
|
||||
status: true
|
||||
},
|
||||
{
|
||||
name: '下降',
|
||||
icon: 'icon-xiajiang',
|
||||
status: false
|
||||
},
|
||||
{
|
||||
name: '停止',
|
||||
icon: 'icon-tingzhi',
|
||||
status: false
|
||||
}
|
||||
])
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
document.getElementById('app').style.backgroundColor = '#000928'
|
||||
})
|
||||
@ -80,14 +145,106 @@ onUnmounted(() => {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* 电梯 */
|
||||
.center {
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid rgba(0, 255, 255, 1);
|
||||
border-radius: 20px;
|
||||
|
||||
}
|
||||
|
||||
.elevator {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.elevator img {
|
||||
width: 70%;
|
||||
}
|
||||
.left-column {
|
||||
position: absolute;
|
||||
width: 21px;
|
||||
height: 100%;
|
||||
background-color: #66D4FF;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 0;
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
|
||||
.right-column {
|
||||
position: absolute;
|
||||
width: 21px;
|
||||
height: 100%;
|
||||
background-color: #66D4FF;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 0;
|
||||
border-top-right-radius: 20px;
|
||||
border-bottom-right-radius: 20px;
|
||||
}
|
||||
|
||||
.sec_floor {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
perspective: 2000px;
|
||||
}
|
||||
|
||||
.fir_floor {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
perspective: 2000px;
|
||||
}
|
||||
|
||||
.left-door,
|
||||
.right-door {
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
z-index: 1;
|
||||
transition: all 2s ease;
|
||||
}
|
||||
|
||||
.left-door {
|
||||
transform-origin: left center;
|
||||
border-right: 1px solid rgb(8, 8, 8);
|
||||
}
|
||||
|
||||
.right-door {
|
||||
transform-origin: right center;
|
||||
border-left: 1px solid rgb(8, 8, 8);
|
||||
}
|
||||
|
||||
.sec_door .left-door,.fir_door .left-door {
|
||||
/* transform: rotateY(-140deg); */
|
||||
transform: translateX(-90%);
|
||||
}
|
||||
|
||||
.sec_door .right-door,.fir_door .right-door {
|
||||
/* transform: rotateY(140deg); */
|
||||
transform: translateX(90%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.left .header {
|
||||
width: 100%;
|
||||
@ -146,6 +303,7 @@ onUnmounted(() => {
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.right .r-box {
|
||||
width: 482px;
|
||||
height: 328px;
|
||||
|
||||
@ -1,77 +1,18 @@
|
||||
<!--
|
||||
* @FilePath: \wang-vue-worke:\demo\daping\src\views\demo\demo.vue
|
||||
* @Author: 王路平
|
||||
* @文件版本: V1.0.0
|
||||
* @Date: 2023-01-29 16:53:06
|
||||
* @Description:
|
||||
*
|
||||
* 版权信息 : 2023 by ${再登软件}, All Rights Reserved.
|
||||
-->
|
||||
<template>
|
||||
<div :class="$style['container']">
|
||||
<div class="title">
|
||||
<h1>大屏可视化</h1>
|
||||
<dv-decoration-5 style="width: 100%; height: 100px"></dv-decoration-5>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="content-top">
|
||||
<content></content>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div id="videoWrapper" style="width: 1600px;height: 900px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getCurrentInstance, inject, onMounted, reactive, ref } from "vue";
|
||||
|
||||
import border1 from "@/components/borderBox/border1.vue";
|
||||
import content from "./content.vue";
|
||||
const a = ref(0);
|
||||
|
||||
|
||||
|
||||
// let echarts: any = inject("$echarts"); // 主要
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { onMounted, onUnmounted, ref, reactive } from 'vue'
|
||||
import JSMpeg from '@cycjimmy/jsmpeg-player'
|
||||
let videoRef = ref(null)
|
||||
onMounted(()=>{
|
||||
new JSMpeg.VideoElement('#videoWrapper', 'ws://localhost:9999');
|
||||
})
|
||||
</script>
|
||||
|
||||
<style module scoped>
|
||||
.container {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
color: #20aec5;
|
||||
background-color: #100c2a;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.title > h1 {
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
}
|
||||
.content-top {
|
||||
/* width: 100%; */
|
||||
/* height: 50vh; */
|
||||
margin-top: -50px;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
overflow: hidden !important;
|
||||
-ms-overflow-style: none; /* IE + Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user