无人机管理后台前端（已迁走）
blame | history | patch | commit | commitdiff | ignore whitespace
张含笑
2025-09-01 2ca94de8ede18ac07ccfd8dec7b6f6a707adde9b 
 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"


@@ -97,18 +137,20 @@


          </div>




          <!-- 表格部分 -->


          <avue-crud


            ref="avueCrud"


            v-model="tableData"


            :option="option"


            :data="tableData"


            v-model:page="page"


            @size-change="sizeChange"


            @current-change="handleCurrentChange"


            :table-loading="loading"


            @selection-change="handleSelectionChange"


            :permission="permissionList"


          >


          <avue-crud class="ztzf-public-general-avue-crud" ref="avueCrud" v-model="tableData" :option="option"


            :data="tableData" 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 +193,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 +218,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 +247,8 @@


            </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 +305,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 +317,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 +352,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 +366,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>


@@ -328,26 +400,28 @@


      </el-form>


      <template #footer>


        <div class="dialog-footer">




          <el-button type="danger" :loading="submitLoading" @click="submitForm">发布</el-button>


          <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"




        >


          总耗时：{{ 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,12 +446,7 @@


                  {{ getStepHandler(status) }}


                </span>


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


                  <span


                    class="step-timer"




                  >


                    耗时:{{ getStepTime(status) }}


                  </span>


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


                </div>


                <div class="step-description">


                  {{ getStepCreateTime(status) }}


@@ -387,19 +456,14 @@


          </el-steps>


        </div>




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


        <el-table


          :show-header="false"


          :data="formattedDetailFields"


          border


          class="tableCss"




        >


      <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 === '工单名称'"


                v-if="currentDetail.status === 0 &&(row.label1 === '关联算法' ||  row.label1 === '工单名称')"


                class="required-label"


              >


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


@@ -422,16 +486,37 @@


                  class="required-input"


                />


              </template>


               <template


                v-else-if="


                  currentDetail.status === 0 &&


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


                  hasProcessingBtnPermission()


                "


              >


                <el-select


                  v-model="currentDetail.aiType"


                  placeholder="请选择关联算法"


                  class="required-input"


                >


                  <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 }">


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




              <span


                v-if="


                  currentDetail.status === 0 &&


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


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


                "


                class="required-label"


              >


@@ -443,28 +528,10 @@


          <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"


                >


                  <el-option


                    v-for="item in types"


                    :key="item.value"


                    :label="item.label"


                    :value="item.value"


                  />


                </el-select>


              </template>


              <template


                v-else-if="


                  currentDetail.status === 0 &&


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


                  hasProcessingBtnPermission()


@@ -510,11 +577,7 @@


        </div>




        <!-- 上传图片 -->


        <div


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


          class="form-section uploadImg"




        >


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


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


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


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


@@ -537,14 +600,13 @@


            class="detail-upload"


          >


            <template v-if="!currentDetail.photos || currentDetail.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>


          <div


            class="el-upload__tip"




            v-if="hasProcessedAndOverBtnPermission()"


          >


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


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


          </div>


        </div>


@@ -552,8 +614,8 @@


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


        <div class="media-section">


          <el-row :gutter="20">


            <el-col :span="1"><div class="leftBtn" :class="currentIndex ===0 ? 'disableds':''" @click="leftClick"><</div></el-col>


            <el-col :span="11">




            <el-col :span="12">


              <div class="media-box">


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


                <div class="media-content">


@@ -581,7 +643,7 @@


                </div>


              </div>


            </el-col>


            <el-col :span="11">


            <el-col :span="12">


              <div class="media-box">


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




@@ -611,22 +673,47 @@


                  </div>


                </template>


                <template v-else>


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


                  <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">


                           <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-col :span="1"><div 


            :class="currentIndex === tableData.length-1 ? 'disableds':''" class="leftBtn" @click="rightClick">></div>


            </el-col>






          </el-row>


        </div>


      </div>




        <!-- 操作按钮 -->


        <div class="dialog-footer">


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


        <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()"


@@ -678,6 +765,14 @@


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


            <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>


@@ -692,6 +787,7 @@


      <el-form :model="dispatchForm" :rules="dispatchRules" ref="dispatchForm" label-width="100px">


        <el-form-item label="选择部门" prop="department">


          <el-select




            v-model="dispatchForm.department"


            placeholder="请选择部门"


            @change="handleDispatchDepartmentChange"


@@ -706,6 +802,7 @@


        </el-form-item>


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


          <el-select


          filterable


            v-model="dispatchForm.handler"


            placeholder="请选择处理人"


            :disabled="!dispatchForm.department"


@@ -815,16 +912,18 @@


    >


      <div class="dialog-footer">


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


        <el-button type="primary" @click="reCheckConfirm(2)">AI复核</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,


@@ -834,18 +933,23 @@


  getStepInfo,


  getReviewById,


  getCreateEventJob,


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


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


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




import { mapGetters } from 'vuex';


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


function regExp(label, name) {


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


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


} 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 {


@@ -857,6 +961,7 @@


      dispatchLoading: false,


      completeLoading: false,


      finalizeLoading: false,


      createoredit: '',


      activeTab: 'all',


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


      tabs: [


@@ -879,12 +984,14 @@


      },


      departments: [],


      types: [],


      allAlgorithms: [],


      handlers: [


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


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


      ],




      algorithms: [],


      algorithms2: [],


      statuses: [


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


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


@@ -911,17 +1018,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',


@@ -934,11 +1045,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,


@@ -947,10 +1058,9 @@


        ],


      },


      page: {


        total: 0,


        currentPage: 1,


        pageSize: 10,


        pageSizes: [10, 20, 30],


        currentPage: 1,


        total: 0,


      },


      dialogVisible: false,


      detailVisible: false,


@@ -975,14 +1085,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: [


@@ -1034,17 +1147,35 @@




      // 复核弹窗


      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) {


@@ -1082,10 +1213,12 @@




      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 = {})


        });




      }


    }




@@ -1206,24 +1339,34 @@


        { 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() {


      // 直接使用接口返回的 stepInfos


@@ -1283,28 +1426,97 @@


        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)


      this.handleViewDetail(this.currentDetail);






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


      this.$nextTick(() => {


@@ -1313,29 +1525,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) {


@@ -1403,7 +1620,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,


@@ -1422,7 +1640,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 => ({


@@ -1432,6 +1653,8 @@


            label: item.dict_value,


            value: item.dict_key,


          })) || [];




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




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


        this.userNameToIdMap = {};


@@ -1444,6 +1667,33 @@


        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;


@@ -1452,7 +1702,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


@@ -1510,7 +1760,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),


            // 保存原始字段


@@ -1524,7 +1774,7 @@


            job_create_time: item.job_create_time || '',


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


          };


        })


        });




        // 更新总数显示


        this.page.total = total || 0;


@@ -1627,6 +1877,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 = {


@@ -1647,7 +1908,7 @@




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


        if (!submitData.eventName) {


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


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


          return;


        }




@@ -1665,7 +1926,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 || '保存失败');


        }


@@ -1675,17 +1947,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 = [];


@@ -1717,10 +1988,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)] || '';


    },


@@ -1768,6 +2039,7 @@


    },




    handleReset() {


      this.dictKey = '';


      this.filters = {


        keyword: '',


        department: '',


@@ -1778,7 +2050,11 @@


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


      };


      this.page.currentPage = 1;


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


      this.fetchTableData();


    },


    handleKeyWords(){


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


    },




    async handleCurrentChange(val) {


@@ -1797,7 +2073,10 @@


    },




    handleAdd() {


      this.createoredit = 1;


      this.dialogVisible = true;


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


      this.form.location = [];


    },




    resetForm() {


@@ -1826,8 +2105,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;




@@ -1887,9 +2166,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);


@@ -1972,13 +2261,13 @@


          '经纬度',


          '创建人',


          '处理人',


          '工单状态'


          '工单状态',


        ];




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


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


      } catch (error) {


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


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


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


      } finally {


        this.loading = false;


@@ -1988,7 +2277,7 @@


    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 || '',


@@ -1996,13 +2285,16 @@


        发起时间: 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)}`


          : '',


        工单类型:


          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))


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


      };


    },




@@ -2178,8 +2470,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()) {


@@ -2189,10 +2481,13 @@




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


      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() {


@@ -2228,6 +2523,8 @@


        return;


      }


      this.dispatchLoading = true;


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




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


        if (valid) {


          try {


@@ -2241,7 +2538,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




@@ -2302,6 +2601,7 @@




    // 添加编辑方法


    handleEdit(row) {


      this.createoredit = 2;


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




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


@@ -2321,8 +2621,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;




@@ -2393,7 +2692,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) {


@@ -2700,20 +2999,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));


          }


        }


      }




@@ -2774,39 +3077,46 @@


      }


    },


  },


  activated() {


    this.handleReset();


  },




};


</script>




<style lang="scss">


.custom-dialog {  max-height: 96vh; }


.custom-qrcode-popover {


min-width: 120px !important;


}


</style>


<style lang="scss" scoped>


 :deep(){


    .avue-crud__body{


      .el-form{


        height: 655px;


        overflow: auto;


      }




::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;


    }


  }


.uploadImg {


  margin-bottom: 32px


}


.tableCss {


  width: 100%; margin-bottom: 20px


}


.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


}


.tab-content {


  padding: 10px;


}




.filter-bar {


@@ -2817,11 +3127,11 @@


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




  .filter-item {


    width: 160px; // 减小宽度


    width: 280px; // 减小宽度


  }




  .date-picker {


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


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


  }




  .el-button {


@@ -2829,33 +3139,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 {


@@ -2999,7 +3311,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;


@@ -3074,7 +3412,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 {


@@ -3142,28 +3490,37 @@


}




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


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


@@ -3175,7 +3532,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 {


@@ -3190,7 +3555,7 @@


      .el-image__inner {


        width: 100%;


        height: 100%;


        object-fit: contain;


        object-fit: cover !important;


      }


    }


  }


@@ -3243,12 +3608,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;


@@ -3266,23 +3631,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 {


@@ -3294,7 +3659,7 @@


  text-align: center;


  font-size: 20px;


  font-weight: bold;


  margin-bottom: 12px;


  margin-bottom: 5px;


  color: #333;


}