| | |
| | | |
| | | <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="taskCode"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | type="text" |
| | | @click="handleView(scope.row)" |
| | | v-hasPermi="['task:general:query']" |
| | | >{{ scope.row.taskCode }}</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="任务类型" align="center" prop="taskType"> |
| | | <template slot-scope="scope"> |
| | | <dict-tag :options="dict.type.sys_task_type" :value="scope.row.taskType"/> |
| | |
| | | <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="estimatedDistance" width="120"> |
| | | <template slot-scope="scope"> |
| | | <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="plannedStartTime" width="180"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ parseTime(scope.row.plannedStartTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span> |
| | |
| | | /> |
| | | |
| | | <!-- 添加或修改任务管理对话框 --> |
| | | <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 |
| | |
| | | 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); |
| | | } |
| | | } |
| | | }; |