工单系统页面优化

rain

2025-04-14 999afe35bdb3a456400c715ee13f9eef1e2aa2a0

工单系统页面优化

 src/api/tickets/ticket.js

@@ -71,3 +71,19 @@
    },
  });
};

// 新增接口：获取状态统计数据
export const getstatusCount = () => {
  return request({
    url: '/drone-device-core/jobEvent/getstatusCount',
    method: 'get',
  });
};

export const getStepInfo = (eventNum) => {
  return request({
    url: '/drone-device-core/jobEvent/getStepInfo',
    method: 'get',
    params: { eventNum }
  });
};

 src/views/tickets/ticket.vue

@@ -5,79 +5,31 @@
        <div class="tab-content">
          <!-- 查询条件筛选栏 -->
          <div class="filter-bar">
            <el-input
              v-model="filters.keyword"
              placeholder="请输入关键字"
              class="filter-item"
              size="small"
              clearable
              @keyup.enter="handleSearch"
            />
            <el-select
              v-model="filters.department"
              placeholder="请选择所属单位"
              class="filter-item"
              size="small"
              clearable
            >
            <el-input v-model="filters.keyword" placeholder="请输入关键字" class="filter-item" size="small" clearable
              @keyup.enter="handleSearch" />
            <el-select v-model="filters.department" placeholder="请选择所属单位" class="filter-item" size="small" clearable>
              <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select
              v-model="filters.type"
              placeholder="请选择工单类型"
              class="filter-item"
              size="small"
              clearable
            >
            <el-select v-model="filters.type" placeholder="请选择工单类型" class="filter-item" size="small" clearable>
              <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-date-picker
              v-model="filters.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="date-picker"
              size="small"
              value-format="yyyy-MM-dd"
            />
            <el-select
              v-model="filters.status"
              placeholder="请选择状态"
              class="filter-item"
              size="small"
              clearable
            >
            <el-date-picker v-model="filters.dateRange" type="daterange" class="filter-item" size="small"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <el-select v-model="filters.status" placeholder="请选择状态" class="filter-item" size="small" clearable>
              <el-option v-for="item in statuses" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select
              v-model="filters.algorithm"
              placeholder="请选择关联算法"
              class="filter-item"
              size="small"
              clearable
            >
              <el-option 
                v-for="item in algorithms" 
                :key="item.dict_key" 
                :label="item.dict_value" 
                :value="item.dict_key" 
              />
            <el-select v-model="filters.algorithm" placeholder="请选择关联算法" class="filter-item" size="small" clearable>
              <el-option v-for="item in algorithms" :key="item.dict_key" :label="item.dict_value"
                :value="item.dict_key" />
            </el-select>
            <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">查询</el-button>
            <el-button icon="el-icon-refresh" size="small" @click="handleReset">重置</el-button>
          </div>

          <!-- 表格部分 -->
          <avue-crud 
            v-model="tableData"
            :option="option" 
            :data="tableData"
            v-model:page="page"
            @size-change="sizeChange"
            @current-change="handleCurrentChange"
            :table-loading="loading"
          >
          <avue-crud v-model="tableData" :option="option" :data="tableData" v-model:page="page"
            @size-change="sizeChange" @current-change="handleCurrentChange" :table-loading="loading">
            <template #menu-left>
              <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新建工单</el-button>
              <el-button type="success" plain icon="el-icon-download" @click="exportData">导出</el-button>
@@ -85,7 +37,8 @@
            <template #menu="{ row }">
              <template v-if="row.status === -1">
                <el-button type="text" icon="el-icon-edit" @click="handleEdit(row)">编辑</el-button>
                <el-button type="text" icon="el-icon-delete" class="danger-button" @click="handleDelete(row)">删除</el-button>
                <el-button type="text" icon="el-icon-delete" class="danger-button"
                  @click="handleDelete(row)">删除</el-button>
              </template>
              <template v-else>
                <el-button type="text" icon="el-icon-view" @click="handleViewDetail(row)">详情</el-button>
@@ -158,17 +111,13 @@
              <el-form-item label="地图选址" prop="location">
                <div class="map-select">
                  <!-- 替换地图为按钮 -->
                  <avue-input-map
                    v-model="form.location"
                    :params="mapParams"
                    @change="handleLocationChange"
                    type="button"
                  >
                  <avue-input-map v-model="form.location" :params="mapParams" @change="handleLocationChange"
                    type="button">
                    <el-button type="primary" plain>
                      <i class="el-icon-map-location"></i> 选择位置
                    </el-button>
                  </avue-input-map>
                  

                  <!-- 添加位置信息显示 -->
                  <div v-if="form.location && form.location.length >= 2" class="selected-location">
                    <p>已选位置: {{ formatLocation(form.location) }}</p>
@@ -187,18 +136,9 @@
            <el-input type="textarea" v-model="form.content" rows="3" placeholder="请输入工单内容描述" resize="none"></el-input>
          </el-form-item>
          <el-form-item label="附件图片" class="upload-item">
            <el-upload
              ref="upload"
              :action="'#'"
              :auto-upload="false"
              list-type="picture-card"
              :on-change="handleFileChange"
              :on-remove="handleUploadRemove"
              :before-upload="beforeUpload"
              :file-list="form.photos"
              :limit="1"
              accept="image/*"
            >
            <el-upload ref="upload" :action="'#'" :auto-upload="false" list-type="picture-card"
              :on-change="handleFileChange" :on-remove="handleUploadRemove" :before-upload="beforeUpload"
              :file-list="form.photos" :limit="1" accept="image/*">
              <i class="el-icon-plus"></i>
            </el-upload>
            <div class="el-upload__tip">支持jpg/png格式图片，最多1张，单张不超过5MB</div>
@@ -219,19 +159,19 @@
      <div class="detail-container">
        <!-- 工单状态流程 -->
        <div class="status-flow">
          <el-steps :active="currentDetail.status" align-center finish-status="success">
            <el-step 
              title="发起任务" 
              :description="currentDetail.creator || '未知创建人'" 
            />
            <el-step title="待审核" />
            <el-step title="待处理" />
            <el-step title="处理中" />
            <el-step title="已完成" />
            <el-step 
              title="已完结" 
              :description="currentDetail.handler || '未分配'" 
            />
          <el-steps :active="getActiveStep()" align-center finish-status="success" process-status="success" class="custom-steps">
            <el-step v-for="(status, index) in fixedStatuses" :key="index" :title="mapStatus(status)">
              <template #description>
                <div class="step-info">
                  <div class="process-time" v-if="getStepTime(status)">
                    耗时:{{ getStepTime(status) }}
                  </div>
                  <div class="handler-name">
                    {{ getStepHandler(status) }}
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>

@@ -258,7 +198,7 @@
            <template #default="{ row }">
              <!-- 修复工单内容可编辑 -->
              <template v-if="currentDetail.status === 0 && row.label2 === '工单内容'">
                <el-input type="textarea" v-model="currentDetail.remarkContent" placeholder="请输入工单内容" />
                <el-input type="textarea" v-model="currentDetail.content" placeholder="请输入工单内容" />
              </template>
              <!-- 修复工单类型为下拉框 -->
              <template v-else-if="currentDetail.status === 0 && row.label2 === '工单类型'">
@@ -269,7 +209,8 @@
              <!-- 修复任务处理人为下拉框 -->
              <template v-else-if="currentDetail.status === 0 && row.label2 === '任务处理人'">
                <el-select v-model="currentDetail.handler" placeholder="请选择任务处理人" @change="handleHandlerChange">
                  <el-option v-for="user in departmentUsers[currentDetail.department] || []" :key="user.id" :label="user.name" :value="user.id" />
                  <el-option v-for="user in departmentUsers[currentDetail.department] || []" :key="user.id"
                    :label="user.name" :value="user.id" />
                </el-select>
              </template>
              <template v-else>{{ row.value2 }}</template>
@@ -282,13 +223,8 @@
          <div class="section-title">事件处理详情</div>
          <!-- 处理中状态显示输入框 -->
          <template v-if="currentDetail.status === 3">
            <el-input
              type="textarea"
              v-model="currentDetail.processingDetail"
              placeholder="请输入事件处理详情"
              :rows="4"
              style="width: 100%; margin-bottom: 10px;"
            />
            <el-input type="textarea" v-model="currentDetail.processingDetail" placeholder="请输入事件处理详情" :rows="4"
              style="width: 100%; margin-bottom: 10px;" />
          </template>
          <!-- 已完成和已完结状态显示只读文本 -->
          <template v-else>
@@ -301,17 +237,9 @@
        <!-- 上传图片 -->
        <div v-if="[3, 4].includes(currentDetail.status)" class="form-section">
          <div class="section-title">上传图片</div>
          <el-upload
            ref="upload"
            :action="'#'"
            :auto-upload="false"
            list-type="picture-card"
            :on-change="handleFileChange"
            :on-remove="handleUploadRemove"
            :before-upload="beforeUpload"
            :file-list="[]"
            accept="image/*"
          >
          <el-upload ref="upload" :action="'#'" :auto-upload="false" list-type="picture-card"
            :on-change="handleFileChange" :on-remove="handleUploadRemove" :before-upload="beforeUpload" :file-list="[]"
            accept="image/*">
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="el-upload__tip">支持 jpg/png 格式图片，最多 5 张，单张不超过 5MB</div>
@@ -324,13 +252,8 @@
              <div class="media-box">
                <div class="media-title">事件图片/事件视频</div>
                <div class="media-content">
                  <el-image
                    v-if="currentDetail.mediaUrl"
                    :src="currentDetail.mediaUrl"
                    :preview-src-list="[currentDetail.mediaUrl]"
                    fit="cover"
                    style="width: 100%; height: 300px;"
                  >
                  <el-image v-if="currentDetail.mediaUrl" :src="currentDetail.mediaUrl"
                    :preview-src-list="[currentDetail.mediaUrl]" fit="cover" style="width: 100%; height: 300px;">
                    <template #placeholder>
                      <div class="image-placeholder">
                        <i class="el-icon-picture-outline"></i>
@@ -354,13 +277,9 @@
                <template v-if="currentDetail.status === 5">
                  <div class="media-title">工单处理图片</div>
                  <div class="media-content">
                    <el-image
                      v-if="currentDetail.updatePhotoUrl"
                      :src="currentDetail.updatePhotoUrl"
                      :preview-src-list="[currentDetail.updatePhotoUrl]"
                      fit="cover"
                      style="width: 100%; height: 300px;"
                    >
                    <el-image v-if="currentDetail.updatePhotoUrl" :src="currentDetail.updatePhotoUrl"
                      :preview-src-list="[currentDetail.updatePhotoUrl]" fit="cover"
                      style="width: 100%; height: 300px;">
                      <template #placeholder>
                        <div class="image-placeholder">
                          <i class="el-icon-picture-outline"></i>
@@ -445,7 +364,7 @@
</template>

<script>
import { getList, createTicket, getTicketInfo, flowEvent } from '@/api/tickets/ticket';
import { getList, createTicket, getTicketInfo, flowEvent, getstatusCount, getStepInfo } from '@/api/tickets/ticket';
import { export_json_to_excel } from '@/utils/exportExcel';
import geoJson from '@/assets/geoJson.json'

@@ -497,7 +416,7 @@
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        addBtn:false,
        addBtn: false,
        menu: true,
        page: true,
        column: [
@@ -506,11 +425,11 @@
          { label: "工单名称", prop: "orderName", width: 150 },
          { label: "所属单位", prop: "department", width: 100 },
          { label: "发起时间", prop: "startTime", width: 160 },
          { label: "关联算法", prop: "content", width: 165 },
          { label: "关联算法", prop: "aiType", width: 165 },
          { label: "工单类型", prop: "type", width: 108 },
          {
            label: "工单内容",
            prop: "remarkContent",
            prop: "content",
            slot: true,
            width: 250,
            overHidden: true
@@ -524,7 +443,7 @@
        total: 0,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 30 ]
        pageSizes: [10, 20, 30]
      },
      dialogVisible: false,
      detailVisible: false,
@@ -539,7 +458,7 @@
        address: '',
        content: '',
        photos: [],
        remarkContent: '', // 新增字段，用于存储后端返回的 content
        content: '', // 新增字段，用于存储后端返回的 content
      },
      rules: {
        name: [{ required: true, message: '请输入工单名称', trigger: 'blur' }],
@@ -568,11 +487,14 @@
        department: [{ required: true, message: '请选择部门', trigger: 'change' }],
        handler: [{ required: true, message: '请选择处理人', trigger: 'change' }],
      }, // 新增：派发表单验证规则
      stepInfos: [], // 新增：存储步骤信息
      fixedStatuses: ["2", "0", "3", "4", "5"], // 固定的五个状态
    };
  },
  created() {
    this.loadAMapScripts();
    this.fetchDropdownData();
    this.fetchTabCounts(); // 新增：初始化时获取 tab 数据
  },
  mounted() {
    this.fetchTableData();
@@ -621,7 +543,7 @@
        },
        {
          label: "关联算法",
          value: this.currentDetail.content,
          value: this.currentDetail.aiType,
          editable: false,
        },
        {
@@ -636,7 +558,7 @@
        },
        {
          label: "工单内容",
          value: this.currentDetail.remarkContent,
          value: this.currentDetail.content,
          editable: this.currentDetail.status === 0,
          type: "textarea",
        },
@@ -650,10 +572,10 @@
        { label: "当前状态", value: this.mapStatus(this.currentDetail.status), editable: false },
        { label: "事件地址", value: this.currentDetail.address, editable: false },
        { label: "工单类型", value: this.currentDetail.type, editable: this.currentDetail.status === 0, type: "select", options: this.types },
        { label: "关联算法", value: this.currentDetail.content, editable: false },
        { label: "关联算法", value: this.currentDetail.aiType, editable: false },
        { label: "任务接收单位", value: this.currentDetail.department, editable: false },
        { label: "发起任务时间", value: this.currentDetail.startTime, editable: false },
        { label: "工单内容", value: this.currentDetail.remarkContent, editable: this.currentDetail.status === 0, type: "textarea" },
        { label: "工单内容", value: this.currentDetail.content, editable: this.currentDetail.status === 0, type: "textarea" },
      ];
    },
    formattedDetailFields() {
@@ -664,10 +586,10 @@
        { label: "任务发起人", value: this.currentDetail.creator },
        { label: "当前状态", value: this.mapStatus(this.currentDetail.status) },
        { label: "事件地址", value: this.currentDetail.address }, // 包含经纬度信息
        { label: "关联算法", value: this.currentDetail.content },
        { label: "关联算法", value: this.currentDetail.aiType },
        { label: "任务接收单位", value: this.currentDetail.department },
        { label: "发起任务时间", value: this.currentDetail.startTime },
        { label: "工单内容", value: this.currentDetail.remarkContent },
        { label: "工单内容", value: this.currentDetail.content },
      ];

      // 将字段分成两列
@@ -690,14 +612,14 @@
        const areaCode = this.userInfo.detail.areaCode;
        const subAreaCode = areaCode ? areaCode.substring(0, 6) : '';
        const adcodeObj = getAdcodeObj(geoJson, 'adcode', subAreaCode);
        

        console.log('区域代码:', subAreaCode);
        

        // 直接从返回对象中获取正确的路径
        const center = adcodeObj?.payload?.objects?.collection?.geometries?.[0]?.properties?.center;
        

        console.log('获取到的中心点:', center);
        

        if (Array.isArray(center) && center.length === 2) {
          this.mapParams.center = center;
          console.log('成功设置地图中心点:', center);
@@ -761,9 +683,9 @@
        const currentTab = this.tabs.find(tab => tab.name === this.activeTab);
        const params = {
          word_order_type: this.filters.type || undefined,
          status: currentTab?.name === 'myTickets' ? undefined : 
                 this.filters.status !== "" ? Number(this.filters.status) : 
                 currentTab?.value,
          status: currentTab?.name === 'myTickets' ? undefined :
            this.filters.status !== "" ? Number(this.filters.status) :
              currentTab?.value,
          event_name: this.filters.keyword || undefined,
          dept_id: this.filters.department || undefined,
          start_date: this.filters.dateRange?.[0] ? this.formatDate(this.filters.dateRange[0]) : undefined,
@@ -772,7 +694,7 @@
          size: Number(this.page.pageSize),       // 使用每页条数
          ai_type: this.filters.algorithm || undefined, // 添加算法参数
        };
   

        const response = await getList(params);
        if (!response?.data?.data?.records) {
          throw new Error('接口返回数据格式不正确');
@@ -780,10 +702,10 @@

        const { total, records } = response.data.data;
        let filteredRecords = records;
        

        // 如果是"我发起的"tab，过滤数据
        if (currentTab?.name === 'myTickets') {
          filteredRecords = records.filter(item => 
          filteredRecords = records.filter(item =>
            String(item.create_user_id) === String(item.user_id)
          );
        }
@@ -793,22 +715,25 @@
          const latitude = Number(item.latitude) || 0;
          return {
            id: item.id,
            orderNumber: item.event_num , // 修改这里：优先使用 event_num
            orderNumber: item.event_num, // 修改这里：优先使用 event_num
            orderName: item.event_name,
            department: this.departments.find(d => d.value === item.dept_id)?.label || item.dept_name,
            startTime: item.create_time,
            content: item.ai_types,
            remarkContent: item.content, // 将后端返回的 content 映射为 remarkContent
            aiType: item.ai_types,
            content: item.content, // 将后端返回的 content 映射为 content
            type: this.types.find(t => t.value === item.event_dict_key)?.label,
            keyData: (!isNaN(longitude) && !isNaN(latitude))
              ? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`
              : '未知位置',
            address: item.address ,
            creator: item.create_user ,
            address: item.address,
            creator: item.create_user,
            handler: item.update_user || '未分配',
            status: Number(item.status || 0),
            // 保存原始字段
            photo_url: item.photo_url || '',  // 保存原始 photo_url
            video_url: item.video_url || '',  // 保存原始 video_url
            location: (!isNaN(longitude) && !isNaN(latitude)) ? [longitude, latitude] : null,
            processing_details: item.processing_details || '', // 添加处理详情字段
            video_url: item.video_url || '',  // 保存原始 video_url
            location: (!isNaN(longitude) && !isNaN(latitude)) ? [longitude, latitude] : null,
            processing_details: item.processing_details || '', // 添加处理详情字段
@@ -824,16 +749,7 @@
          this.page.total = total || 0;
        }

        if (this.activeTab === 'all') {
          // 计算"我发起的"工单数量
          const myTicketsCount = records.filter(item => 
            String(item.create_user_id) === String(item.user_id)
          ).length;
          
          // 更新全局计数，包括"我发起的"数量
          this.updateGlobalCounts(records, total, myTicketsCount);
        }
        this.updateTabCounts();
        await this.fetchTabCounts();
      } catch (error) {
        console.error("获取数据失败:", error);
        this.$message.error(error.message || "获取数据失败");
@@ -923,7 +839,7 @@
        }

        // 过滤掉所有 undefined 的字段
        Object.keys(submitData).forEach(key => 
        Object.keys(submitData).forEach(key =>
          submitData[key] === undefined && delete submitData[key]
        );

@@ -949,14 +865,14 @@

    async handleLocationChange(val) {
      console.log('地图选址返回值:', val);
      

      // 处理 Proxy 对象的值
      let locationValue = val.value;
      if (locationValue && locationValue.length >= 3) {
        // 确保我们获取到实际的数组值
        this.form.location = [locationValue[0], locationValue[1]];
        this.form.address = locationValue[2] || '';
        

        console.log('解析后的位置信息:', {
          经度: this.form.location[0],
          纬度: this.form.location[1],
@@ -999,11 +915,36 @@
      return statusMap[status] || "info";
    },

    async fetchTabCounts() {
      try {
        const response = await getstatusCount();
        const { statusCount, totalCount, userCount } = response.data.data;

        console.log('接口返回的状态统计数据:', { statusCount, totalCount, userCount });

        this.tabs.forEach(tab => {
          if (tab.name === 'all') {
            tab.count = totalCount || 0; // 总工单数
          } else if (tab.name === 'myTickets') {
            tab.count = userCount || 0; // 我发起的工单数
          } else {
            tab.count = statusCount[String(tab.value)] || 0; // 根据状态值映射
          }
        });

        console.log('更新后的 tabs 数据:', this.tabs);
      } catch (error) {
        console.error('获取 tab 数据失败:', error);
        this.$message.error('获取 tab 数据失败');
      }
    },

    handleTabChange(tab) {
      this.activeTab = tab.props?.name || tab.name;
      this.filters.status = "";
      this.handleReset();
      this.page.currentPage = 1;
      this.fetchTableData();
      this.fetchTabCounts(); // 切换 tab 时重新获取数据
    },

    handleSearch() {
@@ -1041,43 +982,6 @@
      await this.fetchTableData();
    },

    updateGlobalCounts(records, total, myTicketsCount) {
      const counts = {
        all: total,
        pending: 0,
        processing: 0,
        inProgress: 0,
        completed: 0,
        closed: 0,
        myTickets: myTicketsCount || 0  // 添加"我发起的"计数
      };

      records.forEach(item => {
        const tab = this.tabs.find(t => t.value === Number(item.status));
        if (tab) {
          counts[tab.name] = (counts[tab.name] || 0) + 1;
        }
      });

      this.globalCounts = counts;
    },

    updateTabCounts() {
      if (this.activeTab === 'all') {
        this.tabs.forEach(tab => {
          tab.count = this.globalCounts[tab.name] || 0;
        });
      } else {
        this.tabs.forEach(tab => {
          if (tab.name === this.activeTab) {
            tab.count = this.tableData.length;
          } else {
            tab.count = this.globalCounts[tab.name] || 0;
          }
        });
      }
    },

    handleAdd() {
      this.dialogVisible = true;
    },
@@ -1093,7 +997,7 @@
        address: '',
        content: '',
        photos: [],
        remarkContent: '', // 新增字段，用于存储后端返回的 content
        content: '', // 新增字段，用于存储后端返回的 content
      };
      if (this.$refs.form) {
        this.$refs.form.resetFields();
@@ -1107,16 +1011,13 @@
      return `${location[0].toFixed(6)}, ${location[1].toFixed(6)}`;
    },

    handleViewDetail(row) {
    async handleViewDetail(row) {
      console.log('查看详情数据:', row);
      // 重要：重置上传组件的文件列表
      // 重置上传组件的文件列表
      this.$nextTick(() => {
        if (this.$refs.upload) {
          // 如果是多个上传组件，需要处理数组情况
          if (Array.isArray(this.$refs.upload)) {
            this.$refs.upload.forEach(upload => {
              upload.clearFiles();
            });
            this.$refs.upload.forEach(upload => upload.clearFiles());
          } else {
            this.$refs.upload.clearFiles();
          }
@@ -1128,35 +1029,64 @@
        processingDetail: row.processing_details || '',
        mediaUrl: row.photo_url || row.video_url || '',
        updatePhotoUrl: row.update_photo_url || '',
        photos: [], // 重置photos数组
        photos: [],
      };
      
      if ([4, 5].includes(row.status) && !detailData.processingDetail) {
        this.fetchProcessingDetails(row.id);

      try {
        const stepResponse = await getStepInfo(row.orderNumber);
        console.log('接口返回的步骤信息:', stepResponse.data.data);

        const steps = stepResponse.data.data || [];

        // 根据接口返回的步骤信息补充处理人和时间
        this.stepInfos = this.fixedStatuses.map(status => {
          const step = steps.find(s => String(s.status) === String(status));
          return {
            status,
            name: step ? step.name : '',
            time: step ? step.time : null,
          };
        });

        console.log('处理后的步骤信息:', this.stepInfos);

        this.currentDetail.status = row.status; // 使用行数据中的状态
      } catch (error) {
        console.error('获取步骤信息失败:', error);
        // 如果接口调用失败，使用默认的固定状态
        this.stepInfos = this.fixedStatuses.map(status => ({
          status,
          name: status === row.status ? row.handler || '未分配' : '未处理',
          time: status === row.status ? row.startTime || '未知时间' : null,
        }));
      }
      

      this.currentDetail = detailData;
      console.log('当前详情数据:', this.currentDetail);
      this.detailVisible = true;
    },

    // 新增：获取处理详情的方法
    async fetchProcessingDetails(id) {
      try {
        const response = await getTicketInfo(id); // 假设有这个API
        if (response?.data?.data?.processing_details) {
          this.currentDetail.processingDetail = response.data.data.processing_details;
        }
      } catch (error) {
        console.error('获取处理详情失败:', error);
      }
    getStepHandler(status) {
      const step = this.stepInfos.find(step => step.status === status);
      return step ? step.name : '';
    },

    openMap () {
    getStepTime(status) {
      const step = this.stepInfos.find(step => step.status === status);
      return step ? step.time : null;
    },

    getActiveStep() {
      // 根据当前工单状态，返回对应的步骤索引
      const index = this.fixedStatuses.indexOf(String(this.currentDetail.status));
      return index !== -1 ? index : 0;
    },

    openMap() {
      const areaCode = this.userInfo.detail.areaCode;
      const subAreaCode = areaCode ? areaCode.substring(0, 6) : '';
      const adcodeObj = getAdcodeObj(geoJson, 'adcode', subAreaCode);
      

      console.log('区域代码:', subAreaCode);
      console.log('getAdcodeObj返回值:', {
        完整对象: adcodeObj,
@@ -1192,13 +1122,13 @@
      try {
        this.loading = true;
        const currentTab = this.tabs.find(tab => tab.name === this.activeTab);
        

        // 使用与查询列表相同的参数构造逻辑
        const params = {
          word_order_type: this.filters.type || undefined,
          status: currentTab?.name === 'myTickets' ? undefined : 
                 this.filters.status !== "" ? Number(this.filters.status) : 
                 currentTab?.value, // 使用当前tab的状态值
          status: currentTab?.name === 'myTickets' ? undefined :
            this.filters.status !== "" ? Number(this.filters.status) :
              currentTab?.value, // 使用当前tab的状态值
          keyword: this.filters.keyword || undefined,
          dept_id: this.filters.department || undefined,
          start_date: this.filters.dateRange?.[0] ? this.formatDate(this.filters.dateRange[0]) : undefined,
@@ -1213,11 +1143,11 @@
        }

        const { records } = response.data.data;
        

        // 使用与查询列表相同的过滤逻辑
        let filteredRecords = records;
        if (currentTab?.name === 'myTickets') {
          filteredRecords = records.filter(item => 
          filteredRecords = records.filter(item =>
            String(item.create_user_id) === String(item.user_id)
          );
        }
@@ -1247,7 +1177,7 @@

        const headers = [
          '工单编号',
          '工单名称', 
          '工单名称',
          '所属单位',
          '发起时间',
          '关联算法',
@@ -1311,9 +1241,9 @@
          id: this.currentDetail.id,
          status: this.currentDetail.status,
          isPass: 0, // 0 表示通过
          eventNum: this.currentDetail.orderNumber, 
          eventName: this.currentDetail.orderName, // 工单名称
          eventType: this.currentDetail.type, // 工单类型
          processingDetails: this.currentDetail.remarkContent, // 使用 remarkContent 替代原来的 remark
          departmentId: this.dispatchForm.department, // 派发部门 ID
          handlerId: this.dispatchForm.handler, // 处理人 ID
        };
@@ -1396,14 +1326,15 @@
        const data = {
          id: this.currentDetail.id,
          status: this.currentDetail.status,
          processingDetails: this.currentDetail.processingDetail
          processingDetails: this.currentDetail.processingDetail,
          eventNum: this.currentDetail.orderNumber
        };

        // 如果有上传的图片，添加到请求中
        const file = this.currentDetail.photos?.[0]?.raw || null;

        const response = await flowEvent(data, file);
        

        if (response.data.code === 0) {
          this.$message.success('工单已完成');
          this.detailVisible = false;
@@ -1428,8 +1359,9 @@
              status: this.currentDetail.status,
              isPass: 0, // 0 表示通过
              eventName: this.currentDetail.orderName, // 工单名称
              eventNum: this.currentDetail.orderNumber,
              eventType: this.currentDetail.type, // 工单类型
              processingDetails: this.currentDetail.remarkContent, // 使用 remarkContent 替代原来的 remark
              content: this.currentDetail.content, // 使用 content 替代原来的 remark
              createDept: this.dispatchForm.department, // 派发部门 ID
              updateUser: this.dispatchForm.handler, // 处理人 ID
            };
@@ -1462,13 +1394,14 @@

        const data = {
          id: this.currentDetail.id,
          status: this.currentDetail.status
          status: this.currentDetail.status,
          eventNum: this.currentDetail.orderNumber,
        };

        const file = this.currentDetail.photos[0].raw;

        const response = await flowEvent(data, file);
        

        if (response.data.code === 0) {
          this.$message.success('工单已完结');
          this.detailVisible = false;
@@ -1486,7 +1419,7 @@
    handleEdit(row) {
      // 从原始数据中获取 id 和 dept_id
      const originalDeptId = row.department?.value || row.dept_id;
      

      this.form = {
        id: row.id, // 保存原始 id
        name: row.orderName,
@@ -1496,9 +1429,9 @@
        algorithm: row.content,
        location: row.location,
        address: row.address,
        content: row.remarkContent,
        content: row.content,
        photos: [],
        remarkContent: row.remarkContent,
        content: row.content,
      };
      // 如果有图片，添加到表单中
      if (row.photo_url) {
@@ -1523,7 +1456,7 @@
            status: 0,
            isDelete: 1
          });
          

          if (response.data.code === 0) {
            this.$message.success('删除成功');
            this.fetchTableData();
@@ -1534,17 +1467,9 @@
          console.error('删除失败:', error);
          this.$message.error(error.message || '删除失败，请稍后重试');
        }
      }).catch(() => {});
      }).catch(() => { });
    },
  },
  watch: {
    tableData: {
      handler() {
        this.updateTabCounts();
      },
      deep: true
    },
  }
};
</script>

@@ -1730,7 +1655,7 @@
    padding: 5px 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
    

    p {
      margin: 5px 0;
      color: #606266;
@@ -1756,7 +1681,7 @@
  color: #909399;
  background-color: #f5f7fa;
  border-radius: 4px;
  

  i {
    font-size: 32px;
    margin-bottom: 8px;
@@ -1773,6 +1698,40 @@

.status-flow {
  margin-bottom: 20px;

  .custom-steps {
    .el-step__description {
      position: relative;
      margin: 0;        /* 取消所有外边距 */
      padding: 0;       /* 取消所有内边距 */
    }

    .step-info {
    display: flex;
    margin: 0;        /* 取消所有外边距 */
    padding: 0;       /* 取消所有内边距 */
    justify-content: space-between;
    align-items: center;
    width: 130px;
}

    .process-time {
      font-size: 10px;
      color: #909399;
      text-align: left;
      margin-left: 0%;
      padding-left: 0%;
      flex: 1; /* 左对齐时间 */
    }

    .handler-name {
      font-size: 14px;
      font-weight: bold;
      color: #303133;
      text-align: left;
      flex: 1; /* 右对齐名字 */
    }
  }
}

.basic-info {
@@ -1852,6 +1811,7 @@
.danger-button {
  color: #F56C6C;
}

.danger-button:hover {
  color: #f78989;
}