| | |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="车牌号" prop="vehicleNo"> |
| | | <el-input |
| | | v-model="queryParams.vehicleNo" |
| | | placeholder="请输入车牌号" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="计划开始时间"> |
| | | <el-date-picker |
| | | v-model="dateRange" |
| | |
| | | |
| | | <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" align="center" /> |
| | | <el-table-column label="任务编号" align="center" prop="taskCode" /> |
| | | <el-table-column label="任务类型" align="center" prop="taskType"> |
| | | <el-table-column label="任务编号" align="center" prop="showTaskCode" min-width="120"> |
| | | <template slot-scope="scope"> |
| | | <dict-tag :options="dict.type.sys_task_type" :value="scope.row.taskType"/> |
| | | <el-button |
| | | type="text" |
| | | @click="handleView(scope.row)" |
| | | v-hasPermi="['task:general:query']" |
| | | style="font-family: 'Courier New', monospace; font-size: 13px;" |
| | | >{{ scope.row.showTaskCode }}</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="任务类型" align="center" prop="taskType" width="120"> |
| | | <template slot-scope="scope"> |
| | | <dict-tag :options="dict.type.sys_task_type" :value="scope.row.taskType"/> |
| | | |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="任务状态" align="center" prop="taskStatus"> |
| | | <template slot-scope="scope"> |
| | | <dict-tag :options="dict.type.sys_task_status" :value="scope.row.taskStatus"/> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="任务描述" align="center" prop="taskDescription" show-overflow-tooltip /> |
| | | <el-table-column label="出发地址" align="center" prop="departureAddress" show-overflow-tooltip /> |
| | | <el-table-column label="目的地址" align="center" prop="destinationAddress" show-overflow-tooltip /> |
| | | <el-table-column label="计划开始时间" align="center" prop="plannedStartTime" width="180"> |
| | | <el-table-column label="车牌号" align="center" prop="vehicleNo" width="120"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.plannedStartTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> |
| | | <span v-if="scope.row.vehicleNo">{{ scope.row.vehicleNo }}</span> |
| | | <span v-else style="color: #C0C4CC;">--</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="计划结束时间" align="center" prop="plannedEndTime" width="180"> |
| | | |
| | | <!-- <el-table-column label="目的地址" align="center" prop="destinationAddress" show-overflow-tooltip /> --> |
| | | <el-table-column label="预计公里数" align="center" prop="estimatedDistance" width="120"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.plannedEndTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> |
| | | <span v-if="scope.row.estimatedDistance">{{ scope.row.estimatedDistance }} km</span> |
| | | <span v-else style="color: #C0C4CC;">--</span> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | |
| | | <el-table-column label="创建人" align="center" prop="creatorName" /> |
| | | <el-table-column label="执行人" align="center" prop="assigneeName" /> |
| | | |
| | | <el-table-column label="创建时间" align="center" prop="createTime" width="180"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> |
| | |
| | | @click="handleView(scope.row)" |
| | | v-hasPermi="['task:general:query']" |
| | | >查看</el-button> |
| | | <el-button |
| | | <!-- <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-edit" |
| | | @click="handleUpdate(scope.row)" |
| | | v-hasPermi="['task:general:edit']" |
| | | >修改</el-button> |
| | | <el-button |
| | | >修改</el-button> --> |
| | | <!-- <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-user" |
| | | @click="handleAssign(scope.row)" |
| | | v-hasPermi="['task:general:assign']" |
| | | >分配</el-button> |
| | | <el-button |
| | | >分配</el-button> --> |
| | | <!-- <el-button |
| | | size="mini" |
| | | type="text" |
| | | icon="el-icon-refresh" |
| | | @click="handleStatusChange(scope.row)" |
| | | v-hasPermi="['task:general:status']" |
| | | >状态</el-button> |
| | | >状态</el-button> --> |
| | | <el-button |
| | | size="mini" |
| | | type="text" |
| | |
| | | /> |
| | | |
| | | <!-- 添加或修改任务管理对话框 --> |
| | | <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body> |
| | | <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body> |
| | | <el-form ref="form" :model="form" :rules="rules" label-width="80px"> |
| | | <el-form-item label="任务类型" prop="taskType"> |
| | | <el-select v-model="form.taskType" placeholder="请选择任务类型"> |
| | |
| | | </el-form-item> |
| | | <el-form-item label="目的地址" prop="destinationAddress"> |
| | | <el-input v-model="form.destinationAddress" placeholder="请输入目的地址" /> |
| | | </el-form-item> |
| | | |
| | | <!-- GPS坐标信息 --> |
| | | <el-divider content-position="left">GPS坐标信息</el-divider> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="出发地经度" prop="departureLongitude"> |
| | | <el-input-number |
| | | v-model="form.departureLongitude" |
| | | :precision="7" |
| | | :step="0.0000001" |
| | | :min="-180" |
| | | :max="180" |
| | | placeholder="请输入经度" |
| | | style="width: 100%" |
| | | @change="calculateDistance" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="出发地纬度" prop="departureLatitude"> |
| | | <el-input-number |
| | | v-model="form.departureLatitude" |
| | | :precision="7" |
| | | :step="0.0000001" |
| | | :min="-90" |
| | | :max="90" |
| | | placeholder="请输入纬度" |
| | | style="width: 100%" |
| | | @change="calculateDistance" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="目的地经度" prop="destinationLongitude"> |
| | | <el-input-number |
| | | v-model="form.destinationLongitude" |
| | | :precision="7" |
| | | :step="0.0000001" |
| | | :min="-180" |
| | | :max="180" |
| | | placeholder="请输入经度" |
| | | style="width: 100%" |
| | | @change="calculateDistance" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="目的地纬度" prop="destinationLatitude"> |
| | | <el-input-number |
| | | v-model="form.destinationLatitude" |
| | | :precision="7" |
| | | :step="0.0000001" |
| | | :min="-90" |
| | | :max="90" |
| | | placeholder="请输入纬度" |
| | | style="width: 100%" |
| | | @change="calculateDistance" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <el-form-item label="预计公里数" prop="estimatedDistance"> |
| | | <el-input-number |
| | | v-model="form.estimatedDistance" |
| | | :precision="2" |
| | | :step="0.01" |
| | | :min="0" |
| | | placeholder="自动计算" |
| | | style="width: 200px" |
| | | :disabled="true" |
| | | /> |
| | | <span style="margin-left: 10px; color: #909399; font-size: 12px;"> |
| | | <i class="el-icon-info"></i> 根据GPS坐标自动计算 |
| | | </span> |
| | | </el-form-item> |
| | | <el-form-item label="计划开始时间" prop="plannedStartTime"> |
| | | <el-date-picker clearable |
| | |
| | | total: 0, |
| | | // 任务管理表格数据 |
| | | taskList: [], |
| | | // 是否有急救转运任务(用于控制同步状态列显示) |
| | | hasEmergencyTask: false, |
| | | // 弹出层标题 |
| | | title: "", |
| | | // 是否显示弹出层 |
| | |
| | | taskCode: null, |
| | | taskType: null, |
| | | taskStatus: null, |
| | | vehicleNo: null, |
| | | plannedStartTimeBegin: null, |
| | | plannedStartTimeEnd: null, |
| | | }, |
| | |
| | | listTask(this.queryParams).then(response => { |
| | | this.taskList = response.rows; |
| | | this.total = response.total; |
| | | // 检查是否有急救转运任务,用于控制同步状态相关列的显示 |
| | | this.hasEmergencyTask = this.taskList.some(task => task.taskType === 'EMERGENCY_TRANSFER'); |
| | | this.loading = false; |
| | | }); |
| | | }, |
| | |
| | | taskDescription: null, |
| | | departureAddress: null, |
| | | destinationAddress: null, |
| | | departureLongitude: null, |
| | | departureLatitude: null, |
| | | destinationLongitude: null, |
| | | destinationLatitude: null, |
| | | estimatedDistance: null, |
| | | plannedStartTime: null, |
| | | plannedEndTime: null, |
| | | assigneeId: null, |
| | |
| | | cancelStatusChange() { |
| | | this.statusOpen = false; |
| | | this.statusForm = {}; |
| | | }, |
| | | |
| | | /** 计算GPS坐标距离 */ |
| | | calculateDistance() { |
| | | if (this.form.departureLongitude && this.form.departureLatitude && |
| | | this.form.destinationLongitude && this.form.destinationLatitude) { |
| | | |
| | | // 验证坐标有效性 |
| | | if (this.isValidCoordinate(this.form.departureLatitude, this.form.departureLongitude) && |
| | | this.isValidCoordinate(this.form.destinationLatitude, this.form.destinationLongitude)) { |
| | | |
| | | // 使用Haversine公式计算距离 |
| | | const distance = this.calculateHaversineDistance( |
| | | this.form.departureLatitude, this.form.departureLongitude, |
| | | this.form.destinationLatitude, this.form.destinationLongitude |
| | | ); |
| | | |
| | | this.form.estimatedDistance = Math.round(distance * 100) / 100; // 保留2位小数 |
| | | } else { |
| | | this.form.estimatedDistance = 0; |
| | | } |
| | | } else { |
| | | this.form.estimatedDistance = 0; |
| | | } |
| | | }, |
| | | |
| | | /** 验证GPS坐标是否有效 */ |
| | | isValidCoordinate(latitude, longitude) { |
| | | return latitude >= -90 && latitude <= 90 && longitude >= -180 && longitude <= 180; |
| | | }, |
| | | |
| | | /** 使用Haversine公式计算两点间距离 */ |
| | | calculateHaversineDistance(lat1, lon1, lat2, lon2) { |
| | | const R = 6371; // 地球半径(公里) |
| | | const dLat = this.toRadians(lat2 - lat1); |
| | | const dLon = this.toRadians(lon2 - lon1); |
| | | const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + |
| | | Math.cos(this.toRadians(lat1)) * Math.cos(this.toRadians(lat2)) * |
| | | Math.sin(dLon / 2) * Math.sin(dLon / 2); |
| | | const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); |
| | | return R * c; |
| | | }, |
| | | |
| | | /** 角度转弧度 */ |
| | | toRadians(degrees) { |
| | | return degrees * (Math.PI / 180); |
| | | } |
| | | } |
| | | }; |