diff --git a/hx-ai-intelligent/src/router/equipmentControl.ts b/hx-ai-intelligent/src/router/equipmentControl.ts
index ffc3285..e6a13b3 100644
--- a/hx-ai-intelligent/src/router/equipmentControl.ts
+++ b/hx-ai-intelligent/src/router/equipmentControl.ts
@@ -29,11 +29,11 @@ const equipmentControl = {
       name: 'liftSystem',
       meta: { title: '电梯系统', hideChildren: true, icon: 'shebeiqunkong' },
       component: Base,
-      redirect: { name: 'liftSystem' },
+      redirect: { name: 'liftSystemIndex' },
       children: [
         {
           path: 'index',
-          name: 'liftSystem',
+          name: 'liftSystemIndex',
           component: () => import('/@/view/equipmentControl/liftSystem/index.vue'),
           meta: {
             title: '电梯系统',
diff --git a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/index.vue b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/index.vue
index ab3910d..9e4ca70 100644
--- a/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/index.vue
+++ b/hx-ai-intelligent/src/view/alarmManagement/alarmSettings/index.vue
@@ -346,4 +346,3 @@
     background-color: grey !important;
   }
 </style>
-../../../api/alarmManagement/alarmSettings/deviceAlarms../../../api/alarmManagement/alarmSettings/energyAlarm../../../api/alarmManagement/alarmSettings/notificationManagements
diff --git a/hx-ai-intelligent/src/view/equipmentControl/electricDoor/index.vue b/hx-ai-intelligent/src/view/equipmentControl/electricDoor/index.vue
index 0431122..8cae1c6 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/electricDoor/index.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/electricDoor/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="map-box">
     <!-- 开关按钮 -->
-    <div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
+    <div class="drawer-box-ins" v-if="!visible" @click="toggleDrawer">
       <DoubleLeftOutlined class="drawer-icon" style="color: white" />
     </div>
     <!-- 门位置 -->
@@ -262,7 +262,7 @@
     // 总容器与抽屉按钮
 
     // 抽屉打开按钮
-    .drawer-box-in {
+    .drawer-box-ins {
       width: 24px;
       height: 24px;
       border-radius: 2px;
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/liftState/escalator.png b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/escalator.png
new file mode 100644
index 0000000..08438b8
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/escalator.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift-suspend.svg b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift-suspend.svg
new file mode 100644
index 0000000..5f82408
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift-suspend.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.6513671875" height="14.65087890625" viewBox="0 0 14.6513671875 14.65087890625" fill="none">
+<path d="M12.6509 -1.17188e-05L1.99995 -1.17188e-05C0.895384 -1.17188e-05 -4.68751e-05 0.895419 -4.68751e-05 1.99999L-4.68751e-05 12.6509C-4.68751e-05 13.7555 0.895384 14.6509 1.99995 14.6509L12.6509 14.6509C13.7555 14.6509 14.6509 13.7555 14.6509 12.6509L14.6509 1.99999C14.6509 0.895419 13.7555 -1.17188e-05 12.6509 -1.17188e-05ZM6.76406 4.16484C6.23629 4.16484 5.80858 3.73709 5.80855 3.20936L5.80858 3.20936C5.80858 2.68167 6.23629 2.25389 6.76406 2.25389C7.29173 2.25389 7.71953 2.68167 7.71953 3.20936C7.71953 3.73709 7.29173 4.16484 6.76406 4.16484ZM5.80855 7.5471L5.80855 5.12019C5.80855 4.79533 6.05697 4.54689 6.38183 4.54689L7.1462 4.54689C7.47106 4.54689 7.71953 4.79533 7.71953 5.12019L7.71953 5.63612L5.80858 7.5471L5.80855 7.5471ZM3.40053 11.6944L5.17775 11.6944C5.4835 11.6944 5.77012 11.5606 5.98034 11.3503L10.3183 7.01241L11.4839 7.01241C12.1146 7.01241 12.6306 6.49651 12.6306 5.86587C12.6306 5.23525 12.1146 4.71929 11.4839 4.71929L9.84051 4.71929C9.55385 4.71929 9.24811 4.85308 9.0379 5.06328L4.69998 9.40117L3.40053 9.40117C2.76991 9.40117 2.25395 9.91717 2.25395 10.5478C2.25395 11.1784 2.76991 11.6944 3.40053 11.6944Z" fill-rule="evenodd"  fill="rgba(255, 188, 70, 1)" >
+</path>
+</svg>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift-unknown.svg b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift-unknown.svg
new file mode 100644
index 0000000..7fb10a2
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/lift-unknown.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14.6513671875" height="14.65087890625" viewBox="0 0 14.6513671875 14.65087890625" fill="none">
+<path d="M12.6509 -1.17188e-05L1.99995 -1.17188e-05C0.895384 -1.17188e-05 -4.68751e-05 0.895419 -4.68751e-05 1.99999L-4.68751e-05 12.6509C-4.68751e-05 13.7555 0.895384 14.6509 1.99995 14.6509L12.6509 14.6509C13.7555 14.6509 14.6509 13.7555 14.6509 12.6509L14.6509 1.99999C14.6509 0.895419 13.7555 -1.17188e-05 12.6509 -1.17188e-05ZM6.76406 4.16484C6.23629 4.16484 5.80858 3.73709 5.80855 3.20936L5.80858 3.20936C5.80858 2.68167 6.23629 2.25389 6.76406 2.25389C7.29173 2.25389 7.71953 2.68167 7.71953 3.20936C7.71953 3.73709 7.29173 4.16484 6.76406 4.16484ZM5.80855 7.5471L5.80855 5.12019C5.80855 4.79533 6.05697 4.54689 6.38183 4.54689L7.1462 4.54689C7.47106 4.54689 7.71953 4.79533 7.71953 5.12019L7.71953 5.63612L5.80858 7.5471L5.80855 7.5471ZM3.40053 11.6944L5.17775 11.6944C5.4835 11.6944 5.77012 11.5606 5.98034 11.3503L10.3183 7.01241L11.4839 7.01241C12.1146 7.01241 12.6306 6.49651 12.6306 5.86587C12.6306 5.23525 12.1146 4.71929 11.4839 4.71929L9.84051 4.71929C9.55385 4.71929 9.24811 4.85308 9.0379 5.06328L4.69998 9.40117L3.40053 9.40117C2.76991 9.40117 2.25395 9.91717 2.25395 10.5478C2.25395 11.1784 2.76991 11.6944 3.40053 11.6944Z" fill-rule="evenodd"  fill="rgba(167, 66, 255, 1)" >
+</path>
+</svg>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-alarm.svg b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-alarm.svg
new file mode 100644
index 0000000..d3bc47c
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-alarm.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.3515625" height="15.353515625" viewBox="0 0 15.3515625 15.353515625" fill="none">
+<path d="M15.0734 11.1506L8.34844 15.1864C8.16256 15.2977 7.91856 15.3532 7.67626 15.3532C7.43304 15.3532 7.18901 15.2977 7.00313 15.1864L0.278229 11.1506C-0.0927429 10.9286 -0.0927429 10.5665 0.278229 10.3439L1.41856 9.66016L6.60805 12.774C6.90598 12.9521 7.28445 13.0505 7.67619 13.0505C8.06707 13.0505 8.44553 12.9521 8.74334 12.774L13.9328 9.66016L15.0733 10.3439C15.4443 10.5663 15.4443 10.9286 15.0734 11.1506Z"   fill="rgba(243, 97, 99, 1)" >
+</path>
+<path d="M15.0734 8.07971L8.34844 12.1144C8.16256 12.2256 7.91856 12.2816 7.67626 12.2816C7.43304 12.2816 7.18901 12.2256 7.00313 12.1144L0.278229 8.07971C-0.0927429 7.85651 -0.0927429 7.49554 0.278229 7.27222L1.41856 6.58789L6.60805 9.70172C6.90598 9.88031 7.28445 9.97888 7.67619 9.97888C8.06707 9.97888 8.44553 9.88031 8.74334 9.70172L13.9328 6.58789L15.0733 7.27222C15.4443 7.49554 15.4443 7.85657 15.0734 8.07971Z"   fill="rgba(243, 97, 99, 1)" >
+</path>
+<path d="M15.0734 5.00887L8.34847 9.04474C8.16256 9.15551 7.91859 9.21149 7.67625 9.21149C7.43299 9.21149 7.189 9.15551 7.00311 9.04474L0.278252 5.00887C-0.0927505 4.78691 -0.0927505 4.42469 0.278252 4.20217L7.00311 0.166824C7.189 0.0556412 7.43299 0 7.67625 0C7.91859 0 8.16256 0.055542 8.34847 0.166824L15.0734 4.20217C15.4443 4.42469 15.4443 4.78691 15.0734 5.00887Z"   fill="rgba(243, 97, 99, 1)" >
+</path>
+</svg>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-fault.svg b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-fault.svg
new file mode 100644
index 0000000..28f1b49
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-fault.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.3515625" height="15.353515625" viewBox="0 0 15.3515625 15.353515625" fill="none">
+<path d="M15.0734 11.1506L8.34844 15.1864C8.16256 15.2977 7.91856 15.3532 7.67626 15.3532C7.43304 15.3532 7.18901 15.2977 7.00313 15.1864L0.278229 11.1506C-0.0927429 10.9286 -0.0927429 10.5665 0.278229 10.3439L1.41856 9.66016L6.60805 12.774C6.90598 12.9521 7.28445 13.0505 7.67619 13.0505C8.06707 13.0505 8.44553 12.9521 8.74334 12.774L13.9328 9.66016L15.0733 10.3439C15.4443 10.5663 15.4443 10.9286 15.0734 11.1506Z"   fill="#FF7636" >
+</path>
+<path d="M15.0734 8.07971L8.34844 12.1144C8.16256 12.2256 7.91856 12.2816 7.67626 12.2816C7.43304 12.2816 7.18901 12.2256 7.00313 12.1144L0.278229 8.07971C-0.0927429 7.85651 -0.0927429 7.49554 0.278229 7.27222L1.41856 6.58789L6.60805 9.70172C6.90598 9.88031 7.28445 9.97888 7.67619 9.97888C8.06707 9.97888 8.44553 9.88031 8.74334 9.70172L13.9328 6.58789L15.0733 7.27222C15.4443 7.49554 15.4443 7.85657 15.0734 8.07971Z"   fill="#FF7636" >
+</path>
+<path d="M15.0734 5.00887L8.34847 9.04474C8.16256 9.15551 7.91859 9.21149 7.67625 9.21149C7.43299 9.21149 7.189 9.15551 7.00311 9.04474L0.278252 5.00887C-0.0927505 4.78691 -0.0927505 4.42469 0.278252 4.20217L7.00311 0.166824C7.189 0.0556412 7.43299 0 7.67625 0C7.91859 0 8.16256 0.055542 8.34847 0.166824L15.0734 4.20217C15.4443 4.42469 15.4443 4.78691 15.0734 5.00887Z"   fill="#FF7636" >
+</path>
+</svg>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-normal.svg b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-normal.svg
new file mode 100644
index 0000000..5188930
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-normal.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.3515625" height="15.353515625" viewBox="0 0 15.3515625 15.353515625" fill="none">
+<path d="M15.0734 11.1506L8.34844 15.1864C8.16256 15.2977 7.91856 15.3532 7.67626 15.3532C7.43304 15.3532 7.18901 15.2977 7.00313 15.1864L0.278229 11.1506C-0.0927429 10.9286 -0.0927429 10.5665 0.278229 10.3439L1.41856 9.66016L6.60805 12.774C6.90598 12.9521 7.28445 13.0505 7.67619 13.0505C8.06707 13.0505 8.44553 12.9521 8.74334 12.774L13.9328 9.66016L15.0733 10.3439C15.4443 10.5663 15.4443 10.9286 15.0734 11.1506Z"   fill="rgba(0, 255, 210, 1)" >
+</path>
+<path d="M15.0734 8.07971L8.34844 12.1144C8.16256 12.2256 7.91856 12.2816 7.67626 12.2816C7.43304 12.2816 7.18901 12.2256 7.00313 12.1144L0.278229 8.07971C-0.0927429 7.85651 -0.0927429 7.49554 0.278229 7.27222L1.41856 6.58789L6.60805 9.70172C6.90598 9.88031 7.28445 9.97888 7.67619 9.97888C8.06707 9.97888 8.44553 9.88031 8.74334 9.70172L13.9328 6.58789L15.0733 7.27222C15.4443 7.49554 15.4443 7.85657 15.0734 8.07971Z"   fill="rgba(0, 255, 210, 1)" >
+</path>
+<path d="M15.0734 5.00887L8.34847 9.04474C8.16256 9.15551 7.91859 9.21149 7.67625 9.21149C7.43299 9.21149 7.189 9.15551 7.00311 9.04474L0.278252 5.00887C-0.0927505 4.78691 -0.0927505 4.42469 0.278252 4.20217L7.00311 0.166824C7.189 0.0556412 7.43299 0 7.67625 0C7.91859 0 8.16256 0.055542 8.34847 0.166824L15.0734 4.20217C15.4443 4.42469 15.4443 4.78691 15.0734 5.00887Z"   fill="rgba(0, 255, 210, 1)" >
+</path>
+</svg>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-repair.svg b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-repair.svg
new file mode 100644
index 0000000..9709cea
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/state-repair.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="15.3515625" height="15.353515625" viewBox="0 0 15.3515625 15.353515625" fill="none">
+<path d="M15.0734 11.1506L8.34844 15.1864C8.16256 15.2977 7.91856 15.3532 7.67626 15.3532C7.43304 15.3532 7.18901 15.2977 7.00313 15.1864L0.278229 11.1506C-0.0927429 10.9286 -0.0927429 10.5665 0.278229 10.3439L1.41856 9.66016L6.60805 12.774C6.90598 12.9521 7.28445 13.0505 7.67619 13.0505C8.06707 13.0505 8.44553 12.9521 8.74334 12.774L13.9328 9.66016L15.0733 10.3439C15.4443 10.5663 15.4443 10.9286 15.0734 11.1506Z"   fill="rgba(255, 188, 70, 1)" >
+</path>
+<path d="M15.0734 8.07971L8.34844 12.1144C8.16256 12.2256 7.91856 12.2816 7.67626 12.2816C7.43304 12.2816 7.18901 12.2256 7.00313 12.1144L0.278229 8.07971C-0.0927429 7.85651 -0.0927429 7.49554 0.278229 7.27222L1.41856 6.58789L6.60805 9.70172C6.90598 9.88031 7.28445 9.97888 7.67619 9.97888C8.06707 9.97888 8.44553 9.88031 8.74334 9.70172L13.9328 6.58789L15.0733 7.27222C15.4443 7.49554 15.4443 7.85657 15.0734 8.07971Z"   fill="rgba(255, 188, 70, 1)" >
+</path>
+<path d="M15.0734 5.00887L8.34847 9.04474C8.16256 9.15551 7.91859 9.21149 7.67625 9.21149C7.43299 9.21149 7.189 9.15551 7.00311 9.04474L0.278252 5.00887C-0.0927505 4.78691 -0.0927505 4.42469 0.278252 4.20217L7.00311 0.166824C7.189 0.0556412 7.43299 0 7.67625 0C7.91859 0 8.16256 0.055542 8.34847 0.166824L15.0734 4.20217C15.4443 4.42469 15.4443 4.78691 15.0734 5.00887Z"   fill=" rgba(255, 188, 70, 1)" >
+</path>
+</svg>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/image/liftState/straightLadder.png b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/straightLadder.png
new file mode 100644
index 0000000..d3c15d3
Binary files /dev/null and b/hx-ai-intelligent/src/view/equipmentControl/image/liftState/straightLadder.png differ
diff --git a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue
index da06560..22b2dc6 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/index.vue
@@ -1,44 +1,143 @@
 <template>
-  <div class="map-box">
-    <div class="map">
-      <liftInfo v-for="(item, index) in liftBox" :key="index" :liftInfo="item" />
-    </div>
+  <div class="left-box">
+    <liftInfo
+      v-for="(item, index) in liftBox"
+      :key="index"
+      :liftInfo="item"
+      @click="clickLift(item)" />
+    <a-drawer
+      v-model:visible="visible"
+      class="left-item"
+      :width="600"
+      :forceRender="preload"
+      placement="right"
+      :body-style="{
+        backgroundColor: 'rgba(0, 0, 0, 1)',
+        overflow: 'hidden',
+        position: 'relative',
+      }"
+      :closable="false"
+      id="drawer"
+      :maskStyle="{ 'background-color': 'rgba(0, 0, 0,0.5)' }">
+      <a-tabs :activeKey="'1'">
+        <a-tab-pane key="1" tab="日志">
+          <liftPage ref="leftPage" @clickDrawer="clickDrawer" />
+        </a-tab-pane>
+      </a-tabs>
+    </a-drawer>
   </div>
 </template>
 
 <script setup lang="ts">
   import { ref, onMounted } from 'vue';
   import liftInfo from './liftInfo.vue';
+  import liftPage from './liftPage.vue';
   // 请求
 
-  // 初始化 ===========================================================
+  //弹窗
+  const visible = ref(false);
+  // 预加载flag，获得分区数据后，预加载抽屉，防止获取ref报错
+  const preload = ref(false);
+  //选择的电梯
+  const selctLeft = ref({});
+  // table页面 ref
+  const leftPage = ref(null);
 
+  // 初始化 ===========================================================
   onMounted(() => {});
 
   // tab页部分 ========================================================
   const liftBox = ref([
     {
-      name: '办公区域扶梯A',
+      name: '1站台西侧扶梯',
+      workState: 1,
+      faultState: 2,
+      direction: 1,
+      type: 2,
+      isLeft: true,
+      styleText: { left: '10%', bottom: '33%' },
+    },
+    {
+      name: '2站台西侧扶梯',
+      workState: 1,
+      faultState: 2,
+      direction: 1,
+      type: 2,
+      isLeft: true,
+      styleText: { left: '3%', bottom: '52%' },
+    },
+    {
+      name: '2站台东侧扶梯',
+      workState: 1,
+      faultState: 2,
+      direction: 1,
+      type: 2,
+      isLeft: true,
+      styleText: { left: '48%', bottom: '69%' },
+    },
+    {
+      name: '1站台东侧扶梯',
+      workState: 1,
+      faultState: 2,
+      direction: 1,
+      type: 2,
+      isLeft: true,
+      styleText: { left: '65%', bottom: '62%' },
+    },
+    {
+      name: '办公东区扶梯',
+      workState: 1,
+      faultState: 2,
+      direction: 1,
+      type: 2,
+      isLeft: true,
+      styleText: { left: '78%', bottom: '42%' },
+    },
+    {
+      name: '办公西区扶梯',
       workState: 1,
       faultState: 2,
       direction: 1,
       type: 2,
       isLeft: true,
-      styleText: { left: '245px', bottom: '230px' },
+      styleText: { left: '15%', bottom: '15%' },
+    },
+    {
+      name: '1站台直梯',
+      workState: 0,
+      faultState: 3,
+      direction: 0,
+      type: 1,
+      isLeft: false,
+      styleText: { left: '35%', bottom: '50%' },
     },
     {
-      name: '办公区域扶梯B',
+      name: '2站台直梯',
       workState: 0,
       faultState: 3,
       direction: 0,
       type: 1,
       isLeft: false,
-      styleText: { left: '700px', bottom: '360px' },
+      styleText: { left: '52%', bottom: '52%' },
     },
   ]);
+  //点击获取详情
+  const clickLift = (item: any) => {
+    visible.value = true;
+    console.log(item, '获取详细日志');
+    selctLeft.value = item;
+    setTimeout(() => {
+      leftPage.value.toggle(selctLeft.value);
+    }, 100);
+    // 开始预加载
+    preload.value = true;
+  };
+  const clickDrawer = () => {
+    visible.value = false;
+  };
 </script>
 <style lang="less" scoped>
-  .map-box {
+  .left-box {
     // 颜色变量，用于区别颜色
     // 正常 - 开启 - 上行 -下行
     --on: #0dffa4;
@@ -56,10 +155,24 @@
     --size: 40px;
     width: 100%;
     height: 100%;
-    .map {
-      width: 1280px;
-      height: 720px;
-      background-image: url(../image/bg.jpg);
-    }
+    position: relative;
+    border-radius: 4px;
+    background-image: url(../image/bg.jpg);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    overflow: hidden;
+  }
+  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
+    color: white !important;
+  }
+  :deep(.ant-tabs-ink-bar) {
+    background: linear-gradient(180deg, rgba(86, 221, 253, 1) 0%, rgba(25, 176, 255, 1) 100%);
+  }
+  :deep(.ant-tabs-tabpane) {
+    color: white;
+    padding: 20px 20px 0px 20px;
+    width: 100%;
+    height: 950px;
+    overflow: hidden;
   }
 </style>
diff --git a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
index ff7a321..e14bf23 100644
--- a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
+++ b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftInfo.vue
@@ -26,26 +26,73 @@
             </div>
           </div>
           <!-- 是否故障 -->
+          <!-- 维修故障告警 -->
           <div class="item">
             <div class="item-box">
               <div class="icon">
                 <div class="icon-item">
-                  <img src="../image/liftState/lift-normal.svg" alt="" />
+                  <img
+                    :src="
+                      { '0': stateNormal, '1': stateRepair, '2': stateFault, '3': stateAlarm }[3]
+                    "
+                    alt="" />
                 </div>
               </div>
             </div>
-            <div class="item-text">开启</div>
+            <div
+              class="item-text"
+              :style="{
+                color: {
+                  '0': 'rgba(0, 255, 210, 1)', //正常
+                  '1': 'rgba(255, 188, 70, 1)', //维修
+                  '2': 'rgba(255, 118, 54, 1)', //故障
+                  '3': 'rgba(243, 97, 99, 1)', //告警
+                }[3],
+              }"
+              >{{ { '0': '正常', '1': '维修', '2': '故障', '3': '告警' }[3] }}</div
+            >
           </div>
           <!-- 如何运行 -->
+          <!-- 上行 下行 暂停 急停 未知 -->
           <div class="item">
             <div class="item-box">
               <div class="icon">
                 <div class="icon-item">
-                  <img src="../image/liftState/lift-normal.svg" alt="" />
+                  <img
+                    :src="
+                      {
+                        '0': liftNormal,
+                        '1': liftNormal,
+                        '2': liftPause,
+                        '3': liftStop,
+                        '4': liftUnknown,
+                      }[2]
+                    "
+                    alt="" />
                 </div>
               </div>
             </div>
-            <div class="item-text">开启</div>
+            <div
+              class="item-text"
+              :style="{
+                color: {
+                  '0': 'rgba(0, 255, 210, 1)', //上行
+                  '1': 'rgba(0, 255, 210, 1)', //下行
+                  '2': 'rgba(255, 188, 70, 1)', //暂停
+                  '3': 'rgba(243, 97, 99, 1)', //急停
+                  '4': 'rgba(167, 66, 255, 1)', //未知
+                }[2],
+              }"
+              >{{
+                {
+                  '0': '上行', //上行
+                  '1': '下行', //下行
+                  '2': '暂停', //暂停
+                  '3': '急停', //急停
+                  '4': '未知', //未知
+                }[2]
+              }}</div
+            >
           </div>
         </div>
       </div>
@@ -56,6 +103,15 @@
 
 <script setup lang="ts">
   import { ref, computed, onMounted } from 'vue';
+  //图片
+  import stateRepair from '../image/liftState/state-repair.svg'; //维修
+  import stateFault from '../image/liftState/state-fault.svg'; //故障
+  import stateAlarm from '../image/liftState/state-alarm.svg'; //告警
+  import stateNormal from '../image/liftState/state-normal.svg'; //正常
+  import liftNormal from '../image/liftState/lift-normal.svg'; //上下行
+  import liftStop from '../image/liftState/lift-stop.svg'; //急停
+  import liftUnknown from '../image/liftState/lift-unknown.svg'; //未知
+  import liftPause from '../image/liftState/lift-pause.svg'; //暂停
 
   // 请求
 
@@ -118,8 +174,8 @@
       .info-box {
         // 字体颜色变量
         --text: rgb(20, 255, 255);
-        width: 250px;
-        height: 130px;
+        width: 224.54px;
+        height: 110px;
         display: flex;
         gap: 5px;
         flex-direction: column;
@@ -138,8 +194,9 @@
           .dot {
             display: inline-block;
             width: 2px;
-            height: 16px;
+            height: 12px;
             vertical-align: middle;
+            margin-top: -4px;
             background: var(--text);
           }
           // 标题
@@ -165,22 +222,22 @@
               justify-content: center;
               // border: 1px solid red;
               .icon {
-                width: 55px;
-                height: 55px;
+                width: 45px;
+                height: 45px;
                 background-image: url(../image/box.svg);
                 background-size: 130% 130%;
                 background-repeat: no-repeat;
-                background-position: left -8px top -8px;
+                background-position: left -6.5px top -3px;
                 // border: 1px solid red;
                 position: relative;
                 .icon-item {
                   position: absolute;
-                  width: 20px;
-                  height: 20px;
-                  left: 0;
+                  width: 16px;
+                  height: 16px;
+                  left: 1px;
                   right: 0;
                   bottom: 0;
-                  top: 0;
+                  top: -1px;
                   margin: auto;
                   img {
                     width: 100%;
@@ -190,6 +247,7 @@
               }
             }
             .item-text {
+              margin-top: 2px;
               height: 20px;
               text-align: center;
               font-size: 12px;
diff --git a/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftPage.vue b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftPage.vue
new file mode 100644
index 0000000..63a2403
--- /dev/null
+++ b/hx-ai-intelligent/src/view/equipmentControl/liftSystem/liftPage.vue
@@ -0,0 +1,279 @@
+<template>
+  <div style="width: 100%; height: 100%; overflow: hidden">
+    <div style="width: 100%; height: 50px; display: flex">
+      <img
+        v-if="selctLeft.type == 1"
+        style="width: 42px; height: 42px; margin-left: -6px"
+        src="../image/liftState/straightLadder.png"
+        alt="" />
+      <img
+        v-else-if="selctLeft.type == 2"
+        style="width: 42px; height: 42px; margin-left: -6px"
+        src="../image/liftState/escalator.png"
+        alt="" />
+      <div style="margin-left: 6px; font-size: 20px; line-height: 28px">
+        {{ selctLeft.name }}
+      </div>
+    </div>
+    <!-- 左侧抽屉的关闭按钮 -->
+    <div class="drawer-box-out" @click="clickDrawer()">
+      <DoubleRightOutlined class="drawer-icon" style="color: white" />
+    </div>
+    <div style="width: 100%; height: calc(100% - 50px); display: flex; position: relative">
+      <a-table
+        style="width: 100%"
+        :columns="column"
+        :data-source="dataSource"
+        :pagination="pagination">
+        <template #bodyCell="{ record, column }">
+          <template v-if="column.dataIndex === 'switch'">
+            <a-tag
+              style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
+              :style="{
+                border: {
+                  '0': '1px solid rgba(0, 255, 210, 1)', //2
+                  '1': '1px solid rgba(191, 205, 226, 1)', //关闭
+                }[record.switch],
+                color: {
+                  '0': 'rgba(0, 255, 210, 1)', //正常
+                  '1': 'rgba(191, 205, 226, 1)', //关闭
+                }[record.switch],
+              }"
+              >{{ { '0': '开启', '1': '关闭' }[record.switch] }}</a-tag
+            >
+          </template>
+          <template v-if="column.dataIndex === 'state'">
+            <a-tag
+              style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
+              :style="{
+                border: {
+                  '0': '1px solid rgba(0, 255, 210, 1)', //正常
+                  '1': '1px solid rgba(255, 188, 70, 1)', //维修
+                  '2': '1px solid rgba(255, 118, 54, 1)', //故障
+                  '3': '1px solid rgba(243, 97, 99, 1)', //告警
+                }[record.state],
+                color: {
+                  '0': 'rgba(0, 255, 210, 1)', //正常
+                  '1': 'rgba(255, 188, 70, 1)', //维修
+                  '2': 'rgba(255, 118, 54, 1)', //故障
+                  '3': 'rgba(243, 97, 99, 1)', //告警
+                }[record.state],
+              }"
+              >{{ { '0': '正常', '1': '维修', '2': '故障', '3': '告警' }[record.state] }}</a-tag
+            >
+          </template>
+          <template v-if="column.dataIndex === 'lift'">
+            <a-tag
+              style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
+              :style="{
+                border: {
+                  '0': '1px solid rgba(0, 255, 210, 1)', //上行
+                  '1': '1px solid rgba(0, 255, 210, 1)', //下行
+                  '2': '1px solid rgba(255, 188, 70, 1)', //暂停
+                  '3': '1px solid rgba(243, 97, 99, 1)', //急停
+                  '4': '1px solid rgba(167, 66, 255, 1)', //未知
+                }[record.lift],
+                color: {
+                  '0': 'rgba(0, 255, 210, 1)', //上行
+                  '1': 'rgba(0, 255, 210, 1)', //下行
+                  '2': 'rgba(255, 188, 70, 1)', //暂停
+                  '3': 'rgba(243, 97, 99, 1)', //急停
+                  '4': 'rgba(167, 66, 255, 1)', //未知
+                }[record.lift],
+              }"
+              >{{
+                {
+                  '0': '上行', //上行
+                  '1': '下行', //下行
+                  '2': '暂停', //暂停
+                  '3': '急停', //急停
+                  '4': '未知', //未知
+                }[record.lift]
+              }}</a-tag
+            >
+          </template>
+        </template>
+      </a-table>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { DoubleRightOutlined } from '@ant-design/icons-vue';
+
+  import { ref } from 'vue';
+  const emit = defineEmits(['clickDrawer']);
+
+  const selctLeft = ref({});
+  // 改变页码
+  const handleChangePage = (current: number, pageSize: number) => {
+    pagination.value.current = current;
+    pagination.value.pageSize = pageSize;
+  };
+
+  const dataSource = ref([
+    { time: '2022-03-01 10:00:00', state: '0', switch: '0', lift: 1 },
+    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 2 },
+    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
+    { time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 0 },
+    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
+    { time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 3 },
+    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
+    { time: '2022-03-01 10:00:00', state: '0', switch: 0, lift: 4 },
+    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
+    { time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 1 },
+    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
+    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 0 },
+    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
+    { time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 3 },
+    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
+    { time: '2022-03-01 10:00:00', state: '0', switch: 0, lift: 4 },
+    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
+    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 2 },
+    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
+  ]);
+  const pagination = ref({
+    total: dataSource.value.length,
+    size: 'small',
+    current: 1,
+    pageSize: 10,
+    showQuickJumper: false,
+    showLessItems: false,
+    showSizeChanger: false,
+    responsive: true,
+    showTotal: (total: number, range: any) => (total && range ? `` : ''), //显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录
+    onChange: handleChangePage,
+  });
+  const column = [
+    {
+      title: '执行时间',
+      dataIndex: 'time',
+      key: 'time',
+      width: 140,
+    },
+    {
+      title: '开关',
+      dataIndex: 'switch',
+      key: 'switch',
+      width: 80,
+    },
+    {
+      title: '状态',
+      dataIndex: 'state',
+      key: 'state',
+      width: 80,
+    },
+    {
+      title: '模式',
+      dataIndex: 'lift',
+      key: 'lift',
+      width: 80,
+    },
+  ];
+  const toggle = (data: any) => {
+    pagination.value.current = 1;
+    selctLeft.value = data;
+  };
+  const clickDrawer = () => {
+    emit('clickDrawer');
+  };
+  defineExpose({
+    toggle,
+  });
+</script>
+<style scoped lang="less">
+  :deep(.ant-table-thead > tr) {
+    height: 30px !important;
+  }
+  :deep(.ant-table-tbody > tr) {
+    height: 30px !important;
+  }
+  :deep(.ant-table-thead > tr > th) {
+    background-color: #1a2230;
+    border: 1px solid rgba(163, 192, 243, 0.8);
+    color: white;
+    text-align: center;
+    font-weight: normal !important;
+    padding: 12px !important;
+  }
+  :deep(.ant-table-tbody > tr > td) {
+    background-color: rgba(0, 0, 0, 0.9) !important;
+    color: white;
+    border: 1px solid rgba(163, 192, 243, 0.8);
+    text-align: center;
+    padding: 12px !important;
+  }
+  :deep(.ant-table-row:hover td) {
+    background: rgba(0, 0, 0, 0.9) !important;
+    cursor: pointer;
+  }
+  :deep(.ant-tabs-tab-btn) {
+    font-size: 20px;
+    font-weight: bold;
+    color: #fff !important;
+  }
+  //分页
+  :deep(.ant-pagination-item) {
+    background-color: rgba(0, 0, 0, 1) !important;
+    border: 1px solid rgba(147, 200, 243, 1) !important;
+    border-radius: 2px !important;
+    margin: 0 8px !important;
+  }
+  :deep(.ant-pagination-item a) {
+    color: rgba(12, 140, 246, 1) !important;
+  }
+  :deep(.ant-pagination-item-active) {
+    border-radius: 2px !important;
+    background: rgba(12, 140, 246, 1) !important;
+  }
+  :deep(.ant-pagination-item-active a) {
+    color: white !important;
+  }
+  :deep(.ant-pagination-prev) {
+    background-color: rgba(0, 0, 0, 1) !important;
+    border: 1px solid rgba(147, 200, 243, 1) !important;
+  }
+  :deep(.ant-pagination-next) {
+    background-color: rgba(0, 0, 0, 1) !important;
+    border: 1px solid rgba(147, 200, 243, 1) !important;
+  }
+  :deep(.anticon) {
+    color: rgba(12, 140, 246, 1) !important;
+  }
+  :deep(.ant-table-pagination) {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  :deep(.ant-spin-container) {
+    height: 100% !important;
+  }
+  :deep(.ant-spin-nested-loading) {
+    height: 100% !important;
+  }
+  //分页 在右边 取消
+  // :deep(.ant-table-pagination-right) {
+  //   justify-content: normal !important;
+  // }
+  // 抽屉关闭按钮
+  .drawer-box-out {
+    width: 24px;
+    height: 24px;
+    border-radius: 2px;
+    position: absolute;
+    right: 576px;
+    z-index: 2;
+    top: 50%;
+    margin: auto;
+    background: #268aff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 0 8px 8px 0;
+    color: white;
+  }
+  :deep(.anticon) {
+    color: #fff !important;
+  }
+</style>