gasInjection-project/src/views/vent/dataCenter/stationCenter/index.vue

<template>
  <div class="safetyList">
    <customHeader>分站监测</customHeader>
    <div class="content">
      <a-tabs class="tab-box" v-model:activeKey="activeKey" @change="onChangeTab">
        <a-tab-pane tab="分站监测" key="device" />
      </a-tabs>
      <div class="box-content">
        <!-- 分站监测 -->
        <div class="now-content">
          <div class="left-box">
            <div class="left-content">
              <div class="card-box" v-for="(item, index) in cardList" :key="index">
                <div class="card-itemL" :class="{ active: selectedIndex === index }" @click="cardClick(item, index)">
                  <div class="card-item-label">{{ item.strname }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="right-title">详细信息：</div>
            <a-table
              size="small"
              :scroll="{ y: 650 }"
              :columns="outerColumns"
              :data-source="deviceList"
              :pagination="false"
              :row-key="(record) => record.id"
              :expand-row-by-click="true"
              :expandedRowKeys="expandedRowKeys"
              @expand="handleExpand"
            >
              <!-- 自定义展开图标 -->
              <template #expandIcon="{ expanded, onExpand, record }">
                <a-button
                  type="text"
                  size="small"
                  @click="
                    (e) => {
                      e.stopPropagation();
                      toggleExpand(record.id);
                    }
                  "
                >
                  <DownCircleTwoTone v-if="expandedRowKeys.includes(record.id)" />
                  <RightCircleTwoTone v-else />
                </a-button>
              </template>
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'netStatus'">
                  <span
                    :style="{
                      color: record.netStatus ? '#52c41a' : '#ddd',
                      fontWeight: '500',
                    }"
                  >
                    {{ record.netStatus ? '在线' : '断开' }}
                  </span>
                </template>
                <template v-else>
                  {{ record[column.dataIndex] }}
                </template>
              </template>
              <!-- 嵌套表格 -->
              <template #expandedRowRender="{ record }">
                <a-table
                  size="small"
                  :columns="innerColumns"
                  :data-source="monitorList[record.id] || []"
                  :pagination="false"
                  :loading="loadingMap[record.id]"
                  bordered
                  :scroll="{ y: 410 }"
                >
                  <template #bodyCell="{ column, record: innerRecord }">
                    <template v-if="column.dataIndex === 'value'">
                      <span>
                        {{ innerRecord.value }}
                      </span>
                    </template>
                  </template>
                </a-table>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, computed, reactive, onMounted, onUnmounted, inject } from 'vue';
import { usePermission } from '/@/hooks/web/usePermission';
import customHeader from '/@/components/vent/customHeader.vue';
import { message, TreeProps } from 'ant-design-vue';
import { getDeviceList, getDeviceListByType, getDevMonitorListById } from './device.api';
import { subStationList } from './device.api';
import { RightCircleTwoTone, DownCircleTwoTone } from '@ant-design/icons-vue';
import Index from '/@/layouts/page/index.vue';
const { hasPermission } = usePermission();
let activeKey = ref('device');
//当前左侧激活菜单的索引
let activeIndex1 = ref(0);
const cardList = ref<any[]>(); //分站列表
const deviceList = ref<any[]>([]);
const openNum = ref(0);
const clsoeNum = ref(0);
const monitorList = ref<Record<string, any[]>>({}); // 监测数据列表
const expandedRowKeys = ref([]);
const selectedIndex = ref(0);
// // 分页参数
// const paginationState = ref({
//   current: 1,
//   pageSize: 10,
//   total: 0,
// });
// const paginationState2 = ref({
//   current: 1,
//   pageSize: 10,
//   total: 0,
// });
// // 计算分页后的数据
// const paginatedData = computed(() => {
//   const start = (paginationState.value.current - 1) * paginationState.value.pageSize;
//   const end = start + paginationState.value.pageSize;
//   return monitorList.value.slice(start, end);
// });
// // 计算分页后的数据
// const paginatedData2 = computed(() => {
//   const start = (paginationState2.value.current - 1) * paginationState2.value.pageSize;
//   const end = start + paginationState2.value.pageSize;
//   return deviceList.value.slice(start, end);
// });
// // 分页器配置 - 修复响应式问题
// const paginationConfig = computed(() => {
//   return {
//     current: paginationState.value.current,
//     pageSize: paginationState.value.pageSize,
//     total: monitorList.value.length,
//     showSizeChanger: true,
//     showQuickJumper: true,
//     showTotal: (total) => `共 ${total} 条`,
//     pageSizeOptions: ['10', '20', '50', '100'],
//     size: 'small',
//     onChange: (page, pageSize) => {
//       paginationState.value.current = page;
//       paginationState.value.pageSize = pageSize;
//     },
//     onShowSizeChange: (current, size) => {
//       paginationState.value.current = 1;
//       paginationState.value.pageSize = size;
//     },
//   };
// });
// const paginationConfig2 = computed(() => {
//   return {
//     current: paginationState2.value.current,
//     pageSize: paginationState2.value.pageSize,
//     total: deviceList.value.length,
//     showSizeChanger: true,
//     showQuickJumper: true,
//     showTotal: (total) => `共 ${total} 条`,
//     pageSizeOptions: ['10', '20', '50', '100'],
//     size: 'small',
//     onChange: (page, pageSize) => {
//       paginationState2.value.current = page;
//       paginationState2.value.pageSize = pageSize;
//     },
//     onShowSizeChange: (current, size) => {
//       paginationState2.value.current = 1;
//       paginationState2.value.pageSize = size;
//     },
//   };
// });
//获取分站信息
async function getSubStationList() {
  let res = await subStationList({ pageSize: 1000, pageNo: 1 });
  if (res.length != 0) {
    cardList.value = [...res];
    getDeviceList(cardList.value[0].id);
    openNum.value = cardList.value?.filter((v) => v.linkstatus == 1)['length'];
    clsoeNum.value = cardList.value?.filter((v) => v.linkstatus == 0)['length'];
  } else {
    cardList.value = [];
  }
}
//菜单选项切换
function cardClick(item, ind) {
  selectedIndex.value = selectedIndex.value === ind ? -1 : ind;
  if (timer) {
    clearInterval(timer);
    timer = undefined;
  }
  activeIndex1.value = ind;
  getDeviceList(item.id);
}

// 加载状态映射
const loadingMap = reactive({});
// 根据选择设备获取设备列表
async function getDeviceList(ID?) {
  const params: any = {
    subId: ID.toString(),
  };
  const result = await getDeviceListByType(params);
  deviceList.value = result.records;
}
// 外层表格列配置
const outerColumns = [
  {
    title: '设备ID',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '安装位置',
    dataIndex: 'strinstallpos',
    key: 'strinstallpos',
    align: 'center',
  },
  {
    title: '设备类型',
    dataIndex: 'devicekind_dictText',
    key: 'devicekind_dictText',
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'netStatus',
    key: 'netStatus',
    align: 'center',
  },
];

// 内层表格列配置
const innerColumns = [
  {
    title: '地址',
    dataIndex: 'plcAddr',
    key: 'plcAddr',
    align: 'center',
  },
  {
    title: '数据code',
    dataIndex: 'valueCode',
    align: 'center',
    key: 'valueCode',
  },
  {
    title: '数据名称',
    dataIndex: 'valueName',
    align: 'center',
    key: 'valueName',
  },
  {
    title: '数据值',
    dataIndex: 'value',
    align: 'center',
    key: 'value',
  },
  {
    title: '时间',
    dataIndex: 'time',
    align: 'center',
    key: 'time',
  },
];

// 切换展开状态
const toggleExpand = (id) => {
  const index = expandedRowKeys.value.indexOf(id);

  if (index > -1) {
    expandedRowKeys.value.splice(index, 1);
  } else {
    expandedRowKeys.value = [id];
    loadMonitoringData(id);
  }
};
const handleExpand = (expanded, record) => {
  // 确保展开状态与 expandedRowKeys 同步
  if (expanded) {
    expandedRowKeys.value = [record.id];
  } else {
    expandedRowKeys.value = [];
  }
};
// 加载监测数据
let timer: null | NodeJS.Timeout = null;
async function loadMonitoringData(deviceId: string) {
  // 先清除之前的定时器
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
  refreshData(deviceId);

  // 设置新的定时器
  timer = setInterval(() => {
    refreshData(deviceId);
  }, 1000);
}
async function refreshData(deviceId: string) {
  // 这里实现具体的请求逻辑
  const device = deviceList.value.find((d) => d.id === deviceId);
  const result = await getDevMonitorListById({ devId: deviceId.toString() });
  monitorList.value[deviceId] = Object.values(result.readData);
}
onMounted(async () => {
  await getSubStationList();
  await getDeviceList();
});
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
    timer = undefined;
  }
});
</script>

<style lang="less" scoped>
.safetyList {
  width: calc(100% - 20px);
  height: calc(100% - 80px);
  position: relative;
  margin: 70px 10px 10px 10px;

  .content {
    position: relative;
    width: 100%;
    height: 100%;

    .tab-box {
      display: flex;
      color: #fff;
      position: relative;
      background: linear-gradient(#001325, #012e4f);

      :deep(.zxm-tabs-nav) {
        margin: 0 !important;

        .zxm-tabs-tab {
          width: 180px;
          height: 45px;
          background: url('/@/assets/images/top-btn.png') center no-repeat;
          background-size: cover;
          display: flex;
          justify-content: center;
          font-size: 16px;
        }

        .zxm-tabs-tab-active {
          width: 180px;
          position: relative;
          background: url('/@/assets/images/top-btn-select.png') center no-repeat;
          background-size: cover;

          .zxm-tabs-tab-btn {
            color: #fff !important;
          }
        }

        .zxm-tabs-ink-bar {
          width: 0 !important;
        }

        .zxm-tabs-tab + .zxm-tabs-tab {
          margin: 0 !important;
        }
      }
    }

    .box-content {
      height: calc(100% - 50px);
      padding-top: 10px;
      box-sizing: border-box;
      .now-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left-box {
          width: 30%;
          height: 100%;
          margin-right: 15px;
          padding: 10px;
          box-sizing: border-box;
          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
          background-size: 100% 100%;
          border: 3px, solid, #0b69b6;
          border-radius: 5px;
          .left-content {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            overflow-y: auto;

            .card-box {
              position: relative;
              width: 178px;
              height: 120px;
              margin-top: 15px;
              margin-bottom: 30px;
              display: flex;
              justify-content: center;

              .card-itemL {
                position: relative;
                width: 85px;
                height: 120px;
                background: url('/@/assets/images/zd-3.png') no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;
                border: 1px solid transparent;
                transition: border-color 0.2s ease;
                .card-item-label {
                  width: 100%;
                  position: absolute;
                  bottom: 5px;
                  font-size: 12px;
                  color: #fff;
                  text-align: center;
                }
              }
              /* 选中状态的高亮边框 */
              .card-itemL.active {
                border-color: #0b69b6;
                border-radius: 5px;
                box-shadow: 0 0 3px 3px rgb(0, 128, 255);
              }
              .card-modal {
                width: 86px;
                position: absolute;
                left: 140px;
                color: #fff;
                top: 50%;
                transform: translate(0, -50%);
                font-size: 12px;
              }

              .card-modal1 {
                width: 86px;
                position: absolute;
                left: -42px;
                color: #fff;
                top: 50%;
                transform: translate(0, -50%);
                font-size: 12px;
              }
            }
          }
        }

        .right-box {
          width: calc(70% - 15px);
          height: 100%;
          padding: 10px;
          box-sizing: border-box;
          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
          background-size: 100% 100%;
          border: 3px, solid, #0b69b6;
          border-radius: 5px;
          .right-title {
            display: flex;
            height: 30px;
            align-items: center;
            font-size: 14px;
            color: #fff;
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}

.down-btn {
  line-height: 15px;
  height: 20px;
  padding: 0px 17px;
  font-size: 12px;
}

.zxm-form {
  width: 50%;
  height: 100%;
  padding-top: 20px !important;
  box-sizing: border-box;
}

.zxm-picker,
.zxm-input {
  border: 1px solid #3ad8ff77 !important;
  background-color: #ffffff !important;
  color: #fff !important;
}

.card-item.selected {
  border: 2px solid #3ad8ff77;
  /* 选中时的边框颜色 */
}

::v-deep(.zxm-radio-wrapper) {
  font-size: 12px;
}

::v-deep(.zxm-input) {
  font-size: 12px;
}

::v-deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
  border: 1px solid #3ad8ff77 !important;
}

// ::v-deep(.zxm-select-selection-item) {
//   color: #fff ;
// }

// ::v-deep(.zxm-form-item-label > label) {
//   color: #fff !important;
// }
/* 值样式 */
.high-value {
  color: #f5222d;
  font-weight: bold;
}
.low-value {
  color: #1890ff;
  font-weight: bold;
}
.normal-value {
  color: #52c41a;
}

/* 嵌套表格样式 */
:deep(.ant-table-expanded-row) > td {
  background-color: #f9f9f9 !important;
  padding: 0 !important;
}

:deep(.ant-table-expanded-row .ant-table) {
  margin: -10px -8px;
  background: #f9f9f9;
}

/* 自定义展开按钮 */
:deep(.ant-table-row-expand-icon) {
  margin-right: 8px;
}

.device-select-box {
  margin-top: 60px;
  width: 208px;
  height: calc(100% - 70px);
  overflow-y: auto;
  color: #fff;

  :deep(.zxm-tree) {
    background: transparent !important;
    color: #fff !important;

    .zxm-tree-switcher {
      background: transparent !important;
    }

    .zxm-tree-node-content-wrapper.zxm-tree-node-selected {
      background-color: var(--tree-node-select);
    }

    .zxm-tree-node-content-wrapper:hover {
      background-color: var(--tree-node-hover);
    }

    input {
      height: 0px !important;
    }
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed22;
    height: 100px;
  }

  &::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #4288a444;
  }
}
.device-select {
  width: 250px;
  height: calc(100% - 70px);
  background: var(--image-tree-bg) no-repeat;
  position: fixed;
  top: 100px;
  left: 55px;
  background-size: contain;
  pointer-events: auto;
  padding: 20px 10px 30px 10px;
}
</style>
<style>
div[aria-hidden='true'] {
  display: none !important;
}
</style>