gasInjection-project/src/views/vent/dataCenter/deviceCenter/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-tab-pane tab="历史数据" key="history" />
      </a-tabs>
      <div class="box-content">
        <!-- 分站监测 -->
        <div class="now-content">
          <div class="left-box">
            <div class="device-select">
              <div class="device-select-box">
                <a-tree
                  :show-line="true"
                  :tree-data="treeData"
                  v-model:selectedKeys="selectedKeys"
                  :autoExpandParent="true"
                  v-model:expandedKeys="expandedKeys"
                  @select="onSelect"
                >
                </a-tree>
              </div>
            </div>
          </div>
          <div class="right-box" v-if="activeKey == 'device'">
            <div class="right-title">实时监测：</div>
            <a-table
              size="small"
              :scroll="{ y: 650 }"
              :columns="outerColumns"
              :data-source="paginatedData2"
              :pagination="paginationConfig2"
              :row-key="(record) => record.id"
              :expand-row-by-click="true"
              :expanded-row-keys="expandedRowKeys"
              @expand="onExpand"
            >
              <!-- 自定义展开图标 -->
              <template #expandIcon="{ expanded, onExpand, record }">
                <a-button
                  type="text"
                  size="small"
                  @click="
                    (e) => {
                      e.stopPropagation();
                      toggleExpand(record.id);
                    }
                  "
                >
                  <DownOutlined v-if="expandedRowKeys.includes(record.id)" />
                  <RightOutlined v-else />
                </a-button>
              </template>

              <!-- 嵌套表格 -->
              <template #expandedRowRender="{ record }">
                <a-table
                  size="small"
                  :columns="innerColumns"
                  :data-source="paginatedData"
                  :pagination="paginationConfig"
                  :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 class="right-box" v-else-if="activeKey == 'history'">
            <div class="right-title">历史数据：</div>
            <a-table></a-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive, onMounted, onUnmounted, watch, shallowRef, computed } from 'vue';
import { usePermission } from '/@/hooks/web/usePermission';
import customHeader from '/@/components/vent/customHeader.vue';
import { AesEncryption } from '/@/utils/cipher';
import { loginCipher } from '/@/settings/encryptionSetting';
import { message, TreeProps } from 'ant-design-vue';
import { getDeviceTypeList, getDeviceListByType, getDevMonitorListById } from './device.api';
import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';
import { alignElement } from 'dom-align';
import { active } from 'sortablejs';

const { hasPermission } = usePermission();
let activeKey = ref('device');
const treeData = ref<TreeProps['treeData']>([]);
const selectedKeys = ref<string[]>([]);
const expandedKeys = ref<string[]>([]);
const deviceType = ref(''); // 监测设备类型
const systemType = ref('');
const systemID = ref(''); // 系统监测时，系统id
const dataSource = shallowRef([]); // 实时监测数据
let startMonitorTimer = 0;
const monitorTable = ref();
const isRefresh = ref(true);
const treeNodeTitle = ref(''); // 选中的树形标题
const deviceList = ref<any[]>([]); // 设备列表
const monitorList = ref<any[]>([]); // 监测数据列表
let timer: null | NodeJS.Timeout = undefined;
// 当前展开的行key数组
const expandedRowKeys = ref([]);

// 加载状态映射
const loadingMap = reactive({});
// 分页参数
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;
    },
  };
});
// 切换tab页面
async function onChangeTab(tab) {
  activeKey.value = tab;
  if (activeKey.value == 'device') {
    // 获取监测接口
  } else if (activeKey.value == 'history') {
    // 获取历史数据
  }
}
//树形菜单选择事件
const onSelect: TreeProps['onSelect'] = (keys, e) => {
  deviceType.value = '';
  systemID.value = '';
  deviceList.value = [];
  const title = e.node.title;
  if (e.node.parent && e.node.parent.node.type.toString().startsWith('sys')) {
    systemType.value = e.node.parent.node.type;
    if (deviceType.value != e.node.parent.node.type) deviceType.value = e.node.parent.node.type;
    systemID.value = e.node.type;
  } else {
    systemType.value = e.node.type;
    if (deviceType.value != e.node.type) deviceType.value = e.node.type;
  }
  getDeviceList(deviceType.value);
  // clearTimeout(timer);
  // timer = undefined;
  // if (startMonitorTimer) {
  //   clearTimeout(startMonitorTimer);
  // }
  // dataSource.value = [];
  // // monitorTable.value.resetPagination();
  // if (!startMonitorTimer) {
  //   startMonitorTimer = setTimeout(() => {
  //     expandedKeys.value = keys;
  //     selectedKeys.value = keys;
  //     treeNodeTitle.value = e.node.title;
  //     if (e.node.children?.length < 1 && timer) {
  //       // getMonitor(true);
  //     }
  //   }, 1000);
  // }
};

async function findTreeDataValue(obj) {
  const findDeviceType = (data: any[], obj, flag = true) => {
    return data.find((item: any) => {
      if (item.children.length > 0) {
        findDeviceType(item.children, obj);
      }
      // debugger;
      if (obj.deviceType && obj.deviceType.startsWith('sys_')) {
        // debugger;
        if (item.type == obj.deviceid) {
          deviceType.value = 'sys';
          systemID.value = obj.deviceid;
          selectedKeys.value = [item.key];
          expandedKeys.value = [item.key];
          treeNodeTitle.value = item.title;
        }
      } else {
        if (!flag) {
          if (obj.deviceType && item.type.startsWith(obj.deviceType)) {
            deviceType.value = item.type;
            selectedKeys.value = [item.key];
            expandedKeys.value = [item.key];
            treeNodeTitle.value = item.title;
            return true;
          }
          return false;
        } else {
          if (obj.deviceType && item.type == obj.deviceType) {
            deviceType.value = item.type;
            selectedKeys.value = [item.key];
            expandedKeys.value = [item.key];
            treeNodeTitle.value = item.title;
            return true;
          }
          return false;
        }
      }
      return false;
    });
  };
  const flag = findDeviceType(treeData.value, obj);
  if (!flag) {
    findDeviceType(treeData.value, obj, false);
  }
  // 无类型时
  if (!treeNodeTitle.value && treeData.value && treeData.value[0] && treeData.value[0]['children']) {
    const defaultData = treeData.value[0]['children'][0];
    if (deviceType.value !== defaultData.type) deviceType.value = defaultData.type;
    selectedKeys.value = [defaultData.key as string];
    expandedKeys.value = [defaultData.key as string];
    treeNodeTitle.value = defaultData.title;
  }

  // if (timer === undefined) {
  //   timer = null;
  //   await getDataSource();
  //   getMonitor(true);
  // }
}
// 获取树形菜单数据
async function getDeviceType(sysType?) {
  // if (treeData.value?.length > 0) return;
  const result = await getDeviceTypeList({});
  if (result.length > 0) {
    const dataSource = <TreeProps['treeData']>[];
    let key = '0';
    const getData = (resultList, dataSourceList, keyVal) => {
      resultList.forEach((item, index) => {
        if (item.deviceType != 'sys' && item.children && item.children.length > 0) {
          const children = getData(item.children, [], `${keyVal}-${index}`);
          // 判断关键阻力路线
          if (item.itemValue.startsWith(sysType) && children[0]) {
            systemID.value = item.children[0]['itemValue'];
          }

          dataSourceList.push({
            children: children,
            title: item.itemText,
            key: `${keyVal}-${index}`,
            type: item.itemValue,
            parentKey: `${keyVal}`,
          });
        } else {
          dataSourceList.push({
            children: [],
            title: item.itemText,
            key: `${keyVal}-${index}`,
            type: item.itemValue,
            parentKey: `${keyVal}`,
          });
        }
      });
      return dataSourceList;
    };
    treeData.value = getData(result, dataSource, key);
  }
}
// 根据选择设备获取设备列表
async function getDeviceList(deviceTypeVal?) {
  if (!deviceTypeVal) return;
  const params: any = {
    devKind: deviceTypeVal,
  };
  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',
    customRender: ({ text }) => {
      text = '在线';
      return `${text}`;
    },
  },
];

// 内层表格列配置
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 = (deviceId) => {
  const index = expandedRowKeys.value.indexOf(deviceId);

  if (index > -1) {
    // 如果已经展开，则关闭
    expandedRowKeys.value.splice(index, 1);
  } else {
    // 如果未展开，则打开
    expandedRowKeys.value.push(deviceId);
    loadMonitoringData(deviceId);
  }
};
// 加载监测数据
const loadMonitoringData = async (deviceId) => {
  const device = deviceList.value.find((d) => d.id === deviceId);

  loadingMap[deviceId] = true;
  try {
    const result = await getDevMonitorListById({ devId: deviceId.toString() });
    monitorList.value = Object.values(result.readData);
  } catch (error) {
    console.error(`加载设备 ${deviceId} 数据失败:`, error);
  } finally {
    loadingMap[deviceId] = false;
  }
};

onMounted(async () => {
  await getDeviceType();
});
onUnmounted(() => {});
// 监听分页变化
watch(
  () => [paginationState.value.current, paginationState.value.pageSize],
  () => {}
);
</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: 25%;
          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%;
        }

        .right-box {
          width: calc(75% - 15px);
          height: 100%;
          padding: 10px;
          box-sizing: border-box;
          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
          background-size: 100% 100%;

          .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: #00b1c8;
    }

    .zxm-tree-node-content-wrapper:hover {
      background-color: #00b1c8;
    }
    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>