gas-injection/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="item.isNewAccess ? 'card-itemN' : item.linkstatus ? 'card-itemL' : 'card-itemD'" @click="cardClick(item, index)">
                  <div class="card-item-label">{{ item.strname }}</div>
                </div>
                <div :class="activeIndex % 4 == 3 ? 'card-modal1' : 'card-modal'" v-if="activeIndex == index && isShow">
                  <div class="modal-name">站点名称：</div>
                  <a-input v-model:value="stationName" size="small" placeholder="请输入" @blur="changeName" />
                  <div class="modal-lj">连接状态：</div>
                  <a-radio-group v-model:value="stationStatus" size="small" :options="ljList" @change="changeStatus" />
                </div>
              </div>
            </div>
          </div>
          <div class="right-box">
            <div class="right-title">详细信息：</div>
            <a-table
              size="small"
              :scroll="{ y: 680 }"
              :columns="outerColumns"
              :data-source="deviceList"
              :pagination="pagination"
              :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="record.monitoringFields"
                  :pagination="false"
                  :loading="loadingMap[record.id]"
                  bordered
                >
                  <template #bodyCell="{ column, record: innerRecord }">
                    <template v-if="column.dataIndex === 'value'">
                      <span :class="getValueClass(innerRecord.value)">
                        {{ innerRecord.value }}
                      </span>
                    </template>
                  </template>
                </a-table>
              </template>
            </a-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, reactive, onMounted, onUnmounted, inject } 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 { list, getDeviceList, getDeviceTypeList, devPosition, getDepartmentInfo, getExportUrl, getRegulation } from './device.api';
import { DownOutlined, RightOutlined } from '@ant-design/icons-vue';

const { hasPermission } = usePermission();
let activeKey = ref('device');
const treeData = ref<TreeProps['treeData']>([]);
const selectedKeys = ref<string[]>([]);
const expandedKeys = ref<string[]>([]);
const systemID = ref(''); // 系统监测时，系统id
//树形菜单选择事件
const onSelect: TreeProps['onSelect'] = (keys, e) => {};
// 获取树形菜单数据
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);
  }
}
// 设备数据结构
const deviceList = ref([
  {
    id: 'D001',
    name: '模拟设备1',
    status: '在线',
    monitoringFields: [], // 初始为空，点击时加载
  },
  {
    id: 'D002',
    name: '模拟设备2',
    status: '离线',
    monitoringFields: [],
  },
  {
    id: 'D003',
    name: '模拟设备3',
    status: '在线',
    monitoringFields: [],
  },
]);

// 当前展开的行key数组
const expandedRowKeys = ref([]);

// 加载状态映射
const loadingMap = reactive({});

// 外层表格列配置
const outerColumns = [
  {
    title: '设备ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '设备名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    customRender: ({ text }) => {
      text = '在线';
      return `${text}`;
    },
  },
];

// 内层表格列配置
const innerColumns = [
  {
    title: '监测字段',
    dataIndex: 'field',
    key: 'field',
    width: '40%',
  },
  {
    title: '当前值',
    dataIndex: 'value',
    key: 'value',
    width: '30%',
  },
  {
    title: '单位',
    dataIndex: 'unit',
    key: 'unit',
    width: '30%',
  },
];

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 3,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50'],
});

// 切换展开状态
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);

  if (device && device.monitoringFields.length === 0) {
    loadingMap[deviceId] = true;
    try {
      // 模拟API请求
      await new Promise((resolve) => setTimeout(resolve, 800));
      // 根据设备ID加载对应数据
      device.monitoringFields = mockFetchMonitoringData(deviceId);
    } catch (error) {
      console.error(`加载设备 ${deviceId} 数据失败:`, error);
    } finally {
      loadingMap[deviceId] = false;
    }
  }
};

// 值样式分类
const getValueClass = (value) => {
  if (value > 30) return 'high-value';
  if (value < 10) return 'low-value';
  return 'normal-value';
};

// 模拟API获取监测数据
const mockFetchMonitoringData = (deviceId) => {
  const dataMap = {
    D001: [
      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
    ],
    D002: [
      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
    ],
    D003: [
      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
      { field: '模拟数据', value: (Math.random() * 10).toFixed(2), unit: '1' },
    ],
  };
  return dataMap[deviceId] || [];
};
onMounted(async () => {
  getDeviceType();
});
onUnmounted(() => {});
</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%;
        }

        .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%;

          .right-title {
            display: flex;
            height: 30px;
            align-items: center;
            font-size: 14px;
            color: #fff;
            margin-bottom: 10px;
          }
        }
      }

      .detail-content {
        width: 100%;
        height: 100%;
      }

      .history-content {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url('/@/assets/images/fire/bj1.png') no-repeat center;
        background-size: 100% 100%;
        color: #fff;

        .left-box {
          width: 40%;
          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%;

          .left-content {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-wrap: wrap;
            height: calc(100% - 40px);
            overflow-y: auto;

            .card-box {
              position: relative;
              // width: 242px;
              width: 182px;
              height: 120px;
              margin-bottom: 15px;
              display: flex;
              justify-content: center;

              .card-itemN {
                position: relative;
                width: 85px;
                height: 120px;
                background: url('/@/assets/images/zd-2.png') no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;

                .card-item-label {
                  width: 100%;
                  position: absolute;
                  bottom: 5px;
                  font-size: 12px;
                  color: #fff;
                  text-align: 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;

                .card-item-label {
                  width: 100%;
                  position: absolute;
                  bottom: 5px;
                  font-size: 12px;
                  color: #fff;
                  text-align: center;
                }
              }

              .card-itemD {
                position: relative;
                width: 85px;
                height: 120px;
                background: url('/@/assets/images/zd-1.png') no-repeat center;
                background-size: 100% 100%;
                cursor: pointer;

                .card-item-label {
                  width: 100%;
                  position: absolute;
                  bottom: 5px;
                  font-size: 12px;
                  color: #fff;
                  text-align: center;
                }
              }

              .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(60% - 15px);
          height: 100%;
          padding: 10px;
          box-sizing: border-box;
          background: url('/@/assets/images/fire/bj1.png') no-repeat center;
          background-size: 100% 100%;

          .historytable {
            height: 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: 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>