pms 项目列表功能优化 页面垂直布局

src/locales/en.ts

@@ -263,7 +263,8 @@ export default {
     area: 'Area',
     wellType: 'Well Type',
     wellCategory: 'Well Category',
-    technology: 'Technology'
+    technology: 'Technology',
+    status: 'status'
   },
   form: {
     input: 'Input',

src/locales/ru.ts

@@ -228,7 +228,8 @@ export default {
     area: '项目区域',
     wellType: '井型',
     wellCategory: '井别',
-    technology: '施工工艺'
+    technology: '施工工艺',
+    status: '施工状态'
   },
   form: {
     input: '输入框',

src/locales/zh-CN.ts

@@ -266,7 +266,8 @@ export default {
     wellType: '井型',
     wellCategory: '井别',
     technology: '施工工艺',
-    unit: '工作量单位'
+    unit: '工作量单位',
+    status: '施工状态'
   },
   form: {
     input: '输入框',

src/router/modules/remaining.ts

@@ -274,7 +274,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
         component: () => import('@/views/pms/iotprojecttask/IotProjectTaskForm.vue'),
         name: 'IotProjectTaskInfo',
         meta: {
-          title: t('rem.TaskAllocation'),
+          title: t('action.edit'),
           noCache: false,
           hidden: true,
           canTo: true,

src/views/pms/iotprojectinfo/IotProjectInfoDetail.vue

@@ -1,12 +1,5 @@
 <template>
   <ContentWrap v-loading="formLoading">
-    <!--
-    <el-page-header>
-      <template #content>
-        <span class="text-large font-600 mr-3"> 项目详情 </span>
-      </template>
-    </el-page-header> -->
-
     <!-- 项目基本信息 -->
     <el-card class="box-card" style="margin-top: 20px">
       <template #header>
@@ -40,9 +33,6 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <!-- <el-form-item label="结算方式">
-              <el-input v-model="formData.payment" readonly />
-            </el-form-item> -->
             <el-form-item :label="t('project.payment')" prop="payment">
               <el-select v-model="formData.payment" placeholder="请选择" disabled>
                 <el-option

src/views/pms/iotprojectinfo/IotProjectInfoForm.vue

@@ -393,7 +393,13 @@ const confirmUserSelection = () => {
   formData.value.responsiblePerson = [...selectedUserIds.value];
 
   // 更新显示的用户名称
-  updateSelectedUserNames();
+  // updateSelectedUserNames();
+
+  selectedUserList.value = userList.value.filter(user =>
+    selectedUserIds.value.includes(user.id)
+  );
+  // 更新显示的用户名称
+  selectedUserNames.value = formatUserNames(selectedUserList.value);
 
   userDialogVisible.value = false;
 };

src/views/pms/iotprojectinfo/index.vue

@@ -81,11 +81,11 @@
       <el-table-column label="客户名称" align="center" prop="manufactureName" />
       <el-table-column label="合同名称" align="center" prop="contractName" >
         <template #default="scope">
-          <el-link type="primary" @click="goToDetail(scope.row.id)">
+          <el-link type="primary" @click="showTaskList(scope.row)">
             {{ scope.row.contractName }}
           </el-link>
         </template>
-      </el-table-column>>
+      </el-table-column>
       <el-table-column label="合同编号" align="center" prop="contractCode" />
       <el-table-column label="工作量" align="center">
         <el-table-column label="总数" align="center" prop="workloadTotal" />
@@ -158,7 +158,111 @@
       @pagination="getList"
     />
   </ContentWrap>
-  <!-- 表单弹窗：添加/修改 -->
+
+  <!-- 任务列表区域 -->
+  <ContentWrap v-if="selectedProject">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <span>任务列表 - {{ selectedProject.contractName }}</span>
+          <el-button link @click="closeTaskList" class="close-btn">
+            <Icon icon="ep:close" />
+          </el-button>
+        </div>
+      </template>
+      <el-table :data="taskList" v-loading="taskLoading">
+        <el-table-column label="井号" align="center" prop="wellName" />
+        <el-table-column :label="t('project.wellType')" align="center" prop="wellType" min-width="70">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.PMS_PROJECT_WELL_TYPE" :value="scope.row.wellType" />
+          </template>
+        </el-table-column>
+        <el-table-column :label="t('project.wellCategory')" align="center" prop="wellCategory" min-width="70">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.PMS_PROJECT_WELL_CATEGORY" :value="scope.row.wellCategory" />
+          </template>
+        </el-table-column>
+        <!--
+        <el-table-column :label="t('project.status')" align="center" prop="status" min-width="70">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE" :value="scope.row.status" />
+          </template>
+        </el-table-column> -->
+        <el-table-column :label="t('project.status')" align="center" prop="status" min-width="70">
+          <template #default="scope">
+            <el-link type="primary" @click="openTimelineDialog(scope.row)">
+              <dict-tag :type="DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE" :value="scope.row.status" />
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column label="施工地点" align="center" prop="location" />
+        <el-table-column :label="t('project.technology')" align="center" prop="technique" min-width="70">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.PMS_PROJECT_TECHNOLOGY" :value="scope.row.technique" />
+          </template>
+        </el-table-column>
+        <el-table-column label="设计工作量" align="center" prop="workloadDesign" />
+        <el-table-column label="施工队伍" align="center">
+          <template #default="{ row }">
+            <el-tooltip
+              :content="getAllDeptNames(row.deptIds)"
+              placement="top"
+            >
+              <span class="dept-names">
+                {{ getBriefDeptNames(row.deptIds) }}
+              </span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column label="施工设备" align="center">
+          <template #default="{ row }">
+            <el-tooltip
+              :content="getAllDeviceNames(row.deviceIds)"
+              placement="top"
+            >
+              <span class="device-names">
+                {{ getDeviceNames(row.deviceIds) }}
+              </span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column label="责任人" align="center">
+          <template #default="{ row }">
+            <el-tooltip
+              :content="getAllResponsiblePersonNames(row.responsiblePerson)"
+              placement="top"
+            >
+              <span class="responsible-names">
+                {{ getResponsiblePersonNames(row.responsiblePerson) }}
+              </span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column label="备注" align="center" prop="remark" />
+      </el-table>
+    </el-card>
+  </ContentWrap>
+
+  <!-- Timeline 时间线 Dialog - 已修改为 el-steps -->
+  <el-dialog v-model="timelineDialogVisible" :title="`任务进度 - ${currentTaskRow ? currentTaskRow.wellName : ''}`" width="700px">
+    <div v-if="stepsData.length > 0">
+      <el-steps direction="horizontal" :active="currentStepIndex" finish-status="success">
+        <el-step
+          v-for="(step, index) in stepsData"
+          :key="index"
+          :title="step.title"
+          :description="step.description"
+          :status="step.status"
+        />
+      </el-steps>
+    </div>
+    <el-empty v-else description="暂无进度数据" :image-size="100" />
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="timelineDialogVisible = false">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 
 <script setup lang="ts">
@@ -168,13 +272,38 @@ import { IotProjectInfoApi, IotProjectInfoVO } from '@/api/pms/iotprojectinfo'
 import {IotProjectTaskApi} from '@/api/pms/iotprojecttask'
 import IotProjectInfoForm from './IotProjectInfoForm.vue'
 import {useUserStore} from "@/store/modules/user";
-import {DICT_TYPE} from "@/utils/dict";
+import {DICT_TYPE, getIntDictOptions} from "@/utils/dict";
+import { IotDeviceApi } from '@/api/pms/device' // 新增：引入设备API
+import * as UserApi from "@/api/system/user"; // 新增：引入用户API
+import * as DeptApi from "@/api/system/dept"; // 新增：引入部门API
+import { handleTree } from "@/utils/tree"; // 新增：引入树形处理工具
+import { IotProjectTaskScheduleApi } from '@/api/pms/iotprojecttaskschedule'
+import dayjs from 'dayjs' // 引入 dayjs 用于时间格式化
+import { ref, reactive, onMounted, computed } from 'vue'
+
+
 /** 项目信息 列表 */
 defineOptions({ name: 'iotProjectInfo' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 
+// 新增：任务列表相关状态
+const taskLoading = ref(false) // 任务列表的加载中
+const taskList = ref([]) // 任务列表的数据
+const selectedProject = ref(null) // 当前选中的项目
+const deptList = ref([]) // 部门列表
+const deviceMap = ref({}) // 设备映射表
+const responsiblePersonList = ref([]) // 责任人列表
+
+const timelineData = ref<Array<{ timestamp: string; content: string }>>([]) // 时间线数据
+const taskScheduleDictOptions = ref<any[]>([]) // 任务进度字典选项
+const timelineDialogVisible = ref(false) // 控制时间线弹窗显示
+const currentTaskRow = ref<any>(null) // 当前选中的任务行数据
+
+const stepsData = ref<Array<{title: string, description?: string, status?: string}>>([]) // 步骤数据
+const currentStepIndex = ref(0) // 当前步骤索引
+
 const loading = ref(true) // 列表的加载中
 const list = ref<IotProjectInfoVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
@@ -224,6 +353,183 @@ const resetQuery = () => {
   handleQuery()
 }
 
+
+// 显示任务列表
+const showTaskList = async (project) => {
+  selectedProject.value = project
+  taskLoading.value = true
+  try {
+    // 获取任务列表
+    const queryParams = {
+      projectId: project.id
+    };
+    const taskData = await IotProjectTaskApi.getIotProjectTaskPage(queryParams);
+    taskList.value = taskData.list;
+
+    // 收集所有设备ID和责任人ID
+    const allDeviceIds = new Set();
+    const allResponsiblePersonIds = new Set();
+
+    taskList.value.forEach(item => {
+      if (item.deviceIds?.length) {
+        item.deviceIds.forEach(id => allDeviceIds.add(id));
+      }
+      if (item.responsiblePerson?.length) {
+        item.responsiblePerson.forEach(id => allResponsiblePersonIds.add(id));
+      }
+    });
+
+    // 批量获取设备信息
+    if (allDeviceIds.size > 0) {
+      const deviceIdsArray = Array.from(allDeviceIds);
+      const devices = await IotDeviceApi.getDevicesByDepts({
+        deviceIds: deviceIdsArray
+      });
+
+      // 更新设备映射表
+      devices.forEach(device => {
+        deviceMap.value[device.id] = device;
+      });
+    }
+
+    // 批量获取责任人信息
+    if (allResponsiblePersonIds.size > 0) {
+      const personIdsArray = Array.from(allResponsiblePersonIds);
+      const persons = await UserApi.companyDeptsEmployee({
+        userIds: personIdsArray
+      });
+      responsiblePersonList.value = persons;
+    }
+  } catch (error) {
+    console.error('加载任务列表失败:', error);
+    message.error('加载任务列表失败');
+  } finally {
+    taskLoading.value = false;
+  }
+};
+
+// 新增：关闭任务列表
+const closeTaskList = () => {
+  selectedProject.value = null;
+  taskList.value = [];
+};
+
+// 新增：获取部门名称
+const getDeptNames = (deptIds) => {
+  if (!deptIds || deptIds.length === 0) return '';
+
+  const names = [];
+  const findDept = (list, id) => {
+    for (const item of list) {
+      if (item.id === id) {
+        names.push(item.name);
+        return true;
+      }
+      if (item.children && findDept(item.children, id)) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  deptIds.forEach(id => findDept(deptList.value, id));
+  return names.join(', ');
+};
+
+// 新增：获取设备名称
+const getDeviceNames = (deviceIds) => {
+  if (!deviceIds || deviceIds.length === 0) return '';
+
+  const deviceNames = deviceIds
+    .map(id => deviceMap.value[id]?.deviceCode)
+    .filter(name => name);
+
+  if (deviceNames.length === 0) return '';
+  if (deviceNames.length > 2) {
+    return `${deviceNames[0]}, ${deviceNames[1]}...`;
+  }
+
+  return deviceNames.join(', ');
+};
+
+// 新增：获取所有设备名称
+const getAllDeviceNames = (deviceIds) => {
+  if (!deviceIds || deviceIds.length === 0) return '无设备';
+
+  const deviceNames = deviceIds
+    .map(id => deviceMap.value[id]?.deviceCode || '未知设备')
+    .filter(name => name !== '未知设备');
+
+  return deviceNames.join(', ') || '无有效设备';
+};
+
+// 新增：获取简略部门名称（用于表格显示）
+const getBriefDeptNames = (deptIds) => {
+  if (!deptIds || deptIds.length === 0) return '';
+
+  const names = [];
+  const findDept = (list, id) => {
+    for (const item of list) {
+      if (item.id === id) {
+        names.push(item.name);
+        return true;
+      }
+      if (item.children && findDept(item.children, id)) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  deptIds.forEach(id => findDept(deptList.value, id));
+
+  if (names.length === 0) return '';
+  if (names.length > 2) {
+    return `${names[0]}, ${names[1]}...`;
+  }
+
+  return names.join(', ');
+};
+
+// 新增：获取所有部门名称（用于tooltip显示）
+const getAllDeptNames = (deptIds) => {
+  if (!deptIds || deptIds.length === 0) return '无施工队伍';
+  return getDeptNames(deptIds);
+};
+
+// 新增：获取责任人名称
+const getResponsiblePersonNames = (responsiblePersonIds) => {
+  if (!responsiblePersonIds || responsiblePersonIds.length === 0) return '';
+
+  const personNames = responsiblePersonIds
+    .map(id => {
+      const person = responsiblePersonList.value.find(p => p.id === id);
+      return person ? person.nickname : '';
+    })
+    .filter(name => name);
+
+  if (personNames.length === 0) return '';
+  if (personNames.length > 2) {
+    return `${personNames[0]}, ${personNames[1]}...`;
+  }
+
+  return personNames.join(', ');
+};
+
+// 新增：获取所有责任人名称
+const getAllResponsiblePersonNames = (responsiblePersonIds) => {
+  if (!responsiblePersonIds || responsiblePersonIds.length === 0) return '无责任人';
+
+  const personNames = responsiblePersonIds
+    .map(id => {
+      const person = responsiblePersonList.value.find(p => p.id === id);
+      return person ? person.nickname : '未知人员';
+    })
+    .filter(name => name !== '未知人员');
+
+  return personNames.join(', ') || '无有效责任人';
+};
+
 // 跳转到项目详情页面
 const goToDetail = (id: number) => {
   push({
@@ -232,6 +538,92 @@ const goToDetail = (id: number) => {
   })
 }
 
+/** 打开 Timeline 时间线 Dialog - 已修改为 el-steps */
+const openTimelineDialog = async (row: any) => {
+  currentTaskRow.value = row
+  timelineDialogVisible.value = true
+  stepsData.value = [] // 清空旧数据
+  currentStepIndex.value = 0 // 重置步骤索引
+
+  try {
+    // 获取任务进度字典
+    if (taskScheduleDictOptions.value.length === 0) {
+      await getTaskScheduleDictOptions()
+    }
+
+    // 获取时间线数据
+    const params = { taskId: row.id } // 假设根据 taskId 获取
+    const response = await IotProjectTaskScheduleApi.getIotProjectTaskSchedules(params)
+
+    if (response && response.length > 0) {
+      // 处理数据：转换时间戳、匹配字典label
+      const sortedSchedules = response.sort((a, b) => a.status - b.status);
+
+      // 生成步骤数据
+      stepsData.value = sortedSchedules.map((item: any) => {
+        // 格式化时间戳 (假设 startTime 是毫秒时间戳)
+        const formattedTimestamp = item.startTime ? dayjs(item.startTime).format('YYYY-MM-DD HH:mm:ss') : '时间未设置'
+
+        // 查找 status 对应的字典 label
+        const dictItem = taskScheduleDictOptions.value.find(dict => dict.value === item.status)
+        const statusLabel = dictItem ? dictItem.label : `未知状态 (${item.status})`
+
+        // 核心修改：判断当前计划任务状态是否与当前行任务状态匹配
+        const isCurrentStep = item.status === row.status;
+        return {
+          title: `${formattedTimestamp} ${statusLabel}`,
+          // 如果匹配，description 设置为“当前进度”，否则设为空字符串
+          description: isCurrentStep ? '当前进度' : '',
+          // 可以根据需要设置 status，例如当前节点高亮
+          status: isCurrentStep ? 'process' : undefined
+        }
+      })
+
+      // 计算当前步骤索引
+      const currentStatus = row.status;
+      let activeIndex = -1;
+
+      // 找到第一个状态大于当前任务状态的计划，当前步骤就是前一个
+      for (let i = 0; i < sortedSchedules.length; i++) {
+        if (currentStatus < sortedSchedules[i].status) {
+          activeIndex = i - 0.5; // 中间状态
+          break;
+        } else if (currentStatus === sortedSchedules[i].status) {
+          activeIndex = i; // 正好在这个节点上
+          break;
+        }
+      }
+
+      // 如果当前状态大于所有计划进度状态，则显示最后一步已完成
+      if (activeIndex === -1 && sortedSchedules.length > 0) {
+        if (currentStatus > sortedSchedules[sortedSchedules.length - 1].status) {
+          activeIndex = sortedSchedules.length;
+        } else {
+          activeIndex = sortedSchedules.length - 1;
+        }
+      }
+
+      currentStepIndex.value = Math.max(0, activeIndex);
+    } else {
+      stepsData.value = []
+    }
+  } catch (error) {
+    console.error('获取任务进度时间线失败:', error)
+    message.error('获取任务进度失败')
+    stepsData.value = []
+  }
+}
+
+/** 获取任务进度字典数据 */
+const getTaskScheduleDictOptions = async () => {
+  try {
+    taskScheduleDictOptions.value = getIntDictOptions(DICT_TYPE.PMS_PROJECT_TASK_SCHEDULE)
+  } catch (error) {
+    console.error('获取任务进度字典失败:', error)
+    taskScheduleDictOptions.value = []
+  }
+}
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -290,7 +682,53 @@ const handleExport = async () => {
 }
 
 /** 初始化 **/
-onMounted(() => {
+onMounted(async () => {
+  deptList.value = handleTree(await DeptApi.companyLevelChildrenDepts());
   getList()
+  // 预加载任务进度字典
+  getTaskScheduleDictOptions()
 })
 </script>
+
+<style scoped>
+/* 新增：任务列表相关样式 */
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.close-btn {
+  padding: 0;
+  min-height: auto;
+}
+
+.dept-names {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+  display: inline-block;
+}
+
+.device-names {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+  display: inline-block;
+}
+
+.responsible-names {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 120px;
+  display: inline-block;
+}
+
+:deep(.el-step__description) {
+  color: red !important;
+}
+
+</style>