476 lines
13 KiB
Vue
476 lines
13 KiB
Vue
|
<!--
|
|||
|
|
* @Author: SunTao 328867980@qq.com
|
|||
|
|
* @Date: 2024-10-11 16:52:24
|
|||
|
|
* @LastEditors: SunTao 328867980@qq.com
|
|||
|
|
* @LastEditTime: 2024-10-12 17:15:38
|
|||
|
|
* @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\components\road-add.vue
|
|||
|
|
* @Description: 交安事件-新增/编辑弹窗
|
|||
|
|
-->
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="add-content">
|
|||
|
|
<el-form
|
|||
|
|
class="addForm"
|
|||
|
|
ref="roadForm"
|
|||
|
|
:model="roadForm"
|
|||
|
|
:rules="rules"
|
|||
|
|
label-width="100px"
|
|||
|
|
>
|
|||
|
|
<el-row :gutter="24">
|
|||
|
|
<el-col :span="dialogItem.title === '添加事件' ? 12 : 24">
|
|||
|
|
<el-form-item label="道路名称" prop="segmentId">
|
|||
|
|
<el-select
|
|||
|
|
v-model="roadForm.segmentId"
|
|||
|
|
placeholder="请选择路段"
|
|||
|
|
clearable
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in segmentList"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12" v-if="dialogItem.title === '添加事件'">
|
|||
|
|
<el-form-item label="事件类型" prop="defectType">
|
|||
|
|
<el-select
|
|||
|
|
v-model="roadForm.defectType"
|
|||
|
|
placeholder="请选择事件类型"
|
|||
|
|
clearable
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in eventType"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="24">
|
|||
|
|
<!-- <el-col :span="12">
|
|||
|
|
<el-form-item label="校验状态" prop="dataStatus">
|
|||
|
|
<el-select
|
|||
|
|
v-model="roadForm.dataStatus"
|
|||
|
|
placeholder="请选择校验状态"
|
|||
|
|
clearable
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in states"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col> -->
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="上下行" prop="inspectDirection">
|
|||
|
|
<el-select
|
|||
|
|
v-model="roadForm.inspectDirection"
|
|||
|
|
placeholder="请选择上下行"
|
|||
|
|
clearable
|
|||
|
|
>
|
|||
|
|
<el-option label="上行" value="0" />
|
|||
|
|
<el-option label="下行" value="1" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="事件状态" prop="state">
|
|||
|
|
<el-select
|
|||
|
|
v-model="roadForm.state"
|
|||
|
|
placeholder="请选择事件状态"
|
|||
|
|
clearable
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in defectStatus"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="24">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="路产类型" prop="equipmentType">
|
|||
|
|
<el-select
|
|||
|
|
v-model="roadForm.equipmentType"
|
|||
|
|
placeholder="请选择路产类型"
|
|||
|
|
clearable
|
|||
|
|
>
|
|||
|
|
<el-option
|
|||
|
|
v-for="item in roadType"
|
|||
|
|
:key="item.value"
|
|||
|
|
:label="item.label"
|
|||
|
|
:value="item.value"
|
|||
|
|
/>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="路产id" prop="equipmentId">
|
|||
|
|
<el-input
|
|||
|
|
v-model="roadForm.equipmentId"
|
|||
|
|
placeholder="请填写路产id"
|
|||
|
|
clearable=""
|
|||
|
|
></el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-row :gutter="24">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="开始桩号" prop="stakeStart">
|
|||
|
|
<el-input
|
|||
|
|
v-model="roadForm.stakeStart"
|
|||
|
|
placeholder="请输入开始桩号"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="结束桩号" prop="stakeEnd">
|
|||
|
|
<el-input
|
|||
|
|
v-model="roadForm.stakeEnd"
|
|||
|
|
placeholder="请输入结束桩号"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
<el-form-item label="病害位置">
|
|||
|
|
<div ref="addMap" id="addMap" class="no-hand-cursor"></div>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="上传病害图片">
|
|||
|
|
<el-upload
|
|||
|
|
ref="upload"
|
|||
|
|
accept=".jpg, .png"
|
|||
|
|
:action="upload.url"
|
|||
|
|
:headers="upload.headers"
|
|||
|
|
:file-list="upload.fileList"
|
|||
|
|
:on-progress="handleFileUploadProgress"
|
|||
|
|
:on-success="handleFileSuccess"
|
|||
|
|
:auto-upload="false"
|
|||
|
|
list-type="picture"
|
|||
|
|
>
|
|||
|
|
<el-button slot="trigger" size="small" type="primary"
|
|||
|
|
>选取文件</el-button
|
|||
|
|
>
|
|||
|
|
<el-button
|
|||
|
|
style="margin-left: 1rem"
|
|||
|
|
size="small"
|
|||
|
|
type="success"
|
|||
|
|
:loading="upload.isUploading"
|
|||
|
|
@click="submitUpload"
|
|||
|
|
>上传到服务器</el-button
|
|||
|
|
>
|
|||
|
|
<div slot="tip" class="el-upload__tip">
|
|||
|
|
只能上传jpg/png文件，且不超过500kb
|
|||
|
|
</div>
|
|||
|
|
</el-upload>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
<div slot="footer" class="dialog-footer">
|
|||
|
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
|||
|
|
<el-button @click="cancel">取 消</el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { addEvent, uploadEvent } from "@/api/xj/traffic";
|
|||
|
|
import { getToken } from "@/utils/auth";
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: "EventAdd",
|
|||
|
|
props: {
|
|||
|
|
dialogItem: {
|
|||
|
|
type: Object,
|
|||
|
|
require: true,
|
|||
|
|
default: () => {},
|
|||
|
|
},
|
|||
|
|
segmentList: {
|
|||
|
|
type: Array,
|
|||
|
|
require: true,
|
|||
|
|
},
|
|||
|
|
defectStatus: {
|
|||
|
|
type: Array,
|
|||
|
|
require: true,
|
|||
|
|
},
|
|||
|
|
eventType: {
|
|||
|
|
type: Array,
|
|||
|
|
require: true,
|
|||
|
|
},
|
|||
|
|
roadType: {
|
|||
|
|
type: Array,
|
|||
|
|
require: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
// 表单绑定
|
|||
|
|
roadForm: {
|
|||
|
|
segmentId: "",
|
|||
|
|
defectType: "",
|
|||
|
|
inspectDirection: "",
|
|||
|
|
state: "",
|
|||
|
|
equipmentType: "",
|
|||
|
|
stakeStart: "",
|
|||
|
|
stakeEnd: "",
|
|||
|
|
equipmentId:""
|
|||
|
|
},
|
|||
|
|
// 校验状态下拉数据
|
|||
|
|
states: [
|
|||
|
|
{
|
|||
|
|
label: "未校验",
|
|||
|
|
value: "1",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: "已校验",
|
|||
|
|
value: "2",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
// 表单校验规则
|
|||
|
|
rules: {
|
|||
|
|
segmentId: [
|
|||
|
|
{ required: true, message: "请选择路段", trigger: "change" },
|
|||
|
|
],
|
|||
|
|
defectType: [
|
|||
|
|
{ required: true, message: "请选择事件类型", trigger: "change" },
|
|||
|
|
],
|
|||
|
|
state: [
|
|||
|
|
{ required: true, message: "请选择事件状态", trigger: "change" },
|
|||
|
|
],
|
|||
|
|
dataStatus: [
|
|||
|
|
{ required: true, message: "请选择校验状态", trigger: "change" },
|
|||
|
|
],
|
|||
|
|
equipmentType: [
|
|||
|
|
{ required: true, message: "请选择路产类型", trigger: "change" },
|
|||
|
|
],
|
|||
|
|
equipmentId: [
|
|||
|
|
{ required: false, message: "请填写路产id", trigger: "blur" },
|
|||
|
|
],
|
|||
|
|
stakeStart: [
|
|||
|
|
{ required: true, message: "请输入开始桩号", trigger: "blur" },
|
|||
|
|
{
|
|||
|
|
pattern: /^K\d{4}\+\d{3}$/,
|
|||
|
|
message: "请按照K0000+000格式进行填写",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
stakeEnd: [
|
|||
|
|
{ required: true, message: "请输入结束桩号", trigger: "blur" },
|
|||
|
|
{
|
|||
|
|
pattern: /^K\d{4}\+\d{3}$/,
|
|||
|
|
message: "请按照K0000+000格式进行填写",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
targetLen: [
|
|||
|
|
{ required: true, message: "请填写病害长度", trigger: "blur" },
|
|||
|
|
{
|
|||
|
|
type: "number",
|
|||
|
|
min: 0,
|
|||
|
|
message: "病害长度必须为正数",
|
|||
|
|
trigger: "change",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
targetArea: [
|
|||
|
|
{ required: true, message: "请填写病害面积", trigger: "blur" },
|
|||
|
|
{
|
|||
|
|
type: "number",
|
|||
|
|
min: 0,
|
|||
|
|
message: "病害面积必须为正数",
|
|||
|
|
trigger: "change",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
inspectDirection: [
|
|||
|
|
{ required: true, message: "请选择上下行", trigger: "change" },
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
// 上传参数设置
|
|||
|
|
upload: {
|
|||
|
|
// 是否禁用上传
|
|||
|
|
isUploading: false,
|
|||
|
|
// 设置上传的请求头部
|
|||
|
|
headers: { Authorization: "Bearer " + getToken() },
|
|||
|
|
// 上传的地址
|
|||
|
|
url: process.env.VUE_APP_BASE_API + "/common/upload",
|
|||
|
|
// 上传的文件列表
|
|||
|
|
fileList: [],
|
|||
|
|
},
|
|||
|
|
// 地图中心点
|
|||
|
|
centerPoint: [123.30297096718999, 41.87942945541742],
|
|||
|
|
// 点击坐标
|
|||
|
|
markers: [],
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
/* 监听传过来的弹窗数据 */
|
|||
|
|
watch: {
|
|||
|
|
dialogItem: {
|
|||
|
|
handler(val) {
|
|||
|
|
if (val.title === "修改事件") {
|
|||
|
|
this.roadForm = JSON.parse(JSON.stringify(val));
|
|||
|
|
this.upload.fileList = val.media.map((item) => {
|
|||
|
|
return {
|
|||
|
|
...item,
|
|||
|
|
url: item.img,
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
const e = {
|
|||
|
|
lnglat: {
|
|||
|
|
lat: val.geometry.coordinates[1],
|
|||
|
|
lng: val.geometry.coordinates[0],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
this.onMapClick(e);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
immediate: true,
|
|||
|
|
deep: true,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
/* 生命周期函数-mouted */
|
|||
|
|
mounted() {
|
|||
|
|
this.initMap();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
/* 文件提交处理 */
|
|||
|
|
submitUpload() {
|
|||
|
|
this.$refs.upload.submit();
|
|||
|
|
},
|
|||
|
|
/* 文件上传中处理 */
|
|||
|
|
handleFileUploadProgress(event, file, fileList) {
|
|||
|
|
this.upload.isUploading = true;
|
|||
|
|
},
|
|||
|
|
/* 文件上传成功处理 */
|
|||
|
|
handleFileSuccess(response, file, fileList) {
|
|||
|
|
this.upload.fileList = fileList.map((item) => {
|
|||
|
|
if (item.response) {
|
|||
|
|
return { ...item, img: item.response.url };
|
|||
|
|
}
|
|||
|
|
return item;
|
|||
|
|
});
|
|||
|
|
this.upload.isUploading = false;
|
|||
|
|
},
|
|||
|
|
/* 点击确定事件 */
|
|||
|
|
submitForm() {
|
|||
|
|
this.$refs["roadForm"].validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
// 验证点位
|
|||
|
|
if (this.markers.length < 1) {
|
|||
|
|
this.$modal.msgWarning("请选择病害位置");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
// 验证文件上传列表
|
|||
|
|
if (this.upload.fileList.length < 1) {
|
|||
|
|
this.$modal.msgWarning("请上传图片");
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
const dataItem = {
|
|||
|
|
...this.roadForm,
|
|||
|
|
media: this.upload.fileList.map((item) => {
|
|||
|
|
return { ...item, img: item.img };
|
|||
|
|
}),
|
|||
|
|
geometry: {
|
|||
|
|
type: "Point",
|
|||
|
|
coordinates: [this.markers[0].lng, this.markers[0].lat],
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
if (this.roadForm.id) {
|
|||
|
|
// 更新缺陷
|
|||
|
|
uploadEvent(dataItem)
|
|||
|
|
.then(({ code, data }) => {
|
|||
|
|
if (code === 200) {
|
|||
|
|
this.$modal.msgSuccess("修改成功");
|
|||
|
|
this.$refs["roadForm"].resetFields();
|
|||
|
|
this.upload.fileList = [];
|
|||
|
|
this.markers = [];
|
|||
|
|
this.cancel();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
this.$modal.msgError("修改失败");
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 添加缺陷
|
|||
|
|
addEvent(dataItem)
|
|||
|
|
.then(({ code, data }) => {
|
|||
|
|
if (code === 200) {
|
|||
|
|
this.$modal.msgSuccess("新增成功");
|
|||
|
|
this.$refs["roadForm"].resetFields();
|
|||
|
|
this.upload.fileList = [];
|
|||
|
|
this.markers = [];
|
|||
|
|
this.cancel();
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
this.$modal.msgError("新增失败");
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/* 点击取消事件 */
|
|||
|
|
cancel() {
|
|||
|
|
this.$emit("cancel");
|
|||
|
|
},
|
|||
|
|
/* 初始化天地图 */
|
|||
|
|
initMap() {
|
|||
|
|
// 初始化天地图
|
|||
|
|
this.map = new T.Map("addMap");
|
|||
|
|
this.map.centerAndZoom(
|
|||
|
|
new T.LngLat(this.centerPoint[0], this.centerPoint[1]),
|
|||
|
|
9
|
|||
|
|
);
|
|||
|
|
// 添加单击事件
|
|||
|
|
this.map.on("click", this.onMapClick);
|
|||
|
|
},
|
|||
|
|
/* 新增/编辑地图单击事件 */
|
|||
|
|
onMapClick(e) {
|
|||
|
|
const marker = new T.Marker(e.lnglat);
|
|||
|
|
if (this.markers.length > 0) {
|
|||
|
|
this.markers.shift();
|
|||
|
|
this.map.clearOverLays();
|
|||
|
|
this.map.addOverLay(marker);
|
|||
|
|
this.markers.push(e.lnglat);
|
|||
|
|
} else {
|
|||
|
|
this.map.addOverLay(marker);
|
|||
|
|
this.markers.push(e.lnglat);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
/* 新增弹窗/编辑弹窗 */
|
|||
|
|
.addForm {
|
|||
|
|
.el-select,
|
|||
|
|
.el-cascader {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
/* 地图框样式 */
|
|||
|
|
.no-hand-cursor {
|
|||
|
|
cursor: default !important;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 20rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 上传文件列表样式 */
|
|||
|
|
::v-deep .el-upload-list {
|
|||
|
|
img {
|
|||
|
|
width: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 页脚 */
|
|||
|
|
.dialog-footer {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
</style>
|