| | |
| | | </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-dialog> |
| | | |
| | | <!-- 工单详情对话框 --> |
| | | <el-dialog align-center v-model="detailVisible" title="工单详情" width="80%" append-to-body> |
| | | <el-dialog v-model="detailVisible" title="工单详情" width="80%" append-to-body> |
| | | <div class="detail-container"> |
| | | <div class="detail-top-title"> |
| | | <div class="event-title-center event-orderNumber"> |
| | |
| | | <template #default="{ row }"> |
| | | <!-- 添加必填星号的标签 --> |
| | | <span |
| | | v-if="currentDetail.status === 0 &&(row.label1 === '关联算法' || row.label1 === '工单名称')" |
| | | v-if="currentDetail.status === 0 && row.label1 === '工单名称'" |
| | | class="required-label" |
| | | > |
| | | <span class="required-star">*</span>{{ row.label1 }} |
| | |
| | | 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 algorithms" |
| | | :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" |
| | | > |
| | |
| | | <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() |
| | |
| | | <!-- 图片和地图部分 --> |
| | | <div class="media-section"> |
| | | <el-row :gutter="20"> |
| | | |
| | | <el-col :span="12"> |
| | | <el-col :span="1"> |
| | | <div |
| | | class="leftBtn" |
| | | :class="currentIndex === 0 ? 'disableds' : ''" |
| | | @click="leftClick" |
| | | > |
| | | < |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="11"> |
| | | <div class="media-box"> |
| | | <div class="media-title">事件图片</div> |
| | | <div class="media-content"> |
| | |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-col :span="11"> |
| | | <div class="media-box"> |
| | | <!-- 根据状态显示不同的标题和内容 --> |
| | | |
| | |
| | | </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 class="dialog-footer"> |
| | | <div |
| | | class="leftBtn" |
| | | :class="currentIndex === 0 ? 'disableds' : ''" |
| | | @click="leftClick" |
| | | > |
| | | <el-icon><ArrowLeft /></el-icon> |
| | | </div> |
| | | <div> |
| | | <template v-if="currentDetail.status === 2"> |
| | | <template v-if="currentDetail.status === 2"> |
| | | <!-- 待审核 --> |
| | | <el-button |
| | | v-if="hasReviewBtnPermission()" |
| | |
| | | @click="finalizeTicket">完结工单</el-button> --> |
| | | <el-button @click="detailVisible = false">取消</el-button> |
| | | </template> |
| | | </div> |
| | | <div |
| | | :class="currentIndex === tableData.length - 1 ? 'disableds' : ''" |
| | | class="leftBtn" |
| | | @click="rightClick" |
| | | > |
| | | <el-icon><ArrowRight /></el-icon> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | |
| | | { label: '任务发起人', value: this.currentDetail.creator }, |
| | | { label: '当前状态', value: this.mapStatus(this.currentDetail.status) }, |
| | | { label: '事件地址', value: this.currentDetail.address || this.currentDetail.latAndLon }, // 包含经纬度信息 |
| | | { label: '关联算法', |
| | | // value: this.currentDetail.aiType |
| | | value: |
| | | this.algorithms.find(t => t.value === this.currentDetail.aiType)?.label || |
| | | this.currentDetail.aiType || |
| | | '/', |
| | | |
| | | }, |
| | | { label: '关联算法', value: this.currentDetail.aiType }, |
| | | { label: '发起单位', value: this.currentDetail.department }, |
| | | { label: '发起任务时间', value: this.currentDetail.startTime }, |
| | | { label: '工单内容', value: this.currentDetail.content }, |
| | |
| | | columnType.dicData = this.types; |
| | | this.allAlgorithms = info |
| | | |
| | | console.log('工单类型',this.types); |
| | | console.log('关联算法',this.allAlgorithms ); |
| | | // console.log('工单类型',this.types); |
| | | // console.log('关联算法',this.allAlgorithms ); |
| | | // 确保算法数据的映射一致 |
| | | // this.algorithms = |
| | | // ai_type?.map(item => ({ |
| | |
| | | this.$message.info('该工单类型暂无关联算法'); |
| | | return; |
| | | } |
| | | // console.log('matchedCategory',matchedCategory); |
| | | |
| | | this.algorithms = matchedCategory.algorithms.map(algo => ({ |
| | | label: algo.dict_value, |
| | |
| | | |
| | | console.log('this.currentDetail', this.currentDetail); |
| | | this.detailVisible = true; |
| | | this.handleTypeChange(this.currentDetail.type) |
| | | this.$nextTick(() => { |
| | | if (this.$refs.MapContainer && this.$refs.MapContainer.initAddEntity) { |
| | | this.$refs.MapContainer.initAddEntity('point', this.currentDetail.location); |
| | |
| | | }, |
| | | hasProcessingBtnPermission() { |
| | | // undefined 或 false 都返回 false,只有 true 返回 true |
| | | // console.log('权限检查:', this.permission.tickets_processing_btn) |
| | | // console.log('权限检查:', this.permission) |
| | | return this.permission && this.permission.tickets_processing_btn === true; |
| | | }, |
| | | hasProcessedAndOverBtnPermission() { |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | |
| | | ::v-deep(.el-tabs) { |
| | | height: 100%; |
| | | display: flex; |
| | |
| | | |
| | | .tableCss { |
| | | width: 100%; |
| | | margin-bottom: 10px; |
| | | margin-bottom: 20px; |
| | | } |
| | | |
| | | .step-timer { |
| | |
| | | } |
| | | |
| | | .dialog-footer { |
| | | display: flex; |
| | | text-align: center; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | padding-top: 16px; |
| | | border-top: 1px solid #ebeef5; |
| | | |
| | |
| | | } |
| | | |
| | | .detail-container { |
| | | padding:0 20px; |
| | | padding: 20px; |
| | | |
| | | .detail-top-title { |
| | | display: flex; |
| | |
| | | } |
| | | |
| | | .media-section { |
| | | // margin-bottom: 20px; |
| | | margin-bottom: 20px; |
| | | |
| | | .el-row { |
| | | display: flex; |
| | |
| | | color: #fff; |
| | | cursor: pointer; |
| | | opacity: 0.8; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .disableds { |
| | |
| | | |
| | | .media-title { |
| | | font-weight: bold; |
| | | margin-bottom: 5px; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | .media-content { |
| | | position: relative; |
| | | height: 250px; |
| | | height: 500px; |
| | | |
| | | :deep(.el-image) { |
| | | width: 100% !important; |
| | |
| | | .el-image__inner { |
| | | width: 100%; |
| | | height: 100%; |
| | | object-fit: cover !important; |
| | | object-fit: contain; |
| | | } |
| | | } |
| | | } |
| | |
| | | background-color: #f5f7fa; |
| | | padding: 12px; |
| | | border-radius: 4px; |
| | | min-height: 30px; |
| | | min-height: 40px; |
| | | color: #606266; |
| | | line-height: 1.5; |
| | | display: block; |
| | | text-align: left; |
| | | margin-bottom: 5px; |
| | | |
| | | &:first-child { |
| | | font-weight: bold; |
| | | margin-bottom: 4px; |
| | |
| | | |
| | | .custom-steps-container { |
| | | width: 100%; |
| | | margin: 10px 0; |
| | | margin: 20px 0; |
| | | } |
| | | |
| | | .steps-titles { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | margin-bottom: 14px; |
| | | margin-bottom: 16px; |
| | | position: relative; |
| | | } |
| | | |
| | | .step-title { |
| | | text-align: center; |
| | | flex: 1; |
| | | font-size: 14px; |
| | | font-size: 16px; |
| | | color: #999; |
| | | position: relative; |
| | | padding-bottom: 5px; |
| | | padding-bottom: 10px; |
| | | } |
| | | |
| | | .step-title.active { |
| | |
| | | text-align: center; |
| | | font-size: 20px; |
| | | font-weight: bold; |
| | | margin-bottom: 5px; |
| | | margin-bottom: 12px; |
| | | color: #333; |
| | | } |
| | | |