You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
440 lines
13 KiB
440 lines
13 KiB
<template>
|
|
<div>
|
|
<!-- 抽屉组件 -->
|
|
<a-drawer
|
|
title="工单详情"
|
|
placement="right"
|
|
:closable="true"
|
|
:open="visible"
|
|
@close="onClose"
|
|
width="800px"
|
|
>
|
|
<a-tabs v-model:activeKey="activeKey">
|
|
<a-tab-pane key="1" tab="详细信息">
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div><span class="titleLabel">所属项目：</span>{{ detail.projectName }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div><span class="titleLabel">所属合同：</span>{{ detail.contractName }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<div><span class="titleLabel">编号：</span>{{ detail.id }}</div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div><span class="titleLabel">报修人员：</span>{{ detail.repairer }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<div><span class="titleLabel">状态：</span>{{ statusText(detail.status) }}</div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div><span class="titleLabel">待处理人：</span>{{ detail.handler }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<div><span class="titleLabel">报修时间：</span>{{ detail.repairTime }}</div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div><span class="titleLabel">是否事故：</span>{{ detail.isAccident }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<div><span class="titleLabel">故障大类：</span>{{ detail.faultCategory }}</div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div><span class="titleLabel">故障小类：</span>{{ detail.faultSubcategory }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="12">
|
|
<div><span class="titleLabel">所属机构：</span>{{ detail.organizationName }}</div>
|
|
</a-col>
|
|
<a-col :span="12">
|
|
<div><span class="titleLabel">响应级别：</span>{{ detail.responseLevel }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div><span class="titleLabel">响应时限(小时)：</span>{{ detail.responseTime }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div><span class="titleLabel">故障地址：</span>{{ detail.faultLocation }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div><span class="titleLabel">故障描述：</span>{{ detail.faultDescription }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div
|
|
><span class="titleLabel">故障图片：</span>
|
|
<a-upload
|
|
v-model:file-list="fileLists"
|
|
list-type="picture"
|
|
disabled
|
|
>
|
|
</a-upload>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div
|
|
><span class="titleLabel">地图信息：</span>
|
|
<div id="orderSearchDetailMap" style="width: 100%; height: 500px"></div>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="2" tab="处理信息" force-render>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div><span class="titleLabel">维修人员：</span>{{ dealDetail.fixPeople }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div><span class="titleLabel">修复时间：</span>{{ dealDetail.fixTime }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div><span class="titleLabel">修复结果：</span>{{ dealDetail.fixResult }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div><span class="titleLabel">费用情况：</span>{{ dealDetail.cost }}</div>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row :gutter="[16, 16]">
|
|
<a-col :span="24">
|
|
<div
|
|
><span class="titleLabel">处理图片：</span>
|
|
<a-upload
|
|
v-model:file-list="fileLists1"
|
|
list-type="picture"
|
|
disabled
|
|
>
|
|
</a-upload>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="3" tab="流程信息">
|
|
<div style="margin-left: 20px">
|
|
<a-timeline>
|
|
<a-timeline-item v-for="(item, index) in progress" :key="index">
|
|
<template #dot
|
|
><span class="stage">{{ item.stage }}</span></template
|
|
>
|
|
<div class="timeText"
|
|
><span class="person">{{ item.operator }}</span
|
|
>{{ item.description }}</div
|
|
>
|
|
<div class="timeText">{{ item.feedback }}</div>
|
|
<div class="operationTime">{{ item.operationTime }}</div>
|
|
<div class="duration" v-if="item.duration">
|
|
<Icon icon="ant-design:dashboard-outlined" />用时{{ item.duration }}</div
|
|
>
|
|
<a-divider></a-divider>
|
|
</a-timeline-item>
|
|
</a-timeline>
|
|
</div>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="4" tab="历史信息">
|
|
<a-table :dataSource="progress" :columns="historyColumns" bordered> </a-table>
|
|
</a-tab-pane>
|
|
<a-tab-pane key="5" tab="延期信息">
|
|
<a-table :dataSource="delayInfo" :columns="delayColumns" bordered>
|
|
<!-- <template #bodyCell="{ column }">
|
|
<template v-if="column.key === 'action'">
|
|
<a-button type="link">查看</a-button>
|
|
</template>
|
|
</template> -->
|
|
</a-table>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive, ref, defineComponent } from 'vue';
|
|
import { getInfo, dealInfo, queryProcess, getOrderDelayHistory } from './api';
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
import Icon from '@/components/Icon/Icon.vue';
|
|
export default defineComponent({
|
|
components: { Icon },
|
|
setup(props, { emit }) {
|
|
//抽屉详情
|
|
let detail = reactive({
|
|
projectName: '',
|
|
contractName: '',
|
|
id: '',
|
|
status: null,
|
|
repairer: '',
|
|
handler: '',
|
|
repairTime: '',
|
|
organizationName: '',
|
|
isAccident: null,
|
|
faultCategory: '',
|
|
faultSubcategory: '',
|
|
responseLevel: null,
|
|
responseTime: '',
|
|
faultLocation: '',
|
|
faultDescription: '',
|
|
attachments: '',
|
|
longitude: '',
|
|
latitude: '',
|
|
});
|
|
const dealDetail = reactive({
|
|
fixPeople: '',
|
|
fixTime: '',
|
|
fixResult: '',
|
|
cost: '',
|
|
attachments: '',
|
|
});
|
|
const fileLists = ref([])
|
|
const fileLists1 = ref([])
|
|
const progress = ref([]);
|
|
const statusOptions = [
|
|
{
|
|
label: '待派遣',
|
|
value: 0,
|
|
},
|
|
{
|
|
label: '待接单',
|
|
value: 1,
|
|
},
|
|
{
|
|
label: '处理中',
|
|
value: 2,
|
|
},
|
|
{
|
|
label: '处理中(已延期)',
|
|
value: 7,
|
|
},
|
|
{
|
|
label: '作废',
|
|
value: 8,
|
|
},
|
|
{
|
|
label: '运维单位处理时回退至派遣',
|
|
value: 3,
|
|
},
|
|
{
|
|
label: '初审',
|
|
value: 4,
|
|
},
|
|
{
|
|
label: '终审',
|
|
value: 5,
|
|
},
|
|
{
|
|
label: '结案',
|
|
value: 6,
|
|
},
|
|
];
|
|
const statusText = (val) => {
|
|
return statusOptions.find((i) => {
|
|
return i.value == val;
|
|
})?.label;
|
|
};
|
|
const historyColumns = [
|
|
{
|
|
title: '环节',
|
|
dataIndex: 'stage',
|
|
key: 'stage',
|
|
},
|
|
{
|
|
title: '操作',
|
|
dataIndex: 'operationName',
|
|
key: 'operationName',
|
|
},
|
|
{
|
|
title: '操作人',
|
|
dataIndex: 'operator',
|
|
key: 'operator',
|
|
},
|
|
{
|
|
title: '操作时间',
|
|
dataIndex: 'operationTime',
|
|
key: 'operationTime ',
|
|
},
|
|
];
|
|
const delayInfo = ref([]);
|
|
const delayColumns = [
|
|
{
|
|
title: '申请时间',
|
|
dataIndex: 'createTime',
|
|
key: 'createTime',
|
|
},
|
|
{
|
|
title: '申请原因',
|
|
dataIndex: 'delayReason',
|
|
key: 'delayReason',
|
|
},
|
|
{
|
|
title: '延期时间',
|
|
dataIndex: 'afterDelayTime',
|
|
key: 'afterDelayTime',
|
|
},
|
|
{
|
|
title: '详细信息',
|
|
dataIndex: 'handleResult',
|
|
key: 'handleResult ',
|
|
},
|
|
];
|
|
|
|
// 打开抽屉的方法
|
|
const visible = ref(false);
|
|
const showDrawer = async (id) => {
|
|
visible.value = true;
|
|
fileLists.value= []
|
|
fileLists1.value= []
|
|
const data = await getInfo(id);
|
|
for (let i in detail) {
|
|
detail[i] = data[i];
|
|
}
|
|
if (detail.attachments && detail.attachments.length > 0) {
|
|
detail.attachments.forEach((i) => {
|
|
fileLists.value.push({
|
|
url: i.url,
|
|
name: i.name,
|
|
status: 'done',
|
|
});
|
|
});
|
|
}
|
|
const progressLine = await queryProcess(id);
|
|
progress.value = progressLine;
|
|
console.log(progress.value);
|
|
const data1 = await dealInfo(id);
|
|
if (data1) {
|
|
for (let i in dealDetail) {
|
|
dealDetail[i] = data1[i];
|
|
}
|
|
}
|
|
if (dealDetail.attachments && dealDetail.attachments.length > 0) {
|
|
dealDetail.attachments.forEach((i) => {
|
|
fileLists1.value.push({
|
|
url: i.url,
|
|
name: i.name,
|
|
status: 'done',
|
|
});
|
|
});
|
|
}
|
|
const data2 = await getOrderDelayHistory(id);
|
|
if (data2) {
|
|
delayInfo.value = data2;
|
|
}
|
|
initMap(detail.longitude, detail.latitude, detail.faultLocation);
|
|
};
|
|
|
|
// 关闭抽屉的方法
|
|
const onClose = () => {
|
|
visible.value = false;
|
|
for (let i in dealDetail) {
|
|
dealDetail[i] = '';
|
|
}
|
|
map.value?.destroy();
|
|
};
|
|
const activeKey = ref('1');
|
|
|
|
//地图
|
|
const map = ref(null);
|
|
const initMap = async (longitude, latitude, organizationName) => {
|
|
try {
|
|
// 加载高德地图 JavaScript API
|
|
await AMapLoader.load({
|
|
key: '786a2e7cc6d4be5ba1d6174a0aa10f2b',
|
|
version: '2.0',
|
|
plugins: [],
|
|
});
|
|
|
|
// 初始化地图
|
|
map.value = new AMap.Map('orderSearchDetailMap', {
|
|
zoom: 17,
|
|
center: [longitude, latitude],
|
|
});
|
|
|
|
// 添加标记（可选）
|
|
const marker = new AMap.Marker({
|
|
position: new AMap.LngLat(longitude, latitude),
|
|
title: organizationName,
|
|
});
|
|
const markerList = [marker];
|
|
map.value.add(markerList);
|
|
} catch (error) {
|
|
console.error('加载高德地图失败:', error);
|
|
}
|
|
};
|
|
return {
|
|
visible,
|
|
showDrawer,
|
|
onClose,
|
|
activeKey,
|
|
historyColumns,
|
|
delayInfo,
|
|
delayColumns,
|
|
detail,
|
|
dealDetail,
|
|
statusText,
|
|
progress,
|
|
fileLists,
|
|
fileLists1
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 可选样式调整 */
|
|
.ant-btn {
|
|
margin: 20px;
|
|
}
|
|
|
|
/* .singerDetail{
|
|
margin-bottom: 10px;
|
|
} */
|
|
div {
|
|
margin-bottom: 1%;
|
|
}
|
|
.stage {
|
|
font-weight: 600;
|
|
}
|
|
.timeText {
|
|
margin: 0 20% 3% 3%;
|
|
}
|
|
.person {
|
|
color: red;
|
|
font-weight: 550;
|
|
}
|
|
.operationTime {
|
|
color: gray;
|
|
font-weight: 550;
|
|
margin-left: 80%;
|
|
}
|
|
.duration {
|
|
color: #00bbff;
|
|
position: absolute;
|
|
font-weight: 550;
|
|
margin-left: 80%;
|
|
top: 0.1%;
|
|
}
|
|
.titleLabel {
|
|
color: gray;
|
|
}
|
|
</style>
|
|
|