From e52521dc7a3e52cf53e2ab2b4e1c71cfe0b4a10d Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Fri, 15 Aug 2025 16:48:28 +0800
Subject: [PATCH] feat:更换接口
---
src/views/tickets/ticket.vue | 330 +++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 235 insertions(+), 95 deletions(-)
diff --git a/src/views/tickets/ticket.vue b/src/views/tickets/ticket.vue
index c88e6e7..72afd5c 100644
--- a/src/views/tickets/ticket.vue
+++ b/src/views/tickets/ticket.vue
@@ -18,7 +18,7 @@
@clear="handleKeyWords"
@keyup.enter="handleSearch"
/>
- <el-select
+ <!-- <el-select
v-model="filters.department"
placeholder="请选择所属单位"
class="filter-item"
@@ -30,12 +30,13 @@
:label="item.label"
:value="item.value"
/>
- </el-select>
+ </el-select> -->
<el-select
v-model="filters.type"
placeholder="请选择工单类型"
class="filter-item"
clearable
+ @change="handleSearch"
>
<el-option
v-for="item in types"
@@ -59,6 +60,7 @@
placeholder="请选择状态"
class="filter-item"
clearable
+ @change="handleSearch"
>
<el-option
v-for="item in statuses"
@@ -72,6 +74,7 @@
placeholder="请选择关联算法"
class="filter-item"
clearable
+ @change="handleSearch"
>
<el-option
v-for="item in algorithms"
@@ -85,6 +88,7 @@
placeholder="请选择复核状态"
class="filter-item"
clearable
+ @change="handleSearch"
>
<el-option
v-for="item in reviewStatuses"
@@ -208,7 +212,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"
@@ -265,6 +270,7 @@
multiple
placeholder="请选择关联算法"
class="full-width"
+ :disabled="!form.type"
>
<el-option
v-for="item in algorithms"
@@ -359,17 +365,20 @@
</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="detail-top-title">
<div class="event-title-center event-orderNumber">
@@ -412,13 +421,14 @@
</el-steps>
</div>
- <!-- 基本信息表格 -->
+ <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 }}
@@ -441,16 +451,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 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"
>
@@ -462,28 +493,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()
@@ -566,16 +579,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">
@@ -603,7 +608,7 @@
</div>
</div>
</el-col>
- <el-col :span="11">
+ <el-col :span="12">
<div class="media-box">
<!-- 根据状态显示不同的标题和内容 -->
@@ -633,28 +638,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()"
@@ -706,6 +730,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>
@@ -720,6 +752,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"
@@ -734,6 +767,7 @@
</el-form-item>
<el-form-item label="选择处理人" prop="handler">
<el-select
+ filterable
v-model="dispatchForm.handler"
placeholder="请选择处理人"
:disabled="!dispatchForm.department"
@@ -870,13 +904,16 @@
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 },
+ components: { elTooltipCopy,CreateQRcode },
name: 'TicketPage',
data() {
return {
@@ -911,6 +948,7 @@
},
departments: [],
types: [],
+ allAlgorithms: [],
handlers: [
{ label: '处理人A', value: 'handlerA' },
{ label: '处理人B', value: 'handlerB' },
@@ -951,9 +989,9 @@
// { label: "序号", prop: "id", width: 70 },
{ label: '工单编号', prop: 'orderNumber', width: 170 },
{ label: '工单名称', prop: 'orderName', width: 150, overHidden: true, tooltip: true },
- { label: '所属单位', prop: 'department',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',
@@ -974,7 +1012,7 @@
{ label: '处理人', prop: 'handler', width: 70 },
{
slot: true,
- hide: false,
+ hide: envName === 'jiangwu'? true : false,
label: '复核状态',
prop: 'isReview',
width: 90,
@@ -1084,6 +1122,7 @@
},
mounted() {
+
const href = this.$route.href;
if (this.$route?.query?.status !== undefined && this.$route?.query?.status !== null) {
this.filters.status = this.$route?.query?.status + '';
@@ -1127,12 +1166,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 = {})
});
- console.log('orderNumber', orderNumber);
}
}
@@ -1254,7 +1293,13 @@
{ 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 },
+ { 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 },
@@ -1272,7 +1317,9 @@
value2: filteredFields[i + 1]?.value || (filteredFields[i + 1]?.label ? '暂无数据' : ''),
});
}
+
return formattedFields;
+
},
dynamicFixedStatuses() {
// 直接使用接口返回的 stepInfos
@@ -1380,6 +1427,7 @@
this.currentDetail.processingDetail = this.currentDetail.content;
this.handleViewDetail(this.currentDetail);
+
// 如果使用地图组件，需要更新地图标记
this.$nextTick(() => {
if (this.$refs.MapContainer && this.currentDetail.location) {
@@ -1387,13 +1435,16 @@
}
});
},
+ 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;
@@ -1479,7 +1530,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,
@@ -1498,16 +1550,19 @@
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 => ({
- dict_key: item.dict_key,
- dict_value: item.dict_value,
- // 同时添加 label 和 value 以兼容两处使用
- label: item.dict_value,
- value: item.dict_key,
- })) || [];
+ // this.algorithms =
+ // ai_type?.map(item => ({
+ // dict_key: item.dict_key,
+ // dict_value: item.dict_value,
+ // // 同时添加 label 和 value 以兼容两处使用
+ // label: item.dict_value,
+ // value: item.dict_key,
+ // })) || [];
// 构建用户ID和名称的映射关系
this.userNameToIdMap = {};
@@ -1519,6 +1574,34 @@
} catch (error) {
this.$message.error('加载下拉框数据失败');
}
+ },
+ // 工单类型变化时触发
+ handleTypeChange(typeValue) {
+ if (!typeValue) {
+ // 未选择类型时清空算法列表
+ this.algorithms = [];
+ return;
+ }
+
+ const matchedCategory = this.allAlgorithms.find(
+ category => category.dict_key === typeValue
+ );
+
+ if (!matchedCategory || !matchedCategory.algorithms || matchedCategory.algorithms.length === 0) {
+ // 无匹配的算法时清空
+ this.algorithms = [];
+ this.$message.info('该工单类型暂无关联算法');
+ return;
+ }
+// console.log('matchedCategory',matchedCategory);
+
+ this.algorithms = matchedCategory.algorithms.map(algo => ({
+ label: algo.dict_value,
+ value: algo.dict_key,
+ dict_key: algo.dict_key,
+ dict_value: algo.dict_value
+ }));
+
},
async fetchTableData() {
@@ -1773,7 +1856,10 @@
this.draftLoading = false;
}
},
-
+ handleCancel (){
+ this.resetForm();
+ this.dialogVisible = false;
+},
handleLocationChange(val) {
let locationValue = val.value;
if (locationValue && locationValue.length >= 2) {
@@ -1874,8 +1960,6 @@
this.page.currentPage = 1;
this.$router.replace({}); //清除url参数
this.fetchTableData();
- console.log('handleSearch', this.$router);
-
},
handleKeyWords(){
this.$router.replace({}); //清除url参数
@@ -1994,11 +2078,15 @@
this.currentDetail = {
...detailData,
// address: null,
+ showQR: false,
latAndLon: _.round(detailData.location[0], 6) + ',' + _.round(detailData.location[1], 6),
};
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);
@@ -2290,8 +2378,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()) {
@@ -2301,10 +2389,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() {
@@ -2340,6 +2431,8 @@
return;
}
this.dispatchLoading = true;
+ console.log('派发成功',this.currentDetail);
+
this.$refs.dispatchForm.validate(async valid => {
if (valid) {
try {
@@ -2353,7 +2446,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
@@ -2434,8 +2529,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;
@@ -2893,11 +2987,18 @@
},
activated() {
this.handleReset();
- }
+ },
+
};
</script>
-
+<style lang="scss">
+.custom-dialog { max-height: 96vh; }
+.custom-qrcode-popover {
+min-width: 120px !important;
+}
+</style>
<style lang="scss" scoped>
+
::v-deep(.el-tabs) {
height: 100%;
display: flex;
@@ -2952,7 +3053,7 @@
.tableCss {
width: 100%;
- margin-bottom: 20px;
+ margin-bottom: 10px;
}
.step-timer {
@@ -3118,7 +3219,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;
@@ -3193,7 +3320,7 @@
}
.detail-container {
- padding: 20px;
+ padding:0 20px;
.detail-top-title {
display: flex;
@@ -3271,7 +3398,7 @@
}
.media-section {
- margin-bottom: 20px;
+ // margin-bottom: 20px;
.el-row {
display: flex;
@@ -3280,15 +3407,16 @@
}
.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 {
@@ -3297,7 +3425,11 @@
pointer-events: none;
opacity: 0.3 !important;
}
-
+.PopUpTableScrolls{
+height: 600px;
+overflow-y: scroll;
+overflow-x: hidden;
+}
.media-box {
width: 100%;
border: 1px solid #dcdfe6;
@@ -3308,7 +3440,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 {
@@ -3323,7 +3463,7 @@
.el-image__inner {
width: 100%;
height: 100%;
- object-fit: contain;
+ object-fit: cover !important;
}
}
}
@@ -3376,12 +3516,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;
@@ -3399,23 +3539,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 {
@@ -3427,7 +3567,7 @@
text-align: center;
font-size: 20px;
font-weight: bold;
- margin-bottom: 12px;
+ margin-bottom: 5px;
color: #333;
}
--
Gitblit v1.9.3