|
|
|
@ -7,7 +7,7 @@ |
|
|
|
:closable="true" |
|
|
|
:open="visible" |
|
|
|
@close="onClose" |
|
|
|
width="600px" |
|
|
|
width="800px" |
|
|
|
> |
|
|
|
<a-tabs v-model:activeKey="activeKey"> |
|
|
|
<a-tab-pane key="1" tab="详细信息"> |
|
|
|
@ -31,7 +31,7 @@ |
|
|
|
</a-row> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="12"> |
|
|
|
<div><span class="titleLabel">状态：</span>{{statusText(detail.status) }}</div> |
|
|
|
<div><span class="titleLabel">状态：</span>{{ statusText(detail.status) }}</div> |
|
|
|
</a-col> |
|
|
|
<a-col :span="12"> |
|
|
|
<div><span class="titleLabel">待处理人：</span>{{ detail.handler }}</div> |
|
|
|
@ -78,85 +78,75 @@ |
|
|
|
</a-row> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="24"> |
|
|
|
<div><span class="titleLabel">故障图片：</span> |
|
|
|
<div v-for="(item,index) in detail.attachments" :key="index"> |
|
|
|
<img alt="" :src="item.url" /> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
><span class="titleLabel">故障图片：</span> |
|
|
|
<div v-for="(item, index) in detail.attachments" :key="index"> |
|
|
|
<img alt="" :src="item.url" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<a-row :gutter="[16, 16]"> |
|
|
|
<a-col :span="24"> |
|
|
|
<div><span class="titleLabel">地图信息：</span> |
|
|
|
<div id="orderAuditDetailMap" style="width: 100%; height: 500px"></div> |
|
|
|
</div> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
<a-col :span="24"> |
|
|
|
<div |
|
|
|
><span class="titleLabel">地图信息：</span> |
|
|
|
<div id="orderAuditDetailMap" 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>{{ detail.fixPeople }}</div> |
|
|
|
<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>{{ detail.fixTime }}</div> |
|
|
|
<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>{{ detail.fixResult }}</div> |
|
|
|
<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>{{ detail.cost }}</div> |
|
|
|
<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>{{ detail.handleImg }}</div> |
|
|
|
<div |
|
|
|
><span class="titleLabel">处理图片：</span> |
|
|
|
<div v-for="(item, index) in dealDetail.attachments" :key="index"> |
|
|
|
<img alt="" :src="item.url" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</a-tab-pane> |
|
|
|
<a-tab-pane key="3" tab="流程信息"> |
|
|
|
<div style="margin-left: 20px"> |
|
|
|
<a-timeline> |
|
|
|
<a-timeline-item> |
|
|
|
<template #dot>故障上报</template> |
|
|
|
<div class="timeText">Create a services site 2015-09-01</div> |
|
|
|
</a-timeline-item> |
|
|
|
<a-timeline-item> |
|
|
|
<template #dot>故障派遣</template> |
|
|
|
<div class="timeText">Create a services site 2015-09-01</div> |
|
|
|
</a-timeline-item> |
|
|
|
<a-timeline-item> |
|
|
|
<template #dot>故障接单</template> |
|
|
|
<div class="timeText">Create a services site 2015-09-01</div> |
|
|
|
</a-timeline-item> |
|
|
|
<a-timeline-item> |
|
|
|
<template #dot>故障处理</template> |
|
|
|
<div class="timeText">Create a services site 2015-09-01</div> |
|
|
|
</a-timeline-item> |
|
|
|
<a-timeline-item> |
|
|
|
<template #dot>预审</template> |
|
|
|
<div class="timeText">Create a services site 2015-09-01</div> |
|
|
|
</a-timeline-item> |
|
|
|
<a-timeline-item> |
|
|
|
<template #dot>初审</template> |
|
|
|
<div class="timeText">Create a services site 2015-09-01</div> |
|
|
|
<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="historyInfo" :columns="historyColumns" bordered> |
|
|
|
<template #bodyCell="{ column }"> |
|
|
|
<template v-if="column.key === 'action'"> |
|
|
|
<a-button type="link">查看</a-button> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<a-table :dataSource="progress" :columns="historyColumns" bordered> |
|
|
|
</a-table> |
|
|
|
</a-tab-pane> |
|
|
|
<a-tab-pane key="5" tab="延期信息"> |
|
|
|
@ -174,10 +164,12 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { reactive, ref } from 'vue'; |
|
|
|
import { getInfo } from './api'; |
|
|
|
import { reactive, ref,defineComponent } from 'vue'; |
|
|
|
import { getInfo,dealInfo, queryProcess } from './api'; |
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
|
|
|
export default { |
|
|
|
import Icon from '@/components/Icon/Icon.vue'; |
|
|
|
export default defineComponent({ |
|
|
|
components:{Icon}, |
|
|
|
setup(props, { emit }) { |
|
|
|
//抽屉详情 |
|
|
|
let detail = reactive({ |
|
|
|
@ -197,14 +189,17 @@ |
|
|
|
faultLocation: '', |
|
|
|
faultDescription: '', |
|
|
|
attachments: '', |
|
|
|
longitude: '', |
|
|
|
latitude: '', |
|
|
|
}); |
|
|
|
const dealDetail = reactive({ |
|
|
|
fixPeople: '', |
|
|
|
fixTime: '', |
|
|
|
fixResult: '', |
|
|
|
cost: '', |
|
|
|
handleImg: '', |
|
|
|
longitude:'', |
|
|
|
latitude:'' |
|
|
|
attachments: '', |
|
|
|
}); |
|
|
|
const progress = ref([]); |
|
|
|
const statusOptions = [ |
|
|
|
{ |
|
|
|
label: '待派遣', |
|
|
|
@ -240,17 +235,16 @@ |
|
|
|
return i.value == val; |
|
|
|
})?.label; |
|
|
|
}; |
|
|
|
const historyInfo = ref([]); |
|
|
|
const historyColumns = [ |
|
|
|
{ |
|
|
|
{ |
|
|
|
title: '环节', |
|
|
|
dataIndex: 'stage', |
|
|
|
key: 'stage', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作', |
|
|
|
dataIndex: 'operation', |
|
|
|
key: 'operation', |
|
|
|
dataIndex: 'operationName', |
|
|
|
key: 'operationName', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作人', |
|
|
|
@ -258,9 +252,9 @@ |
|
|
|
key: 'operator', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '详细信息', |
|
|
|
dataIndex: 'action', |
|
|
|
key: 'action ', |
|
|
|
title: '操作时间', |
|
|
|
dataIndex: 'operationTime', |
|
|
|
key: 'operationTime ', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const delayInfo = ref([]); |
|
|
|
@ -295,13 +289,20 @@ |
|
|
|
for (let i in detail) { |
|
|
|
detail[i] = data[i]; |
|
|
|
} |
|
|
|
initMap(detail.longitude,detail.latitude,detail.faultLocation) |
|
|
|
const data1 = await dealInfo(id); |
|
|
|
for (let i in dealDetail) { |
|
|
|
dealDetail[i] = data1[i]; |
|
|
|
} |
|
|
|
const progressLine = await queryProcess(id); |
|
|
|
progress.value = progressLine; |
|
|
|
console.log(progress.value); |
|
|
|
initMap(detail.longitude, detail.latitude, detail.faultLocation); |
|
|
|
}; |
|
|
|
|
|
|
|
// 关闭抽屉的方法 |
|
|
|
const onClose = () => { |
|
|
|
visible.value = false; |
|
|
|
map.value?.destroy() |
|
|
|
map.value?.destroy(); |
|
|
|
}; |
|
|
|
const activeKey = ref('1'); |
|
|
|
|
|
|
|
@ -338,15 +339,16 @@ |
|
|
|
showDrawer, |
|
|
|
onClose, |
|
|
|
activeKey, |
|
|
|
historyInfo, |
|
|
|
historyColumns, |
|
|
|
delayInfo, |
|
|
|
delayColumns, |
|
|
|
detail, |
|
|
|
statusText |
|
|
|
dealDetail, |
|
|
|
statusText, |
|
|
|
progress, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}; |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
@ -359,14 +361,30 @@ |
|
|
|
margin-bottom: 10px; |
|
|
|
} */ |
|
|
|
div { |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-bottom: 1%; |
|
|
|
} |
|
|
|
.stage{ |
|
|
|
font-weight: 600; |
|
|
|
} |
|
|
|
|
|
|
|
.timeText { |
|
|
|
margin: 0 0 40px 20px; |
|
|
|
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; |
|
|
|
} |
|
|
|
|
wbc
1 week ago