无人机管理后台前端（已迁走）
blame | history | patch | commit | commitdiff | ignore whitespace
罗广辉
2025-10-11 02409bfbe15f22fc3b5dccadabfd860a660a49d9 
 src/views/tickets/ticket.vue


@@ -7,7 +7,7 @@


        :label="`${tab.label} (${tab.count})`"


        :name="tab.name"


      >


        <div class="tab-content">


        <basic-main-content>


          <!-- 查询条件筛选栏 -->


          <div class="filter-bar">


            <el-input


@@ -15,9 +15,10 @@


              placeholder="请输入关键字"


              class="filter-item"


              clearable


              @clear="handleKeyWords"


              @keyup.enter="handleSearch"


            />


            <el-select


            <!-- <el-select


              v-model="filters.department"


              placeholder="请选择所属单位"


              class="filter-item"


@@ -29,12 +30,13 @@


                :label="item.label"


                :value="item.value"


              />


            </el-select>


            <el-select


            </el-select> -->


            <!-- <el-select


              v-model="filters.type"


              placeholder="请选择工单类型"


              class="filter-item"


              clearable


              @change="handleSearch"


            >


              <el-option


                v-for="item in types"


@@ -42,7 +44,7 @@


                :label="item.label"


                :value="item.value"


              />


            </el-select>


            </el-select> -->


            <el-date-picker


              v-model="filters.dateRange"


              type="daterange"


@@ -58,6 +60,7 @@


              placeholder="请选择状态"


              class="filter-item"


              clearable


              @change="handleSearch"


            >


              <el-option


                v-for="item in statuses"


@@ -66,11 +69,12 @@


                :value="item.value"


              />


            </el-select>


            <el-select


            <!-- <el-select


              v-model="filters.algorithm"


              placeholder="请选择关联算法"


              class="filter-item"


              clearable


              @change="handleSearch"


            >


              <el-option


                v-for="item in algorithms"


@@ -78,12 +82,48 @@


                :label="item.dict_value"


                :value="item.dict_key"


              />


            </el-select>


            </el-select> -->


            <!-- <el-tree-select


              popper-class="custom-tree-select"


              :style="{ width: pxToRem(186) }"


              placeholder="请选择关联算法"


              v-model="dictKey"


              :data="dataList"


              :default-expanded-keys="[dictKey]"


              check-strictly


              node-key="id"


              :props="treePropsSF"


              @node-click="handleSFNodeClick"


              clearable


              @clear="handleClear"


            /> -->


            <el-tree-select


              style="z-index: 1000"


              :teleported="false"


              class="custom-tree-select"


              :style="{ width: pxToRem(186) }"


              v-model="dictKey"


              :data="dataList"


              :default-expanded-keys="[dictKey]"


              :props="treePropsSF"


              :render-after-expand="false"


              :default-checked-keys="checkedKeys"


              node-key="id"


              multiple


              show-checkbox


              collapse-tags


              collapse-tags-tooltip


              clearable


              @check="handleCheck"


              @node-click="handleSFNodeClick"


              @clear="handleClear"


            />


            <el-select


              v-model="filters.isReview"


              placeholder="请选择复核状态"


              class="filter-item"


              clearable


              @change="handleSearch"


            >


              <el-option


                v-for="item in reviewStatuses"


@@ -98,6 +138,7 @@




          <!-- 表格部分 -->


          <avue-crud


            class="ztzf-public-general-avue-crud"


            ref="avueCrud"


            v-model="tableData"


            :option="option"


@@ -105,10 +146,22 @@


            v-model:page="page"


            @size-change="sizeChange"


            @current-change="handleCurrentChange"


            @refresh-change="refreshChange"


            :table-loading="loading"


            @selection-change="handleSelectionChange"


            :permission="permissionList"


            v-if="activeTab === tab.name"


          >


            <template #orderNumber="{ row }">


              <el-tooltip-copy :content="row.orderNumber" :showCopyText="true" textAlign="left">


                {{ row.orderNumber }}


              </el-tooltip-copy>


            </template>


            <template #orderName="{ row }">


              <el-tooltip-copy :content="row.orderName" :showCopyText="true" textAlign="left">


                {{ row.orderName }}


              </el-tooltip-copy>


            </template>


            <template #menu-left>


              <el-button


                v-if="(activeTab === 'all' || activeTab === 'myTickets') && permissionList.addBtn"


@@ -151,13 +204,15 @@


                >


              </template>




              <el-button


                v-if="row.status === 4 && row.isReview !== 1"


                type="text"


                icon="el-icon-check"


                @click="reCheck(row)"


                >复核</el-button


              >


              <template v-if="permission.tickets_repeat_review">


                <el-button


                  v-if="row.status === 4 && row.isReview !== 1"


                  type="text"


                  icon="el-icon-check"


                  @click="reCheck(row)"


                  >复核</el-button


                >


              </template>


            </template>


            <template #status="{ row }">


              <span


@@ -174,13 +229,14 @@


              <span>{{ showIsReviewText(row) }}</span>


            </template>


          </avue-crud>


        </div>


        </basic-main-content>


      </el-tab-pane>


    </el-tabs>




    <!-- 新建工单对话框 -->


    <el-dialog


      v-model="dialogVisible"


      v-if="dialogVisible"


      title="新建工单"


      width="70%"


      :close-on-click-modal="false"


@@ -202,7 +258,12 @@


            </el-col>


            <el-col :span="12">


              <el-form-item label="工单类型" prop="type">


                <el-select v-model="form.type" placeholder="请选择工单类型" class="full-width">


                <el-select


                  @change="handleTypeChange"


                  v-model="form.type"


                  placeholder="请选择工单类型"


                  class="full-width"


                >


                  <el-option


                    v-for="item in types"


                    :key="item.value"


@@ -259,9 +320,10 @@


                  multiple


                  placeholder="请选择关联算法"


                  class="full-width"


                  :disabled="!form.type"


                >


                  <el-option


                    v-for="item in algorithms"


                    v-for="item in algorithms2"


                    :key="item.value"


                    :label="item.label"


                    :value="item.value"


@@ -270,10 +332,11 @@


              </el-form-item>


            </el-col>


            <el-col :span="12">


              <el-form-item label="选择位置" prop="location" required>


              <el-form-item label="选择位置" prop="location">


                <div class="location-wrapper">


                  <avue-input-map


                    v-model="form.location"


                    :clearable="false"


                    :params="mapParams"


                    @change="handleLocationChange"


                    type="button"


@@ -304,6 +367,7 @@


            <el-col :span="12">


              <el-form-item label="附件图片" prop="photos" required class="upload-wrapper">


                <el-upload


                  v-if="createoredit === 1"


                  ref="upload"


                  :action="'#'"


                  :auto-upload="false"


@@ -317,7 +381,30 @@


                  class="create-upload"


                >


                  <template v-if="form.photos.length < 1">


                    <i class="el-icon-plus">+</i>


                    <!-- <i class="el-icon-plus">+</i> -->


                    <div class="el-icon-plus">


                      <span>+</span>


                    </div>


                  </template>


                </el-upload>


                <el-upload


                  v-else


                  ref="upload"


                  :action="'#'"


                  :auto-upload="false"


                  list-type="picture-card"


                  :on-change="handleFileChange"


                  :on-remove="handleUploadRemove"


                  :before-upload="beforeUpload"


                  :file-list="popupShowImage(form.photos)"


                  :limit="1"


                  accept="image/*"


                  class="create-upload"


                >


                  <template v-if="form.photos.length < 1">


                    <div class="el-icon-plus">


                      <span>+</span>


                    </div>


                  </template>


                </el-upload>


                <div class="upload-tip">需上传含有地址信息的照片(jpg、jpeg、png),且不超过5M</div>


@@ -332,22 +419,29 @@


          <el-button type="infoprimary" plain :loading="draftLoading" @click="saveDraft"


            >存草稿</el-button


          >


          <el-button @click="dialogVisible = false">取 消</el-button>




          <el-button @click="handleCancel">取 消</el-button>


        </div>


      </template>


    </el-dialog>




    <!-- 工单详情对话框 -->


    <el-dialog v-model="detailVisible" title="工单详情" width="80%" append-to-body>


    <el-dialog


      class="custom-dialog"


      align-center


      v-model="detailVisible"


      title="工单详情"


      width="80%"


      append-to-body


    >


      <div class="detail-container">


        <div class="event-title-center">{{ currentDetail.orderName || '事件名称' }}</div>


        <div


          v-if="totalTime"


          class="event-total-time"


          style="text-align: center; color: #666; font-size: 15px; margin-bottom: 12px"


        >


          总耗时：{{ totalTime }}


        <div class="detail-top-title">


          <div class="event-title-center event-orderNumber">


            {{ currentDetail.orderNumber || '工单编号' }}


          </div>


          <div class="event-title-center">{{ currentDetail.orderName || '事件名称' }}</div>


        </div>


        <div v-if="totalTime" class="event-total-time">总耗时：{{ totalTime }}</div>


        <!-- 工单状态流程 -->


        <div class="custom-steps-container">


          <!-- 标题行 -->


@@ -372,20 +466,7 @@


                  {{ getStepHandler(status) }}


                </span>


                <div class="step-description" v-if="getStepTime(status)">


                  <span


                    style="


                      position: absolute;


                      right: 80%;


                      top: 50%;


                      transform: translateY(-50%);


                      width: 100px;


                      margin-left: 4px;


                      color: #666;


                      font-size: 12px;


                    "


                  >


                    耗时:{{ getStepTime(status) }}


                  </span>


                  <span class="step-timer"> 耗时:{{ getStepTime(status) }} </span>


                </div>


                <div class="step-description">


                  {{ getStepCreateTime(status) }}


@@ -395,211 +476,175 @@


          </el-steps>


        </div>




        <!-- 基本信息表格 -->


        <el-table


          :show-header="false"


          :data="formattedDetailFields"


          border


          style="width: 100%; margin-bottom: 20px"


        >


          <el-table-column prop="label1" label="基本信息" width="150">


            <template #default="{ row }">


              <!-- 添加必填星号的标签 -->


              <span


                v-if="currentDetail.status === 0 && row.label1 === '工单名称'"


                class="required-label"


              >


                <span class="required-star">*</span>{{ row.label1 }}


              </span>


              <span v-else>{{ row.label1 }}</span>


            </template>


          </el-table-column>


          <el-table-column>


            <template #default="{ row }">


              <template


                v-if="


                  currentDetail.status === 0 &&


                  row.label1 === '工单名称' &&


                  hasProcessingBtnPermission()


                "


              >


                <el-input


                  v-model="currentDetail.orderName"


                  placeholder="请输入工单名称"


                  class="required-input"


                />


              </template>


              <template v-else>{{ row.value1 }}</template>


            </template>


          </el-table-column>


          <el-table-column prop="label2" label="基本信息" width="150">


            <template #default="{ row }">


              <!-- 添加必填星号的标签 -->


              <span


                v-if="


                  currentDetail.status === 0 &&


                  (row.label2 === '工单类型' || row.label2 === '工单内容')


                "


                class="required-label"


              >


                <span class="required-star">*</span>{{ row.label2 }}


              </span>


              <span v-else>{{ row.label2 }}</span>


            </template>


          </el-table-column>


          <el-table-column>


            <template #default="{ row }">


              <!-- 修改工单类型和工单内容的显示 -->


              <template


                v-if="


                  currentDetail.status === 0 &&


                  row.label2 === '工单类型' &&


                  hasProcessingBtnPermission()


                "


              >


                <el-select


                  v-model="currentDetail.type"


                  placeholder="请选择工单类型"


                  class="required-input"


        <div class="PopUpTableScrolls">


          <!-- 基本信息表格 -->


          <el-table :show-header="false" :data="formattedDetailFields" border class="tableCss">


            <el-table-column prop="label1" label="基本信息" width="150">


              <template #default="{ row }">


                <!-- 添加必填星号的标签 -->


                <span


                  v-if="


                    currentDetail.status === 0 &&


                    (row.label1 === '关联算法' || row.label1 === '工单名称')


                  "


                  class="required-label"


                >


                  <el-option


                    v-for="item in types"


                    :key="item.value"


                    :label="item.label"


                    :value="item.value"


                  <span class="required-star">*</span>{{ row.label1 }}


                </span>


                <span v-else>{{ row.label1 }}</span>


              </template>


            </el-table-column>


            <el-table-column>


              <template #default="{ row }">


                <template


                  v-if="


                    currentDetail.status === 0 &&


                    row.label1 === '工单名称' &&


                    hasProcessingBtnPermission()


                  "


                >


                  <el-input


                    v-model="currentDetail.orderName"


                    placeholder="请输入工单名称"


                    class="required-input"


                  />


                </el-select>


              </template>


              <template


                v-else-if="


                  currentDetail.status === 0 &&


                  row.label2 === '工单内容' &&


                  hasProcessingBtnPermission()


                "


              >


                <el-input


                  type="textarea"


                  v-model="currentDetail.content"


                  placeholder="请输入工单内容"


                  class="required-input"


                />


              </template>


              <template v-else>{{ row.value2 }}</template>


            </template>


          </el-table-column>


        </el-table>




        <!-- 事件处理详情 -->


        <div v-if="[3, 4].includes(currentDetail.status)" class="form-section">


          <div class="section-title">


            <!-- 处理中状态显示必填星号 -->


            <template v-if="currentDetail.status === 3">


              <span class="required-label"> <span class="required-star">*</span>事件处理详情 </span>


            </template>


            <template v-else> 事件处理详情 </template>


          </div>


          <!-- 处理中状态显示输入框 -->


          <template v-if="currentDetail.status === 3 && hasProcessedAndOverBtnPermission()">


            <el-input


              type="textarea"


              v-model="currentDetail.processingDetail"


              placeholder="请输入事件处理详情"


              :rows="4"


              style="width: 100%; margin-bottom: 10px"


            />


          </template>


          <!-- 已完成和已完结状态显示只读文本 -->


          <template v-else>


            <div class="readonly-processing-detail">


              {{ currentDetail.processingDetail }}


            </div>


          </template>


        </div>




        <!-- 上传图片 -->


        <div


          v-if="[3].includes(currentDetail.status)"


          class="form-section"


          style="margin-bottom: 32px"


        >


          <div class="section-title" v-if="hasProcessedAndOverBtnPermission()">


            <!-- 已完成状态显示必填星号 -->


            <template v-if="currentDetail.status === 3">


              <span class="required-label"> <span class="required-star">*</span>上传图片 </span>


            </template>


            <template v-else> 上传图片 </template>


          </div>


          <el-upload


            v-if="hasProcessedAndOverBtnPermission()"


            ref="upload"


            :action="'#'"


            :auto-upload="false"


            list-type="picture-card"


            :on-change="handleFileChange"


            :on-remove="handleUploadRemove"


            :before-upload="beforeUpload"


            :file-list="currentDetail.photos || []"


            :limit="1"


            accept="image/*"


            class="detail-upload"


          >


            <template v-if="!currentDetail.photos || currentDetail.photos.length < 1">


              <i class="el-icon-plus">+</i>


            </template>


          </el-upload>


          <div


            class="el-upload__tip"


            style="margin-top: 12px"


            v-if="hasProcessedAndOverBtnPermission()"


          >


            （上传照片即可完结工单，只能上传jpg、jpeg、png照片,且不超过5M）


          </div>


        </div>




        <!-- 图片和地图部分 -->


        <div class="media-section">


          <el-row :gutter="20">


            <el-col :span="1"><div class="leftBtn" @click="leftClick"><</div></el-col>


            <el-col :span="11">


              <div class="media-box">


                <div class="media-title">事件图片</div>


                <div class="media-content">


                  <el-image


                    v-if="currentDetail.mediaUrl"


                    :src="getThumbUrl(currentDetail.mediaUrl)"


                    :preview-src-list="[getPreviewUrl(currentDetail.mediaUrl)]"


                    fit="contain"


                    style="width: 700px; height: 520px; cursor: pointer"


                </template>


                <template


                  v-else-if="


                    currentDetail.status === 0 &&


                    row.label1 === '关联算法' &&


                    hasProcessingBtnPermission()


                  "


                >


                  <el-select


                    v-model="currentDetail.aiType"


                    placeholder="请选择关联算法"


                    class="required-input"


                  >


                    <template #placeholder>


                      <div class="image-placeholder">


                        <i class="el-icon-picture-outline"></i>


                        <span>加载中...</span>


                      </div>


                    </template>


                    <template #error>


                      <div class="image-error">


                        <i class="el-icon-picture-outline"></i>


                        <span>加载失败</span>


                      </div>


                    </template>


                  </el-image>


                  <div v-else class="no-media">暂无图片/视频</div>


                </div>


              </div>


            </el-col>


            <el-col :span="11">


              <div class="media-box">


                <!-- 根据状态显示不同的标题和内容 -->


                    <el-option


                      v-for="item in algorithms2"


                      :key="item.value"


                      :label="item.label"


                      :value="item.value"


                    />


                  </el-select>


                </template>


                <template v-else>{{ row.value1 }}</template>


              </template>


            </el-table-column>


            <el-table-column prop="label2" label="基本信息" width="150">


              <template #default="{ row }">


                <!-- 添加必填星号的标签 -->




                <template v-if="currentDetail.status === 4">


                  <div class="media-title">工单处理图片</div>


                <span


                  v-if="currentDetail.status === 0 && row.label2 === '工单内容'"


                  class="required-label"


                >


                  <span class="required-star">*</span>{{ row.label2 }}


                </span>


                <span v-else>{{ row.label2 }}</span>


              </template>


            </el-table-column>


            <el-table-column>


              <template #default="{ row }">


                <!-- 修改工单类型和工单内容的显示 -->




                <template


                  v-if="


                    currentDetail.status === 0 &&


                    row.label2 === '工单内容' &&


                    hasProcessingBtnPermission()


                  "


                >


                  <el-input


                    type="textarea"


                    v-model="currentDetail.content"


                    placeholder="请输入工单内容"


                    class="required-input"


                  />


                </template>


                <template v-else>{{ row.value2 }}</template>


              </template>


            </el-table-column>


          </el-table>




          <!-- 事件处理详情 -->


          <div v-if="[3, 4].includes(currentDetail.status)" class="form-section">


            <div class="section-title">


              <!-- 处理中状态显示必填星号 -->


              <template v-if="currentDetail.status === 3">


                <span class="required-label">


                  <span class="required-star">*</span>事件处理详情


                </span>


              </template>


              <template v-else> 事件处理详情 </template>


            </div>


            <!-- 处理中状态显示输入框 -->


            <template v-if="currentDetail.status === 3 && hasProcessedAndOverBtnPermission()">


              <el-input


                type="textarea"


                v-model="currentDetail.processingDetail"


                placeholder="请输入事件处理详情"


                :rows="4"


                style="width: 100%; margin-bottom: 10px"


              />


            </template>


            <!-- 已完成和已完结状态显示只读文本 -->


            <template v-else>


              <div class="readonly-processing-detail">


                {{ currentDetail.processingDetail }}


              </div>


            </template>


          </div>




          <!-- 上传图片 -->


          <div v-if="[3].includes(currentDetail.status)" class="form-section uploadImg">


            <div class="section-title" v-if="hasProcessedAndOverBtnPermission()">


              <!-- 已完成状态显示必填星号 -->


              <template v-if="currentDetail.status === 3">


                <span class="required-label"> <span class="required-star">*</span>上传图片 </span>


              </template>


              <template v-else> 上传图片 </template>


            </div>


            <el-upload


              v-if="hasProcessedAndOverBtnPermission()"


              ref="upload"


              :action="'#'"


              :auto-upload="false"


              list-type="picture-card"


              :on-change="handleFileChange"


              :on-remove="handleUploadRemove"


              :before-upload="beforeUpload"


              :file-list="currentDetail.photos || []"


              :limit="1"


              accept="image/*"


              class="detail-upload"


            >


              <template v-if="!currentDetail.photos || currentDetail.photos.length < 1">


                <!-- <i class="el-icon-plus">+</i> -->


                <div class="el-icon-plus">


                  <span>+</span>


                </div>


              </template>


            </el-upload>


            <div class="el-upload__tip" v-if="hasProcessedAndOverBtnPermission()">


              （上传照片即可完结工单，只能上传jpg、jpeg、png照片,且不超过5M）


            </div>


          </div>




          <!-- 图片和地图部分 -->


          <div class="media-section">


            <el-row :gutter="20">


              <el-col :span="12">


                <div class="media-box">


                  <div class="media-title">事件图片</div>


                  <div class="media-content">


                    <el-image


                      v-if="currentDetail.updatePhotoUrl"


                      :src="getThumbUrl(currentDetail.updatePhotoUrl)"


                      :preview-src-list="[getPreviewUrl(currentDetail.updatePhotoUrl)]"


                      fit="fill"


                      v-if="currentDetail.mediaUrl"


                      :src="getThumbUrl(currentDetail.mediaUrl)"


                      :preview-src-list="[getPreviewUrl(currentDetail.mediaUrl)]"


                      fit="contain"


                      style="width: 700px; height: 520px; cursor: pointer"


                    >


                      <template #placeholder>


                        <div class="image-placeholder">


@@ -614,75 +659,136 @@


                        </div>


                      </template>


                    </el-image>


                    <div v-else class="no-media">暂无处理图片</div>


                    <div v-else class="no-media">暂无图片/视频</div>


                  </div>


                </template>


                <template v-else>


                  <div class="media-title">地图标记事件点</div>


                  <div class="media-content">


                    <map-container v-if="detailVisible" ref="MapContainer"></map-container>


                  </div>


                </template>


              </div>


            </el-col>


            <el-col :span="1"><div class="leftBtn" @click="rightClick">></div></el-col>


          </el-row>


                </div>


              </el-col>


              <el-col :span="12">


                <div class="media-box">


                  <!-- 根据状态显示不同的标题和内容 -->




                  <template v-if="currentDetail.status === 4">


                    <div class="media-title">工单处理图片</div>


                    <div class="media-content">


                      <el-image


                        v-if="currentDetail.updatePhotoUrl"


                        :src="getThumbUrl(currentDetail.updatePhotoUrl)"


                        :preview-src-list="[getPreviewUrl(currentDetail.updatePhotoUrl)]"


                        fit="fill"


                      >


                        <template #placeholder>


                          <div class="image-placeholder">


                            <i class="el-icon-picture-outline"></i>


                            <span>加载中...</span>


                          </div>


                        </template>


                        <template #error>


                          <div class="image-error">


                            <i class="el-icon-picture-outline"></i>


                            <span>加载失败</span>


                          </div>


                        </template>


                      </el-image>


                      <div v-else class="no-media">暂无处理图片</div>


                    </div>


                  </template>


                  <template v-else>


                    <div class="media-title">


                      地图标记事件点


                      <el-popover   v-if="currentDetail.status === 3 || currentDetail.status === 0"


                     popper-class="custom-qrcode-popover"


                     :width="120"


                     :visible="currentDetail.showQR && detailVisible"


                     placement="top"


                     title=""


                     trigger="click"




                      >


                        <template #reference>


                          <img @click.stop="handleQRCode(currentDetail)"  class="QRCodeImg" src="@/assets/images/dataCenter/qrCode.svg" alt="" title="事件导航" />


                        </template>


                        <div class="qrcode-content">


                          <div class="close-btn"  @click.stop="currentDetail.showQR = false">×</div>


                          <CreateQRcode v-if="currentDetail.showQR && detailVisible" :latAndLon="currentDetail.location"></CreateQRcode>


                        </div>


                      </el-popover>


                    </div>


                    <div class="media-content">


                      <map-container v-if="detailVisible" ref="MapContainer"></map-container>


                    </div>


                  </template>


                </div>


              </el-col>


            </el-row>


          </div>


        </div>




        <!-- 操作按钮 -->


        <div class="dialog-footer">


          <template v-if="currentDetail.status === 2">


            <!-- 待审核 -->


            <el-button


              v-if="hasReviewBtnPermission()"


              type="primary"


              :loading="approveLoading"


              @click="approveTicket"


              >通过</el-button


            >


            <el-button


              v-if="hasReviewBtnPermission()"


              type="danger"


              :loading="rejectLoading"


              @click="rejectTicket"


              >不通过</el-button


            >


            <el-button @click="detailVisible = false">取消</el-button>


          </template>


          <template v-else-if="currentDetail.status === 0">


            <el-button


              v-if="hasProcessingBtnPermission()"


              type="primary"


              :loading="dispatchLoading"


              @click="approveAndDispatch"


              >受理</el-button


            >


            <el-button


              v-if="hasProcessingBtnPermission()"


              type="danger"


              :loading="rejectLoading"


              @click="rejectTicket"


              >不受理</el-button


            >


            <el-button @click="detailVisible = false">取消</el-button>


          </template>


          <template v-if="currentDetail.status === 3">


            <!-- 处理中 -->


            <el-button


              v-if="hasProcessedAndOverBtnPermission()"


              type="primary"


              :loading="completeLoading"


              @click="completeTicket"


              >完成工单</el-button


            >


            <el-button @click="detailVisible = false">取消</el-button>


          </template>


          <template v-else-if="currentDetail.status === 4">


            <!-- 已完成 -->


            <!-- <el-button v-if="hasProcessedAndOverBtnPermission()" type="primary" :loading="finalizeLoading"


        <div class="dialog-footer1">


          <div class="leftBtn" :class="currentIndex === 0 ? 'disableds' : ''" @click="leftClick">


            上一页


          </div>


          <div class="btngroups">


            <template v-if="currentDetail.status === 2">


              <!-- 待审核 -->


              <el-button


                v-if="hasReviewBtnPermission()"


                type="primary"


                :loading="approveLoading"


                @click="approveTicket"


                >通过</el-button


              >


              <el-button


                v-if="hasReviewBtnPermission()"


                type="danger"


                :loading="rejectLoading"


                @click="rejectTicket"


                >不通过</el-button


              >


              <el-button @click="detailVisible = false">取消</el-button>


            </template>


            <template v-else-if="currentDetail.status === 0">


              <el-button


                v-if="hasProcessingBtnPermission()"


                type="primary"


                :loading="dispatchLoading"


                @click="approveAndDispatch"


                >受理</el-button


              >


              <el-button


                v-if="hasProcessingBtnPermission()"


                type="danger"


                :loading="rejectLoading"


                @click="rejectTicket"


                >不受理</el-button


              >


              <el-button @click="detailVisible = false">取消</el-button>


            </template>


            <template v-if="currentDetail.status === 3">


              <!-- 处理中 -->


              <el-button


                v-if="hasProcessedAndOverBtnPermission()"


                type="primary"


                :loading="completeLoading"


                @click="completeTicket"


                >完成工单</el-button


              >


              <el-button @click="detailVisible = false">取消</el-button>


            </template>


            <template v-else-if="currentDetail.status === 4">


              <!-- 已完成 -->


              <!-- <el-button v-if="hasProcessedAndOverBtnPermission()" type="primary" :loading="finalizeLoading"


              @click="finalizeTicket">完结工单</el-button> -->


            <el-button @click="detailVisible = false">取消</el-button>


          </template>


              <el-button @click="detailVisible = false">取消</el-button>


            </template>


          </div>


          <div


            :class="currentIndex === tableData.length - 1 ? 'disableds' : ''"


            class="leftBtn"


            @click="rightClick"


          >


            下一页


          </div>


        </div>


      </div>


    </el-dialog>


@@ -711,6 +817,7 @@


        </el-form-item>


        <el-form-item label="选择处理人" prop="handler">


          <el-select


            filterable


            v-model="dispatchForm.handler"


            placeholder="请选择处理人"


            :disabled="!dispatchForm.department"


@@ -820,16 +927,18 @@


    >


      <div class="dialog-footer">


        <el-button type="primary" @click="reCheckConfirm(1)">人工复核</el-button>


        <el-button type="primary" @click="reCheckConfirm(2)">机器复核</el-button>


        <el-button type="primary" @click="reCheckConfirm(2)">无人机复核</el-button>


      </div>


    </el-dialog>


  </basic-container>


</template>




<script>


import { getSmallImg, getShowImg } from '@/utils/util';


import { ElMessageBox, ElLoading } from 'element-plus';


import { calculateDefaultRange } from '@/utils/util';


import { gcj02ToWgs84, wgs84ToGcj02 } from '@/utils/coordinateTransformation';


import _ from 'lodash';


import {


  getList,


  createTicket,


@@ -840,17 +949,22 @@


  getReviewById,


  getCreateEventJob,


} from '@/api/tickets/ticket';


import { getSFDictionaryTree } from '@/api/job/task';


import { export_json_to_excel } from '@/utils/exportExcel';


import geoJson from '@/assets/geoJson.json';




import { mapGetters } from 'vuex';


import { getAdcodeObj } from '@/utils/disposeData';


import elTooltipCopy from '@/components/ElTooltipCopy.vue';


import getBaseConfig from '@/buildConfig/config';


import CreateQRcode from '@/components/CreateQRcode/CreateQRcode.vue';


const { envName } = getBaseConfig();


function regExp(label, name) {


  var reg = new RegExp(label + '=([^&]*)(&|$)', 'g');


  return name.match(reg)[0].split('=')[1];


}




export default {


  components: { elTooltipCopy, CreateQRcode },


  name: 'TicketPage',


  data() {


    return {


@@ -862,6 +976,7 @@


      dispatchLoading: false,


      completeLoading: false,


      finalizeLoading: false,


      createoredit: '',


      activeTab: 'all',


      // tabs 只保留静态结构，不做权限判断


      tabs: [


@@ -884,12 +999,14 @@


      },


      departments: [],


      types: [],


      allAlgorithms: [],


      handlers: [


        { label: '处理人A', value: 'handlerA' },


        { label: '处理人B', value: 'handlerB' },


      ],




      algorithms: [],


      algorithms2: [],


      statuses: [


        { label: '待审核', value: '2' },


        { label: '待处理', value: '0' },


@@ -903,7 +1020,7 @@


      tableData: [],


      option: {


        border: true,


        stripe: true,


        stripe: false,


        selection: true, // 添加多选功能


        index: true, // 保留序号功能


        indexLabel: '序号',


@@ -916,17 +1033,21 @@


        addBtn: false,


        menu: true,


        page: true,




        height: 'auto',


        calcHeight: 196,




        column: [


          // { label: "序号", prop: "id", width: 70 },


          { label: '工单编号', prop: 'orderNumber', width: 120, overHidden: true, tooltip: true },


          { label: '工单编号', prop: 'orderNumber', width: 170 },


          { label: '工单名称', prop: 'orderName', width: 150, overHidden: true, tooltip: true },


          { label: '所属单位', prop: 'department', overHidden: true, tooltip: true },


          { label: '发起时间', prop: 'startTime', width: 160 },


          { label: '关联算法', prop: 'aiType', width: 150, overHidden: true, tooltip: true },


          { label: '关联算法', prop: 'aiType', overHidden: true, tooltip: true },


          {


            label: '工单类型',


            prop: 'type',


            width: 130,


            width: 110,


            overHidden: true,


            tooltip: true,


            type: 'select',


@@ -939,11 +1060,11 @@


            width: 152,


            overHidden: true,


          },


          { label: '创建人', prop: 'creator', width: 100 },


          { label: '处理人', prop: 'handler', width: 100 },


          { label: '创建人', prop: 'creator', width: 70 },


          { label: '处理人', prop: 'handler', width: 70 },


          {


            slot: true,


            hide: false,


            hide: envName === 'jiangwu' ? true : false,


            label: '复核状态',


            prop: 'isReview',


            width: 90,


@@ -952,10 +1073,9 @@


        ],


      },


      page: {


        total: 0,


        currentPage: 1,


        pageSize: 10,


        pageSizes: [10, 20, 30],


        currentPage: 1,


        total: 0,


      },


      dialogVisible: false,


      detailVisible: false,


@@ -980,14 +1100,17 @@


        algorithm: [{ required: true, message: '请选择关联算法', trigger: 'change' }],


        location: [


          {


            required: true,


            validator: (rule, value, callback) => {


              if (!value || value.length < 2) {


                callback(new Error('请选择位置信息'));


              } else if (!value[0] || !value[1]) {


                callback(new Error('请选择位置信息'));


              } else {


                callback();


              }


            },


            trigger: 'blur',


            trigger: 'change',


          },


        ],


        photos: [


@@ -1039,17 +1162,34 @@




      // 复核弹窗


      reCheckDialog: false,


      treePropsSF: {


        label: 'dictValue',


        value: 'id',


        children: 'children',


      },


      dictKey: '',


      dataList: [],


      checkedKeys: [],


    };


  },


  created() {


    this.inputMapShowDefaultCenter = null;




    this.loadAMapScripts();


    this.fetchDropdownData();


    console.log('permission.tickets_processing_btn', this.permission.tickets_processing_btn);


    console.log('permission', this.permission.tickets_tab_pending);


    // console.log('permission.tickets_processing_btn', this.permission.tickets_processing_btn);


    // console.log('permission', this.permission.tickets_tab_pending);


  },




  mounted() {


    this.getAlgorithmList();




    const href = this.$route.href;


    if (this.$route?.query?.status !== undefined && this.$route?.query?.status !== null) {


      this.filters.status = this.$route?.query?.status + '';


      this.$router.replace({});


    }




    let curQueryParams = {};




    if (href.indexOf('?') != -1 && href.split('?').length > 0) {


@@ -1087,9 +1227,10 @@




      if (orderNumber) {


        this.filters.keyword = orderNumber;




        this.$nextTick(() => {


          this.isShowInfo = true;


          const find = this.$store.state.tags.bsTagList.find(i => i.path === '/tickets/ticket');


          find && (find.query = {});


        });


      }


    }


@@ -1211,23 +1352,32 @@


        { label: '关联任务', value: this.currentDetail.job_name || '/' },


        { label: '任务发起人', value: this.currentDetail.creator },


        { label: '当前状态', value: this.mapStatus(this.currentDetail.status) },


        { label: '事件地址', value: this.currentDetail.address }, // 包含经纬度信息


        { label: '关联算法', value: this.currentDetail.aiType },


        { label: '事件地址', value: this.currentDetail.address || this.currentDetail.latAndLon }, // 包含经纬度信息


        {


          label: '关联算法',


          value:


            this.algorithms.find(t => t.value === this.currentDetail.aiType)?.label ||


            this.currentDetail.aiType ||


            '/',


        },


        { label: '发起单位', value: this.currentDetail.department },


        { label: '发起任务时间', value: this.currentDetail.startTime },


        { label: '工单内容', value: this.currentDetail.content },


      ];




      // 过滤掉值为 '/' 的列


      const filteredFields = fields.filter(field => field.value !== '/');


      // 将字段分成两列


      const formattedFields = [];


      for (let i = 0; i < fields.length; i += 2) {


      for (let i = 0; i < filteredFields.length; i += 2) {


        formattedFields.push({


          label1: fields[i]?.label || '',


          value1: fields[i]?.value || '暂无数据',


          label2: fields[i + 1]?.label || '',


          value2: fields[i + 1]?.value || '暂无数据',


          label1: filteredFields[i]?.label || '',


          value1: filteredFields[i]?.value || (filteredFields[i]?.label ? '暂无数据' : ''),


          label2: filteredFields[i + 1]?.label || '',


          value2: filteredFields[i + 1]?.value || (filteredFields[i + 1]?.label ? '暂无数据' : ''),


        });


      }




      return formattedFields;


    },


    dynamicFixedStatuses() {


@@ -1288,29 +1438,96 @@


        return '/';


      };


    },




    popupShowImage() {


      return list => {


        return list.map(item => ({


          ...item,


          url: getShowImg(item.url),


        }));


      };


    },


  },




  methods: {


// 左切换


leftClick() {


  if (this.tableData.length === 0) return;


  this.currentIndex = Math.max(0, this.currentIndex - 1);


  this.updateCurrentDetail();


},


    handleCheck(data, { checkedKeys, checkedNodes }) {


      this.checkedKeys = checkedKeys;


      // 获取所有选中节点的 dictKey


      const selectedDictKeys = checkedNodes.map(node => node.dictKey).filter(Boolean);


      this.filters.type = selectedDictKeys;


      this.fetchTableData();


    },


    // 算法


    getAlgorithmList() {


      getSFDictionaryTree({ code: 'SF' }).then(res => {


        if (res.data.code === 200) {


          const result = res.data.data[0].children;


          // 过滤第一层数据


          const filteredData = result.map(item => {


            // 过滤第二层数据


            const children = item.children?.map(child => ({


              ...child,


              children: [], // 清空第三层数据


            }));


            return {


              ...item,


              children: children || [],


            };


          });


          this.dataList = filteredData;


        }


      });


    },




    handleSFNodeClick(data) {


      console.log(data.dictKey, '666666666');


      this.filters.type = '';


      this.filters.algorithm = '';


      this.filters.type = data.dictKey;


      // 更新列表请求


      this.fetchTableData();


    },


    handleClear() {


      this.dictKey = '';


      this.filters.algorithm = '';


      this.filters.type = '';


      this.fetchTableData();


    },


    handleCellClick(row, column) {


      console.log(row, column.no);


      if (column.no === 2) {


        navigator.clipboard.writeText(row.orderNumber).then(() => {


          this.$message.success('复制工单编号成功');


        });


      } else if (column.no === 3) {


        navigator.clipboard.writeText(row.orderName).then(() => {


          this.$message.success('复制工单名称成功');


        });


      } else if (column.no === 4) {


        navigator.clipboard.writeText(row.department).then(() => {


          this.$message.success('复制所属单位成功');


        });


      }


    },


    // 左切换


    leftClick() {


      if (this.tableData.length === 0) return;


      this.currentIndex = Math.max(0, this.currentIndex - 1);


      this.updateCurrentDetail();


    },


    // 右切换


rightClick() {


  if (this.tableData.length === 0) return;


  this.currentIndex = Math.min(this.tableData.length - 1, this.currentIndex + 1);


  this.updateCurrentDetail();


},


    rightClick() {


      if (this.tableData.length === 0) return;


      this.currentIndex = Math.min(this.tableData.length - 1, this.currentIndex + 1);


      this.updateCurrentDetail();


    },


    // 更新当前详情


    updateCurrentDetail() {


      this.currentDetail = this.tableData[this.currentIndex];


      this.currentDetail.mediaUrl = this.currentDetail.photo_url;


      this.currentDetail.updatePhotoUrl = this.currentDetail.update_photo_url;


      this.currentDetail.processingDetail = this.currentDetail.content;


      this.handleViewDetail(this.currentDetail)


console.log('this.currentDetail', this.tableData);


      this.handleViewDetail(this.currentDetail);




      // 如果使用地图组件，需要更新地图标记


      this.$nextTick(() => {


@@ -1319,29 +1536,34 @@


        }


      });


    },


    async handleQRCode(val) {


      val.showQR = !val.showQR;


    },


    async loadAMapScripts() {


      try {


        const areaCode = this.userInfo.detail.areaCode;


        const subAreaCode = areaCode ? areaCode.substring(0, 6) : '';


        const adcodeObj = getAdcodeObj(geoJson, 'adcode', subAreaCode);




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


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




        // 直接从返回对象中获取正确的路径


        const center = adcodeObj?.payload?.objects?.collection?.geometries?.[0]?.properties?.center;




        if (Array.isArray(center) && center.length === 2) {


          this.mapParams.center = center;


          this.inputMapShowDefaultCenter = center;


        } else {


          // 如果找不到中心点，尝试使用 bbox 的中心点


          const bbox = adcodeObj?.payload?.bbox;


          if (Array.isArray(bbox) && bbox.length === 4) {


            const centerX = (bbox[0] + bbox[2]) / 2;


            const centerY = (bbox[1] + bbox[3]) / 2;


            this.mapParams.center = [centerX, centerY];


            this.inputMapShowDefaultCenter = [centerX, centerY];


          } else {


            this.mapParams.center = [115.861365, 28.621311];


            this.inputMapShowDefaultCenter = [115.861365, 28.621311];


          }


        }


        this.mapParams.center = [...this.inputMapShowDefaultCenter];




        this.mapLoaded = true;


      } catch (error) {


@@ -1409,7 +1631,8 @@


    async fetchDropdownData() {


      try {


        const response = await getTicketInfo();


        const { dept_data, event_type, ai_type } = response.data.data;




        const { dept_data, event_type, ai_type, info } = response.data.data;




        this.departments = dept_data.map(item => ({


          label: item.dept_name,


@@ -1428,7 +1651,10 @@




        const columnType = this.findObject(this.option.column, 'type');


        columnType.dicData = this.types;


        this.allAlgorithms = info;




        console.log('工单类型', this.types);


        console.log('关联算法', this.allAlgorithms);


        // 确保算法数据的映射一致


        this.algorithms =


          ai_type?.map(item => ({


@@ -1438,6 +1664,8 @@


            label: item.dict_value,


            value: item.dict_key,


          })) || [];




        this.algorithms2 = _.cloneDeep(this.algorithms);




        // 构建用户ID和名称的映射关系


        this.userNameToIdMap = {};


@@ -1450,6 +1678,34 @@


        this.$message.error('加载下拉框数据失败');


      }


    },


    // 工单类型变化时触发


    handleTypeChange(typeValue) {


      this.form.algorithm = [];


      if (!typeValue) {


        // 未选择类型时清空算法列表


        this.algorithms2 = [];


        return;


      }




      const matchedCategory = this.allAlgorithms.find(category => category.dict_key === typeValue);




      if (


        !matchedCategory ||


        !matchedCategory.algorithms ||


        matchedCategory.algorithms.length === 0


      ) {


        // 无匹配的算法时清空


        this.algorithms2 = [];


        this.$message.info('该工单类型暂无关联算法');


        return;


      }


      this.algorithms2 = matchedCategory.algorithms.map(algo => ({


        label: algo.dict_value,


        value: algo.dict_key,


        dict_key: algo.dict_key,


        dict_value: algo.dict_value,


      }));


    },




    async fetchTableData() {


      if (this.isFetching) return;


@@ -1458,7 +1714,7 @@


      try {


        const currentTab = this.tabs.find(tab => tab.name === this.activeTab);


        const params = {


          word_order_type: this.filters.type || undefined,


          word_order_types: this.filters.type || undefined,


          status:


            currentTab?.name === 'myTickets'


              ? undefined


@@ -1516,7 +1772,7 @@


                ? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`


                : '未知位置',


            address: item.address,


            creator: item.event_num?.slice(0,2) ==='AI'?'AI 小飞' : item.create_user,


            creator: item.event_num?.slice(0, 2) === 'AI' ? 'AI 小飞' : item.create_user,


            handler: item.update_user || '未分配',


            status: Number(item.status || 0),


            // 保存原始字段


@@ -1531,7 +1787,6 @@


            isReview: item.is_review, // 添加复核状态字段映射


          };


        });


        // console.log('this.tableData',this.tableData);




        // 更新总数显示


        this.page.total = total || 0;


@@ -1634,6 +1889,17 @@


          handlerValue = undefined;


        }




        // 验证位置信息


        if (


          !this.form.location ||


          this.form.location.length < 2 ||


          !this.form.location[0] ||


          !this.form.location[1]


        ) {


          this.$message.warning('请在地图上选择位置');


          return;


        }




        let [lng, lat] = this.disposeLocation(true, this.form);




        const submitData = {


@@ -1654,7 +1920,7 @@




        // 草稿时也至少需要工单名称


        if (!submitData.eventName) {


          this.$message.warning('请至少输入工单名称');


          this.$message.warning('请输入工单名称');


          return;


        }




@@ -1672,7 +1938,18 @@


        if (response.data.code === 0) {


          this.$message.success('草稿保存成功');


          this.dialogVisible = false;


          this.fetchTableData();


          (this.form = {


            name: '',


            type: '',


            department: '',


            handler: '',


            algorithm: [], // 关联算法改为数组


            location: [], // 将存储为[经度, 纬度, 地址]格式


            address: '',


            photos: [],


            content: '', // 新增字段，用于存储后端返回的 content


          }),


            this.fetchTableData();


        } else {


          throw new Error(response.data.msg || '保存失败');


        }


@@ -1682,17 +1959,16 @@


        this.draftLoading = false;


      }


    },




    handleCancel() {


      this.resetForm();


      this.dialogVisible = false;


    },


    handleLocationChange(val) {


      let locationValue = val.value;


      console.log('handleLocationChange', locationValue);


      if (locationValue && locationValue.length >= 2) {


        // 兼容第三项为地址


        this.form.location = [


          Number(locationValue[0]),


          Number(locationValue[1]),


          locationValue[2] || '',


        ];


        const [lng, lat] = gcj02ToWgs84(locationValue[0], locationValue[1]);


        this.form.location = [Number(lng), Number(lat), locationValue[2] || ''];


        this.form.address = locationValue[2] || '';


      } else {


        this.form.location = [];


@@ -1724,10 +2000,10 @@


      if (status === -1 || status === '-1') return '';


      // 状态颜色映射


      const colorMap = {


        0: '#ffb6b6', // 待处理-淡红


        3: '#e57373', // 处理中-更淡红


        2: '#faad14', // 待审核-橙色


        4: '#a0cfff', // 已完成-淡蓝


        0: '#FF7411', // 待处理-淡红


        3: '#FFC300', // 处理中-更淡红


        2: '#FF472F', // 待审核-橙色


        4: '#0291A1', // 已完成-淡蓝


      };


      return colorMap[String(status)] || '';


    },


@@ -1775,6 +2051,7 @@


    },




    handleReset() {


      this.dictKey = '';


      this.filters = {


        keyword: '',


        department: '',


@@ -1785,7 +2062,11 @@


        isReview: '', // 重置时清空复核状态


      };


      this.page.currentPage = 1;


      this.$router.replace({}); //清除url参数


      this.fetchTableData();


    },


    handleKeyWords() {


      this.$router.replace({}); //清除url参数


    },




    async handleCurrentChange(val) {


@@ -1804,7 +2085,10 @@


    },




    handleAdd() {


      this.createoredit = 1;


      this.dialogVisible = true;


      this.mapParams.center = [...this.inputMapShowDefaultCenter];


      this.form.location = [];


    },




    resetForm() {


@@ -1833,8 +2117,8 @@


    },




    async handleViewDetail(row) {


    // 找到当前行在tableData中的索引


  this.currentIndex = this.tableData.findIndex(item => item.id === row.id);


      // 找到当前行在tableData中的索引


      this.currentIndex = this.tableData.findIndex(item => item.id === row.id);


      // 先设置workType，直接从row读取


      this.workType = row.work_type !== undefined ? Number(row.work_type) : 0;




@@ -1894,9 +2178,19 @@


          this.stepInfos = [];


        }


      }


      console.log(detailData, 'detailDatadetailDatadetailData');


      this.currentDetail = {


        ...detailData,


        // address: null,


        showQR: false,


        latAndLon: _.round(detailData.location[0], 6) + ',' + _.round(detailData.location[1], 6),


      };




      this.currentDetail = detailData;


      console.log('this.currentDetail', this.currentDetail);


      this.detailVisible = true;


      this.handleTypeChange(this.currentDetail.type);


      console.log('this.currentDetail.location', this.currentDetail.location);




      this.$nextTick(() => {


        if (this.$refs.MapContainer && this.$refs.MapContainer.initAddEntity) {


          this.$refs.MapContainer.initAddEntity('point', this.currentDetail.location);


@@ -1951,89 +2245,16 @@


    },




    async exportData() {


      // 修改导出方法，添加选中数据的处理


      try {


        this.loading = true;




        // 如果有选中的数据，则只导出选中的数据


        let exportData = [];




        // 如果有选中的数据，则导出选中的数据


        if (this.selections.length > 0) {


          exportData = this.selections.map(item => ({


            工单编号: item.orderNumber || '',


            工单名称: item.orderName || '',


            所属单位: item.department || '',


            发起时间: item.startTime || '',


            关联算法: item.aiType || '',


            工单内容: item.address || '',


            工单类型: item.type || '',


            经纬度: item.location


              ? `${item.location[0].toFixed(6)}, ${item.location[1].toFixed(6)}`


              : '',


            创建人: item.creator || '',


            处理人: item.handler || '',


            工单状态: this.mapStatus(item.status),


          }));


          exportData = this.selections.map(item => this.formatExportItem(item));


        } else {


          // 原有的导出全部数据的逻辑


          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的状态值


            keyword: this.filters.keyword || undefined,


            dept_id: this.filters.department || undefined,


            start_date: this.filters.dateRange?.[0]


              ? this.formatDate(this.filters.dateRange[0])


              : undefined,


            end_date: this.filters.dateRange?.[1]


              ? this.formatDate(this.filters.dateRange[1])


              : undefined,


            current: 1,


            size: 10,


          };




          const response = await getList(params);


          if (!response?.data?.data?.records) {


            throw new Error('接口返回数据格式不正确');


          }




          const { records } = response.data.data;




          // 使用与查询列表相同的过滤逻辑


          let filteredRecords = records;


          if (currentTab?.name === 'myTickets') {


            filteredRecords = records.filter(


              item => String(item.create_user_id) === String(item.user_id)


            );


          }




          exportData = filteredRecords.map(item => {


            const longitude = Number(item.longitude) || 0;


            const latitude = Number(item.latitude) || 0;


            return {


              工单编号: item.event_num || '',


              工单名称: item.event_name || '',


              所属单位: item.dept_name || '',


              发起时间: item.create_time || '',


              关联算法: item.ai_types || '',


              工单内容: item.address || '',


              工单类型:


                this.types.find(t => t.value === item.work_order_type_dict_key)?.label || '',


              经纬度:


                !isNaN(longitude) && !isNaN(latitude)


                  ? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`


                  : '',


              创建人: item.create_user || '',


              处理人: item.update_user || '',


              工单状态: this.mapStatus(Number(item.status || 0)),


            };


          });


          // 没有选中数据时，导出当前页面的数据


          exportData = this.tableData.map(item => this.formatExportItem(item));


        }




        if (exportData.length === 0) {


@@ -2058,10 +2279,35 @@


        export_json_to_excel(headers, exportData, '工单数据');


        this.$message.success('数据导出成功');


      } catch (error) {


        // console.error('导出失败:', error);


        this.$message.error(error.message || '导出失败，请稍后重试');


      } finally {


        this.loading = false;


      }


    },




    formatExportItem(item) {


      const longitude = Number(item.longitude) || Number(item.location?.[0]) || 0;


      const latitude = Number(item.latitude) || Number(item.location?.[1]) || 0;




      return {


        工单编号: item.orderNumber || item.event_num || '',


        工单名称: item.orderName || item.event_name || '',


        所属单位: item.department || item.dept_name || '',


        发起时间: item.startTime || item.create_time || '',


        关联算法: item.aiType || item.ai_types || '',


        工单内容: item.address || item.content || '',


        工单类型:


          this.types.find(t => t.value === (item.type || item.work_order_type_dict_key))?.label ||


          '',


        经纬度:


          !isNaN(longitude) && !isNaN(latitude)


            ? `${longitude.toFixed(6)}, ${latitude.toFixed(6)}`


            : '',


        创建人: item.creator || item.create_user || '',


        处理人: item.handler || item.update_user || '',


        工单状态: this.mapStatus(Number(item.status || 0)),


      };


    },




    handleDepartmentChange(deptId) {


@@ -2236,8 +2482,8 @@


        this.$message.warning('请填写工单名称');


        return;


      }


      if (!this.currentDetail.type) {


        this.$message.warning('请选择工单类型');


      if (!this.currentDetail.aiType) {


        this.$message.warning('请选择关联算法');


        return;


      }


      if (!this.currentDetail.content || !this.currentDetail.content.trim()) {


@@ -2247,10 +2493,12 @@




      // 通过验证后,打开派发对话框


      this.dispatchDialogVisible = true;




      console.log('受理', this.currentDetail);


    },


    hasProcessingBtnPermission() {


      // undefined 或 false 都返回 false，只有 true 返回 true


      // console.log('权限检查:', this.permission)


      //  console.log('权限检查:', this.permission.tickets_processing_btn)


      return this.permission && this.permission.tickets_processing_btn === true;


    },


    hasProcessedAndOverBtnPermission() {


@@ -2286,6 +2534,8 @@


        return;


      }


      this.dispatchLoading = true;


      console.log('派发成功', this.currentDetail);




      this.$refs.dispatchForm.validate(async valid => {


        if (valid) {


          try {


@@ -2299,7 +2549,9 @@


              content: this.currentDetail.content, // 使用 content 替代原来的 remark


              createDept: this.dispatchForm.department, // 派发部门 ID


              updateUser: this.dispatchForm.handler, // 处理人 ID


              aiType: this.currentDetail.aiType,


            };


            console.log('派发', data);




            const file = this.currentDetail.file || null; // 如果没有文件，则为 null




@@ -2360,6 +2612,7 @@




    // 添加编辑方法


    handleEdit(row) {


      this.createoredit = 2;


      console.log('编辑原始数据:', row);




      // 尝试从row.dept_id或通过部门名称查找对应的部门ID


@@ -2379,8 +2632,7 @@




      // 获取工单类型值 - 从types中找到匹配的值


      const typeValue =


        this.types.find(t => t.label === row.type)?.value || row.work_order_type_dict_key;




        this.types.find(t => t.value === row.type)?.value || row.work_order_type_dict_key;


      // 获取处理人ID - 使用userNameToIdMap映射


      const handlerId = this.userNameToIdMap[row.handler] || row.handler;




@@ -2451,7 +2703,7 @@


      if (Array.isArray(this.form.location) && this.form.location.length >= 2) {


        this.mapParams.center = [Number(this.form.location[0]), Number(this.form.location[1])];


      } else {


        this.mapParams.center = null; // 没有经纬度时用默认


        this.mapParams.center = [...this.inputMapShowDefaultCenter];


      }


      // 如果有图片，添加到表单中


      if (row.photo_url) {


@@ -2758,20 +3010,24 @@


     * @param goWgs84 是否由国测转换到84，默认false----由84转换到国测


     */


    disposeLocation(goWgs84 = false, data) {


      let lng, lat;


      if (goWgs84) {


        lng = data.location?.[0] ? String(data.location[0]) : undefined;


        lat = data.location?.[1] ? String(data.location[1]) : undefined;


      let lng = '',


        lat = '';




        if (lng && lat) {


          [lng, lat] = gcj02ToWgs84(Number(lng), Number(lat));


        }


      } else {


        lng = Number(data.location[0]);


        lat = Number(data.location[1]);


      if (Array.isArray(data.location) && data.location.length > 0) {


        if (goWgs84) {


          lng = data.location?.[0] ? String(data.location[0]) : undefined;


          lat = data.location?.[1] ? String(data.location[1]) : undefined;




        if (lng && lat) {


          [lng, lat] = wgs84ToGcj02(Number(lng), Number(lat));


          if (lng && lat) {


            [lng, lat] = gcj02ToWgs84(Number(lng), Number(lat));


          }


        } else {


          lng = Number(data.location[0]);


          lat = Number(data.location[1]);




          if (lng && lat) {


            [lng, lat] = wgs84ToGcj02(Number(lng), Number(lat));


          }


        }


      }




@@ -2832,12 +3088,66 @@


      }


    },


  },


  activated() {


    this.handleReset();


  },


};


</script>


<style lang="scss">


.custom-dialog {


  max-height: 96vh;


}


.custom-qrcode-popover {


  min-width: 160px !important;


  min-height: 140px !important;


  position: relative;


  .qrcode-content{


margin-top: 8px;


    .close-btn {


      position: absolute;


      top: 2px;


      right: 2px;


      width: 16px;


      height: 16px;


      line-height: 16px;


      text-align: center;


      cursor: pointer;


      color: #999;


      font-size: 16px;


      z-index: 10;






    }


  }


}


</style>


<style lang="scss" scoped>


.tab-content {


  padding: 10px;


::v-deep(.el-tabs) {


  height: 100%;


  display: flex;


  flex-direction: column;




  .el-tabs__header {


    order: 1;


  }




  .el-tabs__content {


    order: 2;


  }




  .el-tabs__content {


    height: 0;


    flex: 1;


    display: flex;


    flex-direction: column;




    .el-tab-pane {


      height: 0;


      flex: 1;


      display: flex;


      flex-direction: column;


    }


  }


}




.filter-bar {


@@ -2848,11 +3158,11 @@


  gap: 8px; // 使用 gap 统一设置间距




  .filter-item {


    width: 160px; // 减小宽度


    width: 280px; // 减小宽度


  }




  .date-picker {


    width: 240px; // 日期选择器宽度适当调整


    // width: 240px; // 日期选择器宽度适当调整


  }




  .el-button {


@@ -2860,33 +3170,35 @@


  }


}




.uploadImg {


  margin-bottom: 32px;


}




.tableCss {


  width: 100%;


  margin-bottom: 10px;


}




.step-timer {


  position: absolute;


  right: 80%;


  top: 50%;


  transform: translateY(-50%);


  width: 100px;


  margin-left: 4px;


  color: #666;


  font-size: 12px;


}




.event-total-time {


  text-align: center;


  color: #666;


  font-size: 15px;


  margin-bottom: 12px;


}




.action-bar {


  margin-bottom: 16px;


}




.el-tabs {


  :deep(.el-tabs__content) {


    overflow: visible;


  }


}




.tab-content {


  min-height: 200px;


}




.detail-form {


  :deep(.el-form-item) {


    margin-bottom: 10px;


  }




  :deep(.el-form-item__label) {


    color: #606266;


    font-weight: normal;


  }




  :deep(.el-form-item__content) {


    color: #303133;


  }


}




.el-dialog {


@@ -2912,7 +3224,7 @@


.el-upload__tip {


  font-size: 12px;


  color: #909399;


  margin-top: 7px;


  margin-top: 12px;


}




.create-ticket-form {


@@ -3030,7 +3342,33 @@


    }


  }


}


.dialog-footer1 {


  position: sticky;


  bottom: 28px;


  left: 0;


  right: 0;


  background: white;


  z-index: 10;


  padding: 16px 20px;


  border-top: 1px solid #ebeef5;


  display: flex;


  justify-content: space-between;


  align-items: center;


  .el-button + .el-button {


    margin-left: 12px;


  }


  .btngroups {


    margin-left: 12px;


  }


  .el-button {


    padding: 9px 20px;




    &:last-child {


      margin-left: 12px;


      margin-right: 12px;


    }


  }


}


.map-container {


  width: 100%;


  height: 400px;


@@ -3105,7 +3443,17 @@


}




.detail-container {


  padding: 20px;


  padding: 0 20px;




  .detail-top-title {


    display: flex;


    justify-content: center;


    align-items: center;




    .event-orderNumber {


      margin-right: 10px;


    }


  }


}




.status-flow {


@@ -3173,21 +3521,36 @@


}




.media-section {


  margin-bottom: 20px;


  // margin-bottom: 20px;




  .el-row {


    display: flex;


    align-items: center;


  }


}




.leftBtn {


  width: 36px;


  height: 36px;


  width: 70px;


  height: 32px;


  background-color: #999;


  border-radius: 50%;


  border-radius: 5px;


  text-align: center;


  line-height: 36px;


  line-height: 32px;


  color: #fff;


  cursor: pointer;


  opacity: 0.8;


}




.disableds {


  background: #999 !important;


  cursor: not-allowed !important;


  pointer-events: none;


  opacity: 0.3 !important;


}


.PopUpTableScrolls {


  height: 600px;


  overflow-y: scroll;


  overflow-x: hidden;


}


.media-box {


  width: 100%;


@@ -3199,7 +3562,15 @@




  .media-title {


    font-weight: bold;


    margin-bottom: 10px;


    margin-bottom: 5px;


    display: flex;


    align-items: center;


    .QRCodeImg {


      width: 18px;


      height: 18px;


      cursor: pointer;


      padding-bottom: 1px;


    }


  }




  .media-content {


@@ -3214,7 +3585,7 @@


      .el-image__inner {


        width: 100%;


        height: 100%;


        object-fit: contain;


        object-fit: cover !important;


      }


    }


  }


@@ -3267,12 +3638,12 @@


  background-color: #f5f7fa;


  padding: 12px;


  border-radius: 4px;


  min-height: 40px;


  min-height: 30px;


  color: #606266;


  line-height: 1.5;


  display: block;


  text-align: left;




  margin-bottom: 5px;


  &:first-child {


    font-weight: bold;


    margin-bottom: 4px;


@@ -3290,23 +3661,23 @@




.custom-steps-container {


  width: 100%;


  margin: 20px 0;


  margin: 10px 0;


}




.steps-titles {


  display: flex;


  justify-content: space-between;


  margin-bottom: 16px;


  margin-bottom: 14px;


  position: relative;


}




.step-title {


  text-align: center;


  flex: 1;


  font-size: 16px;


  font-size: 14px;


  color: #999;


  position: relative;


  padding-bottom: 10px;


  padding-bottom: 5px;


}




.step-title.active {


@@ -3318,7 +3689,7 @@


  text-align: center;


  font-size: 20px;


  font-weight: bold;


  margin-bottom: 12px;


  margin-bottom: 5px;


  color: #333;


}