diff --git a/package.json b/package.json
index e505106..610a243 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/views/Elevator/components/Buttons.vue b/src/views/Elevator/components/Buttons.vue
new file mode 100644
index 0000000..abce943
--- /dev/null
+++ b/src/views/Elevator/components/Buttons.vue
@@ -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>
diff --git a/src/views/Elevator/components/LeftStatus.vue b/src/views/Elevator/components/LeftStatus.vue
new file mode 100644
index 0000000..91cf6e0
--- /dev/null
+++ b/src/views/Elevator/components/LeftStatus.vue
@@ -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>
diff --git a/src/views/Elevator/images/elevator.svg b/src/views/Elevator/images/elevator.svg
new file mode 100644
index 0000000..56241c9
--- /dev/null
+++ b/src/views/Elevator/images/elevator.svg
@@ -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>
\ No newline at end of file
diff --git a/src/views/Elevator/images/left.png b/src/views/Elevator/images/left.png
new file mode 100644
index 0000000..3f3c2d9
Binary files /dev/null and b/src/views/Elevator/images/left.png differ
diff --git a/src/views/Elevator/images/right.png b/src/views/Elevator/images/right.png
new file mode 100644
index 0000000..b4be855
Binary files /dev/null and b/src/views/Elevator/images/right.png differ
diff --git a/src/views/Elevator/index.vue b/src/views/Elevator/index.vue
index 7c06526..3c68667 100644
--- a/src/views/Elevator/index.vue
+++ b/src/views/Elevator/index.vue
@@ -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;
diff --git a/src/views/demo/demo.vue b/src/views/demo/demo.vue
index 9416805..3771653 100644
--- a/src/views/demo/demo.vue
+++ b/src/views/demo/demo.vue
@@ -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>