设备

董国庆

2026-01-23 4ea65f991b9d13f89e818c1a1898555d44b4c55f

设备

 screen/src/view/equipmentList/index.vue

@@ -9,13 +9,22 @@
      </div>
      <!-- 搜索 -->
      <div class="flex a-center gap--16 mt--24 mb--20">
        <div v-if="!projectId" class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox">
          <el-select filterable v-model="projectId" placeholder="请选择项目" class="flex1">
            <el-option v-for="item in [1, 2]" :key="item" :label="item" :value="item">
        <!-- 项目选择（委托方才显示） -->
        <div v-if="isClientMode" class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox">
          <el-select filterable v-model="projectId" placeholder="请选择项目" class="flex1" @change="handleProjectChange">
            <el-option v-for="item in projectList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <img src="../../assets/img/down-circle@2x.png" class="w--15 h--16 shrink0" />
          <div class="flex a-center gap--5">
            <i
              @click.stop="clearProjectSelect"
              class="el-icon-circle-close c-fff cursor-pointer"
              v-show="projectId"
            />
            <img src="../../assets/img/down-circle@2x.png" class="w--15 h--16 shrink0" />
          </div>
        </div>

        <div class="flex a-center j-between pl--18 pr--15 h--40 relative w--300 bgcolor1 searchBox">
          <el-select filterable v-model="type" placeholder="请选择设备类型" class="flex1" @change="handleSearch" clearable>
            <el-option v-for="item in deviceTypeList" :key="item.code" :label="item.name" :value="item.code">
@@ -55,7 +64,7 @@
      <!-- 表格 -->
      <CustomTable :data="tableList" height="800"
        style="border: 2px solid #3d7fff">
        <el-table-column v-if="!projectId" label="项目名称" prop="projectName" />
        <el-table-column v-if="isClientMode" label="项目名称" prop="projectName" />
        <el-table-column label="设备类型" prop="type">
          <template #default="{ row }">
            <div>{{ getDeviceTypeName(row.type) }}</div>
@@ -185,7 +194,12 @@
<script>
import HeaderBox from "../header/index.vue";
import moment from "moment";
import { deviceTypes, getDeviceList,getDeviceDetailCheckList } from './service.js'
import {
  deviceTypes,
  getLoginNameVoList,
  getDeviceListByType,
  getDeviceDetailCheckListByType
} from './service.js'
export default {
  components: { HeaderBox },
  props: {},
@@ -218,9 +232,21 @@
      detailPageSize: 10,
      detailTotal: 0,
      currentDeviceId: null,//当前查看详情的设备ID
      // 委托方相关
      projectList: [], // 项目列表（委托方使用）
      isClient: false, // 是否委托方端
    };
  },
  computed: {},
  computed: {
    // 是否是项目端（路由传入projectId参数）
    isProjectMode() {
      return !this.isClient;
    },
    // 是否是委托方端（使用独立标识）
    isClientMode() {
      return this.isClient;
    },
  },
  watch: {
    dateTime: {
      handler(newVal, oldVal) {
@@ -254,17 +280,68 @@
    },
  },
  created() {
    // 判断是项目端还是委托方端
    if (this.$route.query.projectId) {
      this.projectId = this.$route.query.projectId;
      this.isClient = false; // 项目端
    } else {
      this.isClient = true; // 委托方端
      this.loadProjectList(); // 加载项目列表
    }

    if (this.$route.query.projectName) {
      this.projectName = this.$route.query.projectName;
    }

    this.getTypeList()
    this.getList()
  },
  mounted() { },
  methods: {
    // 加载项目列表（委托方使用）
    async loadProjectList() {
      try {
        // 从 localStorage 获取 userInfo
        const userInfoStr = localStorage.getItem('userInfo');
        if (!userInfoStr) {
          console.error("未找到用户信息");
          return;
        }

        const userInfo = JSON.parse(userInfoStr);
        const userId = userInfo.userId;

        if (!userId) {
          console.error("用户信息中未找到 userId");
          return;
        }

        const res = await getLoginNameVoList({ userId });
        if (res && res) {
          this.projectList = res.map((item) => ({
            label: item.name,
            value: item.id,
          }));
        }
      } catch (error) {
        console.error("加载项目列表失败:", error);
      }
    },

    // 项目选择改变（委托方使用）
    handleProjectChange() {
      // 选择项目后，只作为筛选条件，不改变页面标题
      this.currentPage = 1;
      this.getList();
    },

    // 清除项目选择（委托方使用）
    clearProjectSelect() {
      this.projectId = null;
      this.currentPage = 1;
      this.getList();
    },

    // 获取设备类型
    getTypeList() {
      deviceTypes().then(res => {
@@ -305,7 +382,9 @@
        pageNum: this.currentPage,
        pageSize: this.pageSize
      }
      getDeviceList({ ...params }).then(res => {

      // 使用统一方法，根据用户类型调用对应接口
      getDeviceListByType({ ...params }, this.isClient).then(res => {
        console.log('设备列表', res)
        // 处理 properties 字段
        this.tableList = res.records.map(item => {
@@ -408,7 +487,8 @@
        pageSize: this.detailPageSize
      };

      getDeviceDetailCheckList(params).then(res => {
      // 使用统一方法，根据用户类型调用对应接口
      getDeviceDetailCheckListByType(params, this.isClient).then(res => {
        console.log('设备详情检查列表', res);
        this.detailCheckList = res.records || [];
        this.detailTotal = res.total || 0;
@@ -529,6 +609,10 @@
    display: none;
  }

  ::v-deep .el-select__caret {
    display: none;
  }

  .btn {
    position: absolute;
    top: -2px;
@@ -547,6 +631,15 @@
    box-sizing: border-box;
    cursor: pointer;
  }

  .el-icon-circle-close {
    font-size: 16px;
    transition: color 0.3s;

    &:hover {
      color: #00ebfc;
    }
  }
}

.btnColor {

 screen/src/view/equipmentList/service.js

@@ -1,22 +1,72 @@
import request from '@/utils/request'

// 设备类型
// ==================== 项目端接口 ====================
// 获取项目-委托方列表
export const getLoginNameVoList = async (params) => {
  return request(`/project/getLoginNameVoList`, {
    method: 'get', params
  })
}
// 设备类型（项目端）
export const deviceTypes = async (id) => {
  return request(`/project/deviceTypes`, {
    method: 'get'
  })
}
// 获取设备列表
// 获取设备列表（项目端）
export const getDeviceList = async (data) => {
  return request(`/project/getDeviceList`, {
    method: 'post',
    data
  })
}
// 获取设备详情检查列表
// 获取设备详情检查列表（项目端）
export const getDeviceDetailCheckList = async (data) => {
  return request(`/project/getDeviceDetailCheckList`, {
    method: 'post',
    data
  })
}

// ==================== 委托方接口 ====================
// 获取设备列表（委托方）
export const getClientDeviceList = async (data) => {
  return request(`/projectEntrust/deviceList`, {
    method: 'post',
    data
  })
}
// 获取设备详情检查列表（委托方）
export const getClientDeviceDetailCheckList = async (data) => {
  return request(`/projectEntrust/getDeviceDetailCheckList`, {
    method: 'post',
    data
  })
}

// ==================== 统一调用方法 ====================
/**
 * 根据用户类型获取设备列表
 * @param {Object} data - 查询参数
 * @param {Boolean} isClient - 是否委托方
 */
export const getDeviceListByType = async (data, isClient) => {
  if (isClient) {
    return await getClientDeviceList(data)
  } else {
    return await getDeviceList(data)
  }
}

/**
 * 根据用户类型获取设备详情检查列表
 * @param {Object} data - 查询参数
 * @param {Boolean} isClient - 是否委托方
 */
export const getDeviceDetailCheckListByType = async (data, isClient) => {
  if (isClient) {
    return await getClientDeviceDetailCheckList(data)
  } else {
    return await getDeviceDetailCheckList(data)
  }
}