fix:修改网关告警页面展示 添加电动门 修改页面问题

hx-ai-intelligent/src/router/equipmentControl.ts

@@ -43,6 +43,25 @@ const equipmentControl = {
         },
       ],
     },
+    {
+      path: 'electricDoor',
+      name: 'electricDoor',
+      meta: { title: '电动门系统', hideChildren: true, icon: 'shebeiqunkong' },
+      component: Base,
+      redirect: { name: 'electricDoorIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'electricDoorIndex',
+          component: () => import('/@/view/equipmentControl/electricDoor/index.vue'),
+          meta: {
+            title: '电动门系统',
+            keepAlive: false,
+            // backApi: [],
+          },
+        },
+      ],
+    },
   ],
 };
 export default equipmentControl;

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/index.vue

@@ -199,6 +199,7 @@
         mainEnergyAlarmConfig,
         energyAlarm,
         configureEnergyAlarms,
+        mainRef,
       );
       //设备告警配置
       const equipmentAlarmConfig = equipmentAlarmTableConfig(
@@ -206,6 +207,7 @@
         mainRefEquipmentAlarm,
         equipmentAlarm,
         configureDeviceAlarms,
+        mainRef,
       );
       //返回设备告警
       const backequipmentAlarm = () => {

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/energyAlarmConfig.ts

@@ -63,6 +63,7 @@ export const energyAlarmConfigs = (
   mainEnergyAlarmConfig: any,
   energyAlarm: any,
   configureDeviceAlarms: any,
+  mainRef: any,
 ) => {
   return {
     title: '告警规则',
@@ -149,6 +150,7 @@ export const energyAlarmConfigs = (
             http.post(energyAlarms.del, { id: data.id }).then(() => {
               NsMessage.success('操作成功');
               mainEnergyAlarmConfig.value?.nsTableRef.reload();
+              mainRef.value?.nsTableRef.reload();
             });
           },
         },

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/ts/equipmentAlarmConfig.ts

@@ -63,6 +63,7 @@ export const equipmentAlarmTableConfig = (
   mainRefEquipmentAlarm: any,
   equipmentAlarm: any,
   configureDeviceAlarms: any,
+  mainRef: any,
 ) => {
   return {
     title: '告警规则',
@@ -148,6 +149,7 @@ export const equipmentAlarmTableConfig = (
             http.post(deviceAlarms.del, { id: data.id }).then(() => {
               NsMessage.success('告警删除成功');
               mainRefEquipmentAlarm.value?.nsTableRef.reload();
+              mainRef.value?.nsTableRef.reload();
             });
           },
         },

hx-ai-intelligent/src/view/alarmManagement/gatewayAlarm/status.vue

@@ -9,31 +9,7 @@
     placement="right"
     @close="handleClose">
     <a-tabs>
-      <a-tab-pane key="1" tab="更新状态">
+      <a-tab-pane key="1" tab="状态流程">
-        <div style="width: 100%; padding: 24px">
-          <a-form ref="formRef" :model="infoObject" :rules="rules">
-            <a-form-item ref="state" label="当前状态" name="state">
-              <a-select
-                v-model:value="infoObject.state"
-                show-search
-                placeholder="请选择设备点位"
-                style="width: 85%"
-                :options="stateOptions"
-                :disabled="true"
-                :filter-option="filterDevicePoint" />
-            </a-form-item>
-            <a-form-item label="备注" name="desc">
-              <a-textarea
-                v-model:value="infoObject.desc"
-                placeholder="请输入异常描述"
-                :disabled="true"
-                style="width: 85%"
-                :autoSize="{ minRows: 4, maxRows: 4 }" />
-            </a-form-item>
-          </a-form>
-        </div>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="状态流程">
         <!-- 只有创建工单流程 -->
         <NsSteps v-bind="config" />
       </a-tab-pane>
@@ -54,7 +30,6 @@
 
     setup() {
       const visible = ref(false);
-      const infoObject = ref({});
       const stateOptions = ref();
       const logList = ref([
         { realName: '李四', state: 3, createTime: '2024-03-10 10:00:00', remarks: '完成' },
@@ -76,7 +51,6 @@
       const toggle = async (data) => {
         let states = await getEnum({ params: { enumType: 'AlarmLogStateEnum' } });
         stateOptions.value = states.data;
-        infoObject.value = { ...logList.value[0] };
         let stateMap = {
           1: '待处理',
           2: '处理中',
@@ -99,7 +73,6 @@
         visible.value = true;
       };
       return {
-        infoObject,
         stateOptions,
         btnClick,
         visible,

hx-ai-intelligent/src/view/equipmentControl/electricDoor/index.vue

@@ -0,0 +1,347 @@
+<template>
+  <div class="map-box">
+    <!-- 开关按钮 -->
+    <div class="drawer-box-in" v-if="!visible" @click="toggleDrawer">
+      <DoubleLeftOutlined class="drawer-icon" style="color: white" />
+    </div>
+    <!-- 门位置 -->
+    <div
+      style="
+        width: 708px;
+        height: 42px;
+        background-color: rgba(245, 154, 35, 0.5);
+        position: absolute;
+        top: 49%;
+        left: 23%;
+        padding: 6px 6px;
+        display: flex;
+        gap: 10px;
+        cursor: pointer;
+      "
+      @click="
+        () => {
+          visible = !visible;
+        }
+      ">
+      <template v-for="index in 4">
+        <div
+          style="
+            flex: 1;
+            height: 100%;
+            text-align: center;
+            line-height: 30px;
+            border: 1px solid #ab8757;
+            font-weight: 500;
+          "
+          :style="{ 'background-color': ['#e43e1e', '#f59a23', '#bbcf10', '#62d7a7'][index - 1] }">
+          {{ ['A号门', 'B号门', 'C号门', 'D号门'][index - 1] }}
+        </div>
+      </template>
+    </div>
+    <!-- 日志弹窗 -->
+    <transition name="zep">
+      <div v-show="visible" class="table">
+        <a-tabs activeKey="1">
+          <a-tab-pane key="1" tab="电动门日志">
+            <!-- 左侧抽屉的关闭按钮 -->
+            <div class="drawer-box-out" v-if="visible" @click="toggleDrawer">
+              <DoubleRightOutlined class="drawer-icon" style="color: white" />
+            </div>
+            <div style="padding: 8px">
+              <a-table
+                :columns="columns"
+                :data-source="dataSource"
+                :pagination="false"
+                :customRow="customRow">
+                <template #bodyCell="{ record, column }">
+                  <template v-if="column.dataIndex === 'state'">
+                    <a-tag
+                      style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
+                      :style="{
+                        border: '1px solid' + ['#39d7bb', '#f3614d', '#ffa403'][record.status - 1],
+                        color: ['#39d7bb', '#f3614d', '#ffa403'][record.status - 1],
+                      }"
+                      >{{ record.state }}</a-tag
+                    >
+                  </template>
+                </template>
+              </a-table>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+    </transition>
+    <!--详细日志 -->
+    <div v-show="detailed" class="table-detail">
+      <div
+        class="close-icon"
+        @click="
+          () => {
+            detailed = !detailed;
+          }
+        ">
+        x
+      </div>
+      <div style="color: rgb(53, 205, 0); font-size: 20px; font-weight: 700">
+        {{ infoObject.name }}
+      </div>
+      <img
+        style="width: 100%; margin-top: -10px"
+        src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
+      <div class="table-detail-box">
+        <electricDoorTables ref="tables" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, onMounted, onUnmounted } from 'vue';
+  import electricDoorTables from './tables.vue';
+
+  import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons-vue';
+
+  const getDoorList = () => {
+    console.log('数据');
+  };
+  const intervalId = setInterval(getDoorList, 3000);
+  //页面 创建
+  onMounted(() => {
+    //调用电梯接口 定时获取电梯接口 获取当前门状态
+    getDoorList();
+  });
+  // 页面销毁
+  onUnmounted(() => {
+    console.log('组件已卸载');
+    // 这里写销毁时需要执行的逻辑
+    clearInterval(intervalId);
+  });
+  const tables = ref(null);
+  const customRow = (record) => {
+    return {
+      //点击 行 进行查看详情
+      onClick: (event) => {
+        detailed.value = !detailed.value;
+        infoObject.value = record;
+        tables.value.toggle(record);
+        // 处理点击事件
+      },
+    };
+  };
+  //当前点击的电动门对象
+  const infoObject = ref({});
+  const columns = [
+    {
+      title: '序号',
+      dataIndex: 'name',
+      key: 'name',
+      width: 100,
+    },
+    {
+      title: '执行时间',
+      dataIndex: 'age',
+      key: 'age',
+      width: 100,
+    },
+    {
+      title: '状态',
+      dataIndex: 'state',
+      key: 'state',
+      width: 160,
+    },
+  ];
+  const dataSource = [
+    {
+      key: '1',
+      name: 'A号门',
+      age: '23:50:20',
+      state: '开启',
+      status: 1,
+    },
+    {
+      key: '2',
+      name: 'B号门',
+      age: '23:50:20',
+      state: '关闭',
+      status: 2,
+    },
+    {
+      key: '3',
+      name: 'C号门',
+      age: '23:50:20',
+      state: '维护中',
+      status: 3,
+    },
+    {
+      key: '4',
+      name: 'D号门',
+      age: '23:50:20',
+      state: '维护中',
+      status: 3,
+    },
+  ];
+  const visible = ref(false);
+  //详情属性
+  const detailed = ref(false);
+  // 抽屉 - 开关事件
+  const toggleDrawer = () => {
+    visible.value = !visible.value;
+  };
+</script>
+<style lang="less" scoped>
+  .map-box {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    border-radius: 4px;
+    background-image: url(../image/electricDoor.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    .table {
+      width: 380px;
+      height: 632px;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.7);
+      padding: 32px 24px;
+      display: flex;
+      position: absolute;
+      // 抽屉关闭按钮
+      .drawer-box-out {
+        width: 24px;
+        height: 24px;
+        border-radius: 2px;
+        position: absolute;
+        right: 356px;
+        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;
+      }
+    }
+    .table-detail {
+      width: 380px;
+      height: 632px;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      background-image: url(../image/door-detail.svg);
+      background-size: 100%;
+      z-index: 3;
+      padding: 32px 32px;
+      .close-icon {
+        position: absolute;
+        right: 2px;
+        top: 2px;
+        font-size: 28px;
+        background-color: rgba(4, 4, 4, 0.9);
+        color: rgb(25, 176, 255);
+        width: 36px;
+        height: 36px;
+        text-align: center;
+        border-radius: 4px;
+        cursor: pointer;
+        font-weight: 500;
+        line-height: 22px;
+        border: 2px solid #4d4040;
+      }
+      .table-detail-box {
+        width: 100%;
+        height: 500px;
+        overflow-y: auto;
+        margin-top: 4px;
+        padding: 0px 4px;
+      }
+    }
+    // 总容器与抽屉按钮
+
+    // 抽屉打开按钮
+    .drawer-box-in {
+      width: 24px;
+      height: 24px;
+      border-radius: 2px;
+      position: fixed;
+      right: 20px;
+      top: 67%;
+      margin: auto;
+      background: #268aff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 8px 0 0 8px;
+    }
+  }
+  :deep(.anticon) {
+    color: #fff !important;
+  }
+  :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, 1);
+    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, 1);
+    text-align: center;
+    padding: 12px !important;
+  }
+  :deep(.ant-table-row:hover td) {
+    background: #1767f2 !important;
+    cursor: pointer;
+  }
+  :deep(.ant-tabs-tab-btn) {
+    font-size: 20px;
+    font-weight: bold;
+    color: #fff !important;
+  }
+  .zep-enter-active,
+  .zep-leave-active {
+    animation-duration: 0.6s; /* 增加动画持续时间 */
+    animation-timing-function: ease-in-out; /* 使用更平滑的动画曲线 */
+  }
+
+  .zep-enter-active {
+    animation-name: bounce-enter;
+  }
+
+  .zep-leave-active {
+    animation-name: bounce-leave;
+  }
+
+  /* 进入动画 */
+  @keyframes bounce-enter {
+    0% {
+      transform: translateX(400px); /* 初始位置 */
+    }
+    100% {
+      transform: translateX(0); /* 恢复到初始位置 */
+    }
+  }
+
+  /* 离开动画 */
+  @keyframes bounce-leave {
+    0% {
+      transform: translateX(0); /* 初始位置 */
+    }
+    100% {
+      transform: translateX(400px); /* 移动到离开位置 */
+    }
+  }
+</style>

hx-ai-intelligent/src/view/equipmentControl/electricDoor/tables.vue

@@ -0,0 +1,132 @@
+<template>
+  <a-table :columns="columnLog" :data-source="dataSourceLog" :pagination="pagination">
+    <template #bodyCell="{ record, column }">
+      <template v-if="column.dataIndex === 'state'">
+        <span
+          :style="{ color: record.state === '开启' ? 'rgb(149, 242, 4)' : 'rgb(245, 154, 35)' }"
+          >{{ record.state }}</span
+        >
+      </template>
+    </template>
+  </a-table>
+</template>
+<script lang="ts">
+  import { ref } from 'vue';
+
+  export default {
+    setup() {
+      // 改变页码
+      const handleChangePage = (current: number, pageSize: number) => {
+        pagination.value.current = current;
+        pagination.value.pageSize = pageSize;
+        console.log(current, pageSize);
+      };
+      const pagination = ref({
+        total: 0,
+        size: 'small',
+        current: 1,
+        pageSize: 10,
+        // showQuickJumper: true,
+        // showLessItems: true,
+        showSizeChanger: false,
+        showTotal: (total: number, range: any) =>
+          total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
+        onChange: handleChangePage,
+      });
+
+      const columnLog = [
+        {
+          title: '执行时间',
+          dataIndex: 'age',
+          key: 'age',
+          width: 140,
+        },
+        {
+          title: '操作日志',
+          dataIndex: 'state',
+          key: 'state',
+          width: 80,
+        },
+      ];
+      const dataSourceLog = [
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+        { age: '2024-07-26 23:50:20', state: '关闭' },
+        { age: '2024-07-26 23:50:20', state: '开启' },
+      ];
+      const toggle = (data: any) => {
+        console.log(data, '数据');
+      };
+      return { columnLog, dataSourceLog, toggle, pagination, handleChangePage };
+    },
+  };
+</script>
+<style lang="less" scoped>
+  :deep(.ant-table-thead > tr > th) {
+    background-color: rgba(0, 0, 0, 1) !important;
+    border: 1px solid #6d6d6d !important;
+    color: white;
+    text-align: center;
+    font-weight: normal !important;
+    padding: 4px !important;
+  }
+
+  :deep(.ant-table-tbody > tr > td) {
+    background-color: rgba(0, 0, 0, 1) !important;
+    color: white;
+    border: 1px solid #6d6d6d !important;
+    text-align: center;
+    padding: 4px !important;
+  }
+  :deep(.ant-table-row:hover td) {
+    background-color: rgba(0, 0, 0, 1) !important;
+    cursor: default !important;
+  }
+  //分页样式
+  :deep(.ant-pagination-item) {
+    background-color: rgba(0, 0, 0, 1) !important;
+    border: none !important;
+  }
+  :deep(.ant-pagination-item a) {
+    color: #fff !important;
+  }
+  :deep(.ant-pagination-item-active) {
+    background-color: rgba(0, 0, 0, 1) !important;
+    border: none !important;
+  }
+  :deep(.ant-pagination-item-active a) {
+    color: #1767f2 !important;
+  }
+  :deep(.ant-pagination-item-link) {
+    background-color: rgba(0, 0, 0, 1) !important;
+    border: none !important;
+  }
+  :deep(.ant-pagination-total-text) {
+    color: #fff !important;
+  }
+  //分页 在右边 取消
+  :deep(.ant-table-pagination-right) {
+    justify-content: normal !important;
+  }
+</style>

hx-ai-intelligent/src/view/equipmentControl/image/door-detail.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="369px" height="632px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="184.5" y1="0" x2="184.5" y2="632" id="LinearGradient12">
+      <stop id="Stop13" stop-color="#56ddfd" offset="0" />
+      <stop id="Stop14" stop-color="#000000" offset="1" />
+    </linearGradient>
+  </defs>
+  <g>
+    <path d="M 0.5 0.5  L 368.5 0.5  L 368.5 631.5  L 0.5 631.5  L 0.5 0.5  Z " fill-rule="nonzero" fill="#000000" stroke="none" fill-opacity="0.8" />
+    <path d="M 0.5 0.5  L 368.5 0.5  L 368.5 631.5  L 0.5 631.5  L 0.5 0.5  Z " stroke-width="1" stroke="url(#LinearGradient12)" fill="none" />
+  </g>
+</svg>