wbc
2 months ago
25 changed files with 1078 additions and 570 deletions
@ -1,2 +1,2 @@ |
|||||
# spa-title |
# spa-title |
||||
VITE_GLOB_APP_TITLE = Plus Admin |
VITE_GLOB_APP_TITLE = '国研数字化运维管理平台' |
||||
|
|||||
@ -1,58 +1,40 @@ |
|||||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|
||||
import { defHttp } from '@/utils/http/axios'; |
import { defHttp } from '@/utils/http/axios'; |
||||
import { Dayjs } from 'dayjs'; |
|
||||
|
|
||||
enum Api { |
enum Api { |
||||
root = '/workflow/leave', |
root = '/platform/routineInspectionInfo', |
||||
list = '/workflow/leave/list', |
list = '/platform/routineInspectionInfo/specialList', |
||||
export = '/workflow/leave/export', |
getSubcategoryType = '/platform/subcategoryType/list', |
||||
|
workOrderAdd = '/platform/workOrder/add', |
||||
|
getProjectInfo = '/platform/projectInfo/getNames', |
||||
} |
} |
||||
|
|
||||
export interface Leave { |
export function list(params:any) { |
||||
id: string; |
return defHttp.get({ url: Api.list, params }); |
||||
leaveType: string; |
|
||||
startDate: string; |
|
||||
endDate: string; |
|
||||
leaveDays: number; |
|
||||
remark: string; |
|
||||
processInstanceVo?: any; |
|
||||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|
||||
} |
} |
||||
|
|
||||
export interface Resp { |
|
||||
createDept: number; |
|
||||
createBy: number; |
|
||||
createTime: string; |
|
||||
updateBy: number; |
|
||||
updateTime: string; |
|
||||
id: string; |
|
||||
leaveType: string; |
|
||||
startDate: string; |
|
||||
endDate: string; |
|
||||
leaveDays: number; |
|
||||
remark?: any; |
|
||||
} |
|
||||
|
|
||||
export function list(params?: PageQuery) { |
export function getInfo(id: any) { |
||||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
return defHttp.get({ url: `${Api.root}/${id}` }); |
||||
} |
} |
||||
|
|
||||
export function exportExcel(data: any) { |
export function add(data: any) { |
||||
return commonExport(Api.export, data); |
return defHttp.post({ url: Api.root, data }); |
||||
} |
} |
||||
|
|
||||
export function getInfo(id: ID) { |
export function update(data: any) { |
||||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
return defHttp.put({ url: Api.root, data }); |
||||
} |
} |
||||
|
|
||||
export function add(data: any) { |
export function removeByIds(ids: any) { |
||||
return defHttp.post<Resp>({ url: Api.root, data }); |
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
||||
} |
} |
||||
|
|
||||
export function update(data: any) { |
export function getSubcategoryType() { |
||||
return defHttp.put<Resp>({ url: Api.root, data }); |
return defHttp.get({ url: Api.getSubcategoryType }); |
||||
} |
} |
||||
|
export function workOrderAdd(data: any) { |
||||
export function removeByIds(ids: IDS) { |
return defHttp.post({ url: Api.workOrderAdd, data }); |
||||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
} |
||||
|
export function getProjectInfo() { |
||||
|
return defHttp.get({ url: Api.getProjectInfo }); |
||||
} |
} |
||||
@ -0,0 +1,291 @@ |
|||||
|
<template> |
||||
|
<a-modal v-model:open="visible" title="工单上报" @ok="handleOk" width="70%"> |
||||
|
<a-form :model="form" layout="vertical"> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="所属项目" name="projectName"> |
||||
|
<a-select |
||||
|
v-model:value="form.projectName" |
||||
|
:options="projectNameOptions" |
||||
|
placeholder="请选择" |
||||
|
:fieldNames="{ |
||||
|
label: 'projectName', |
||||
|
value: 'projectName', |
||||
|
options: 'options', |
||||
|
}" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="是否事故" name="isAccident"> |
||||
|
<a-radio-group v-model:value="form.isAccident"> |
||||
|
<a-radio :value="1">是</a-radio> |
||||
|
<a-radio :value="0">否</a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="报修人员" name="repairer"> |
||||
|
<a-input v-model:value="form.repairer" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="响应级别"> |
||||
|
<a-select v-model:value="form.responseLevel" :options="responseLevelOptions" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="响应时限"> |
||||
|
<a-input v-model:value="form.responseTime" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="故障大类" name="faultCategory"> |
||||
|
<a-select |
||||
|
v-model:value="form.faultCategory" |
||||
|
:options="[{ value: '前端' }, { value: '后端' }]" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="故障小类" name="faultSubcategory"> |
||||
|
<a-select |
||||
|
v-model:value="form.faultSubcategory" |
||||
|
:options="faultSubcategoryOptions" |
||||
|
:fieldNames="{ |
||||
|
label: 'typeName', |
||||
|
value: 'id', |
||||
|
options: 'options', |
||||
|
}" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="所属机构" name="organizationName"> |
||||
|
<a-input v-model:value="form.organizationName" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="故障地点" name="faultLocation"> |
||||
|
<a-select |
||||
|
v-model:value="form.faultLocation" |
||||
|
:options="faultLocationOptions" |
||||
|
@change="faultLocationChange" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<div id="amapContainer" style="width: 100%; height: 500px"></div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="故障描述" name="faultDescription"> |
||||
|
<a-textarea v-model:value="form.faultDescription" :rows="4" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="故障图片" name="faultImg"> |
||||
|
<a-upload |
||||
|
v-model:file-list="form.faultImg" |
||||
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
||||
|
> |
||||
|
<a-button type="primary"> 上传 </a-button> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="是否派遣" name="isDispatched"> |
||||
|
<a-radio-group v-model:value="form.isDispatched"> |
||||
|
<a-radio :value="1">是</a-radio> |
||||
|
<a-radio :value="0">否</a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12" v-if="form.isDispatched == 1"> |
||||
|
<a-form-item label="维护要求" name="maintenanceRequirement"> |
||||
|
<a-select |
||||
|
v-model:value="form.maintenanceRequirement" |
||||
|
:options="maintenanceRequirementOptions" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]" v-if="form.isDispatched == 1"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="派遣意见" name="dispatchOpinion"> |
||||
|
<a-textarea v-model:value="form.dispatchOpinion" :rows="4" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import { getInfo, getSubcategoryType, workOrderAdd,getProjectInfo } from './api'; |
||||
|
import { message } from 'ant-design-vue'; |
||||
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
||||
|
export default { |
||||
|
setup() { |
||||
|
const visible = ref(false); |
||||
|
const form = reactive({ |
||||
|
projectName: '', |
||||
|
isAccident: null, |
||||
|
repairer: '', |
||||
|
responseTime: '', |
||||
|
responseLevel: '', |
||||
|
faultCategory: null, |
||||
|
faultSubcategory: null, |
||||
|
organizationName: '', |
||||
|
faultLocation: '', |
||||
|
faultDescription: '', |
||||
|
faultImg: null, |
||||
|
isDispatched: null, |
||||
|
maintenanceRequirement: null, |
||||
|
dispatchOpinion: '', |
||||
|
longitude: '', |
||||
|
latitude: '', |
||||
|
}); |
||||
|
//下拉框 |
||||
|
const projectNameOptions = ref([]) |
||||
|
const getProjectNameOptions= async () =>{ |
||||
|
const res = await getProjectInfo(); |
||||
|
projectNameOptions.value = res |
||||
|
} |
||||
|
|
||||
|
const responseLevelOptions = [ |
||||
|
{ |
||||
|
value: 0, |
||||
|
label: '常规', |
||||
|
}, |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '紧急', |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '特级', |
||||
|
}, |
||||
|
]; |
||||
|
const maintenanceRequirementOptions = [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '新增', |
||||
|
}, |
||||
|
]; |
||||
|
const faultLocationOptions = [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: 'a', |
||||
|
latitude: '29.8537459', |
||||
|
longitude: '121.5591519', |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: 'b', |
||||
|
latitude: '29.8572957 ', |
||||
|
longitude: '121.5611743', |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: 'c', |
||||
|
latitude: '29.8537459', |
||||
|
longitude: '121.5591519', |
||||
|
}, |
||||
|
]; |
||||
|
const faultLocationChange = (val) => { |
||||
|
const obj = faultLocationOptions.find((i) => { |
||||
|
return (i.value = val); |
||||
|
}); |
||||
|
form.longitude = obj.longitude |
||||
|
form.latitude = obj.latitude |
||||
|
initMap(obj.longitude, obj.latitude, obj.organizationName); |
||||
|
}; |
||||
|
const faultSubcategoryOptions = ref([]); |
||||
|
const getFaultSubcategoryOptions = async () => { |
||||
|
const res = await getSubcategoryType(); |
||||
|
faultSubcategoryOptions.value = res.rows; |
||||
|
}; |
||||
|
const showModal = () => { |
||||
|
visible.value = true; |
||||
|
getFaultSubcategoryOptions() |
||||
|
getProjectNameOptions() |
||||
|
}; |
||||
|
|
||||
|
const handleOk = () => { |
||||
|
let params = {}; |
||||
|
for (let i in form) { |
||||
|
params[i] = form[i]; |
||||
|
} |
||||
|
workOrderAdd(params).then((_) => { |
||||
|
message.success('操作成功'); |
||||
|
visible.value = false; |
||||
|
}); |
||||
|
}; |
||||
|
//地图 |
||||
|
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('amapContainer', { |
||||
|
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, |
||||
|
form, |
||||
|
showModal, |
||||
|
handleOk, |
||||
|
responseLevelOptions, |
||||
|
maintenanceRequirementOptions, |
||||
|
faultSubcategoryOptions, |
||||
|
faultLocationOptions, |
||||
|
projectNameOptions, |
||||
|
faultLocationChange |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 可选样式调整 */ |
||||
|
.ant-modal-body { |
||||
|
max-width: 600px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
</style> |
||||
@ -1,58 +1,39 @@ |
|||||
import { ID, IDS, PageQuery, commonExport } from '@/api/base'; |
|
||||
import { defHttp } from '@/utils/http/axios'; |
import { defHttp } from '@/utils/http/axios'; |
||||
import { Dayjs } from 'dayjs'; |
|
||||
|
|
||||
enum Api { |
enum Api { |
||||
root = '/workflow/leave', |
root = '/platform/routineInspectionInfo', |
||||
list = '/workflow/leave/list', |
list = '/platform/routineInspectionInfo/list', |
||||
export = '/workflow/leave/export', |
getSubcategoryType = '/platform/subcategoryType/list', |
||||
|
workOrderAdd = '/platform/workOrder/add', |
||||
|
getProjectInfo = '/platform/projectInfo/getNames', |
||||
} |
} |
||||
|
|
||||
export interface Leave { |
export function list(params:any) { |
||||
id: string; |
return defHttp.get({ url: Api.list, params }); |
||||
leaveType: string; |
|
||||
startDate: string; |
|
||||
endDate: string; |
|
||||
leaveDays: number; |
|
||||
remark: string; |
|
||||
processInstanceVo?: any; |
|
||||
dateTime?: [string, string] | [Dayjs, Dayjs]; |
|
||||
} |
} |
||||
|
|
||||
export interface Resp { |
|
||||
createDept: number; |
|
||||
createBy: number; |
|
||||
createTime: string; |
|
||||
updateBy: number; |
|
||||
updateTime: string; |
|
||||
id: string; |
|
||||
leaveType: string; |
|
||||
startDate: string; |
|
||||
endDate: string; |
|
||||
leaveDays: number; |
|
||||
remark?: any; |
|
||||
} |
|
||||
|
|
||||
export function list(params?: PageQuery) { |
|
||||
return defHttp.get<Leave[]>({ url: Api.list, params }); |
|
||||
} |
|
||||
|
|
||||
export function exportExcel(data: any) { |
|
||||
return commonExport(Api.export, data); |
|
||||
} |
|
||||
|
|
||||
export function getInfo(id: ID) { |
export function getInfo(id: any) { |
||||
return defHttp.get<Leave>({ url: `${Api.root}/${id}` }); |
return defHttp.get({ url: `${Api.root}/${id}` }); |
||||
} |
} |
||||
|
|
||||
export function add(data: any) { |
export function add(data: any) { |
||||
return defHttp.post<Resp>({ url: Api.root, data }); |
return defHttp.post({ url: Api.root, data }); |
||||
} |
} |
||||
|
|
||||
export function update(data: any) { |
export function update(data: any) { |
||||
return defHttp.put<Resp>({ url: Api.root, data }); |
return defHttp.put({ url: Api.root, data }); |
||||
} |
} |
||||
|
|
||||
export function removeByIds(ids: IDS) { |
export function removeByIds(ids: any) { |
||||
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` }); |
return defHttp.deleteWithMsg({ url: `${Api.root}/${ids.join(',')}` }); |
||||
|
} |
||||
|
export function getSubcategoryType() { |
||||
|
return defHttp.get({ url: Api.getSubcategoryType }); |
||||
|
} |
||||
|
export function workOrderAdd(data: any) { |
||||
|
return defHttp.post({ url: Api.workOrderAdd, data }); |
||||
|
} |
||||
|
export function getProjectInfo() { |
||||
|
return defHttp.get({ url: Api.getProjectInfo }); |
||||
} |
} |
||||
@ -0,0 +1,291 @@ |
|||||
|
<template> |
||||
|
<a-modal v-model:open="visible" title="工单上报" @ok="handleOk" width="70%"> |
||||
|
<a-form :model="form" layout="vertical"> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="所属项目" name="projectName"> |
||||
|
<a-select |
||||
|
v-model:value="form.projectName" |
||||
|
:options="projectNameOptions" |
||||
|
placeholder="请选择" |
||||
|
:fieldNames="{ |
||||
|
label: 'projectName', |
||||
|
value: 'projectName', |
||||
|
options: 'options', |
||||
|
}" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="是否事故" name="isAccident"> |
||||
|
<a-radio-group v-model:value="form.isAccident"> |
||||
|
<a-radio :value="1">是</a-radio> |
||||
|
<a-radio :value="0">否</a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="报修人员" name="repairer"> |
||||
|
<a-input v-model:value="form.repairer" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="响应级别"> |
||||
|
<a-select v-model:value="form.responseLevel" :options="responseLevelOptions" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="响应时限"> |
||||
|
<a-input v-model:value="form.responseTime" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="故障大类" name="faultCategory"> |
||||
|
<a-select |
||||
|
v-model:value="form.faultCategory" |
||||
|
:options="[{ value: '前端' }, { value: '后端' }]" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="故障小类" name="faultSubcategory"> |
||||
|
<a-select |
||||
|
v-model:value="form.faultSubcategory" |
||||
|
:options="faultSubcategoryOptions" |
||||
|
:fieldNames="{ |
||||
|
label: 'typeName', |
||||
|
value: 'id', |
||||
|
options: 'options', |
||||
|
}" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="所属机构" name="organizationName"> |
||||
|
<a-input v-model:value="form.organizationName" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="故障地点" name="faultLocation"> |
||||
|
<a-select |
||||
|
v-model:value="form.faultLocation" |
||||
|
:options="faultLocationOptions" |
||||
|
@change="faultLocationChange" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<div id="amapContainer" style="width: 100%; height: 500px"></div> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="故障描述" name="faultDescription"> |
||||
|
<a-textarea v-model:value="form.faultDescription" :rows="4" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="故障图片" name="faultImg"> |
||||
|
<a-upload |
||||
|
v-model:file-list="form.faultImg" |
||||
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76" |
||||
|
> |
||||
|
<a-button type="primary"> 上传 </a-button> |
||||
|
</a-upload> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]"> |
||||
|
<a-col :span="12"> |
||||
|
<a-form-item label="是否派遣" name="isDispatched"> |
||||
|
<a-radio-group v-model:value="form.isDispatched"> |
||||
|
<a-radio :value="1">是</a-radio> |
||||
|
<a-radio :value="0">否</a-radio> |
||||
|
</a-radio-group> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
<a-col :span="12" v-if="form.isDispatched == 1"> |
||||
|
<a-form-item label="维护要求" name="maintenanceRequirement"> |
||||
|
<a-select |
||||
|
v-model:value="form.maintenanceRequirement" |
||||
|
:options="maintenanceRequirementOptions" |
||||
|
/> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
<a-row :gutter="[16, 16]" v-if="form.isDispatched == 1"> |
||||
|
<a-col :span="24"> |
||||
|
<a-form-item label="派遣意见" name="dispatchOpinion"> |
||||
|
<a-textarea v-model:value="form.dispatchOpinion" :rows="4" /> |
||||
|
</a-form-item> |
||||
|
</a-col> |
||||
|
</a-row> |
||||
|
</a-form> |
||||
|
</a-modal> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import { getInfo, getSubcategoryType, workOrderAdd,getProjectInfo } from './api'; |
||||
|
import { message } from 'ant-design-vue'; |
||||
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
||||
|
export default { |
||||
|
setup() { |
||||
|
const visible = ref(false); |
||||
|
const form = reactive({ |
||||
|
projectName: '', |
||||
|
isAccident: null, |
||||
|
repairer: '', |
||||
|
responseTime: '', |
||||
|
responseLevel: '', |
||||
|
faultCategory: null, |
||||
|
faultSubcategory: null, |
||||
|
organizationName: '', |
||||
|
faultLocation: '', |
||||
|
faultDescription: '', |
||||
|
faultImg: null, |
||||
|
isDispatched: null, |
||||
|
maintenanceRequirement: null, |
||||
|
dispatchOpinion: '', |
||||
|
longitude: '', |
||||
|
latitude: '', |
||||
|
}); |
||||
|
//下拉框 |
||||
|
const projectNameOptions = ref([]) |
||||
|
const getProjectNameOptions= async () =>{ |
||||
|
const res = await getProjectInfo(); |
||||
|
projectNameOptions.value = res |
||||
|
} |
||||
|
|
||||
|
const responseLevelOptions = [ |
||||
|
{ |
||||
|
value: 0, |
||||
|
label: '常规', |
||||
|
}, |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '紧急', |
||||
|
}, |
||||
|
{ |
||||
|
value: 2, |
||||
|
label: '特级', |
||||
|
}, |
||||
|
]; |
||||
|
const maintenanceRequirementOptions = [ |
||||
|
{ |
||||
|
value: 1, |
||||
|
label: '新增', |
||||
|
}, |
||||
|
]; |
||||
|
const faultLocationOptions = [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: 'a', |
||||
|
latitude: '29.8537459', |
||||
|
longitude: '121.5591519', |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: 'b', |
||||
|
latitude: '29.8572957 ', |
||||
|
longitude: '121.5611743', |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: 'c', |
||||
|
latitude: '29.8537459', |
||||
|
longitude: '121.5591519', |
||||
|
}, |
||||
|
]; |
||||
|
const faultLocationChange = (val) => { |
||||
|
const obj = faultLocationOptions.find((i) => { |
||||
|
return (i.value = val); |
||||
|
}); |
||||
|
form.longitude = obj.longitude |
||||
|
form.latitude = obj.latitude |
||||
|
initMap(obj.longitude, obj.latitude, obj.organizationName); |
||||
|
}; |
||||
|
const faultSubcategoryOptions = ref([]); |
||||
|
const getFaultSubcategoryOptions = async () => { |
||||
|
const res = await getSubcategoryType(); |
||||
|
faultSubcategoryOptions.value = res.rows; |
||||
|
}; |
||||
|
const showModal = () => { |
||||
|
visible.value = true; |
||||
|
getFaultSubcategoryOptions() |
||||
|
getProjectNameOptions() |
||||
|
}; |
||||
|
|
||||
|
const handleOk = () => { |
||||
|
let params = {}; |
||||
|
for (let i in form) { |
||||
|
params[i] = form[i]; |
||||
|
} |
||||
|
workOrderAdd(params).then((_) => { |
||||
|
message.success('操作成功'); |
||||
|
visible.value = false; |
||||
|
}); |
||||
|
}; |
||||
|
//地图 |
||||
|
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('amapContainer', { |
||||
|
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, |
||||
|
form, |
||||
|
showModal, |
||||
|
handleOk, |
||||
|
responseLevelOptions, |
||||
|
maintenanceRequirementOptions, |
||||
|
faultSubcategoryOptions, |
||||
|
faultLocationOptions, |
||||
|
projectNameOptions, |
||||
|
faultLocationChange |
||||
|
}; |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* 可选样式调整 */ |
||||
|
.ant-modal-body { |
||||
|
max-width: 600px; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue