+ 只能上传jpg/png文件，且不超过500kb
+
+
-
- 上报日期：{{ form.createdTime }}
-路段名称：{{ form.segmentName }}
- -病害类型：{{ form.defectType }}
-病害长度：{{ form.targetLen }} 米
++ 上报日期：{{ new Date(viewForm.createdTime).toLocaleString() }} +
+路段名称：{{ viewForm.segmentName }}
+ +病害类型：{{ filterDefect(viewForm.defectType) }}
+病害长度：{{ viewForm.targetLen }} 米
-
-
- ![病害图片]()
+
+
+
+ ![病害图片]()
@@ -477,7 +520,13 @@ import {
addDefect,
updateDefect,
getDefectTypes,
+ getSegment,
+ getDefectList,
+ getStatesList,
+ getDefectStatus,
+ changeDefectStatus,
} from "@/api/xj/disease";
+import { getToken } from "@/utils/auth";
import { listMetadata } from "@/api/xj/metadata";
@@ -508,59 +557,55 @@ export default {
dialogVisible: false,
// 查询表单参数
queryParams: {
- pageNum: 1,
- pageSize: 10,
+ page: 1,
+ size: 10,
segmentName: "",
dateTime: [],
- defectType: [],
+ defectType: "",
taskId: "",
- state: [],
- inspectDirection: [],
+ state: "",
+ inspectDirection: "",
stakeStart: "",
stakeEnd: "",
warningFlag: null,
- minLen: null,
- maxLen: null,
- minArea: null,
- maxArea: null,
+ minLen: undefined,
+ maxLen: undefined,
+ minArea: undefined,
+ maxArea: undefined,
minDistance: null,
maxDistance: null,
},
// 新增/编辑表单参数
form: {
id: null,
- segmentid: "",
+ segmentId: "",
defectType: "",
- equipmentType: "",
- createdTime: "",
- updatedTime: "",
+ dataStatus: "",
state: "",
stakeStart: "",
stakeEnd: "",
- geometry: {
- type: "Point",
- coordinates: [],
- },
- targetArea: null,
- targetLen: null,
- snapshotId: "",
- taskId: "",
- segmentId: "",
+ targetLen: undefined,
+ targetArea: undefined,
inspectDirection: "",
- dataFrom: "",
- warningFlag: 0,
- equipmentId: "",
- transformation: 0,
- dataStatus: 0,
- objDistance: null,
- isCalibrated: 0,
- count: 0,
media: [],
},
+ // 上传图片数组
+ fileList: [],
+ // 上传参数设置
+ upload: {
+ // 是否禁用上传
+ isUploading: false,
+ // 设置上传的请求头部
+ headers: { Authorization: "Bearer " + getToken() },
+ // 上传的地址
+ url: process.env.VUE_APP_BASE_API + "/common/upload",
+ // 上传的文件列表
+ fileList: [],
+ },
// 表单校验规则
rules: {
- segmentid: [
- { required: true, message: "请输入道路名称", trigger: "blur" },
+ segmentId: [
+ { required: true, message: "请选择路段", trigger: "change" },
],
defectType: [
{ required: true, message: "请选择病害类型", trigger: "change" },
@@ -568,28 +613,25 @@ export default {
state: [
{ required: true, message: "请选择病害状态", trigger: "change" },
],
- createdTime: [
- {
- required: false,
- message: "请选择采集时间",
- trigger: "change",
- },
+ dataStatus: [
+ { required: true, message: "请选择校验状态", trigger: "change" },
],
stakeStart: [
- { required: false, message: "请输入开始桩号", trigger: "blur" },
+ { required: true, message: "请输入开始桩号", trigger: "blur" },
{
pattern: /^K\d{4}\+\d{3}$/,
message: "请按照K0000+000格式进行填写",
},
],
stakeEnd: [
- { required: false, message: "请输入结束桩号", trigger: "blur" },
+ { required: true, message: "请输入结束桩号", trigger: "blur" },
{
pattern: /^K\d{4}\+\d{3}$/,
message: "请按照K0000+000格式进行填写",
},
],
targetLen: [
+ { required: true, message: "请填写病害长度", trigger: "blur" },
{
type: "number",
min: 0,
@@ -598,6 +640,7 @@ export default {
},
],
targetArea: [
+ { required: true, message: "请填写病害面积", trigger: "blur" },
{
type: "number",
min: 0,
@@ -605,25 +648,36 @@ export default {
trigger: "change",
},
],
+ inspectDirection: [
+ { required: true, message: "请选择上下行", trigger: "change" },
+ ],
},
// 病害类型级联下拉选项
defectTypeOptions: [],
+ // 路段下拉选项
+ segmentList: [],
+ // 列表病害状态数据
+ tableDefect: [],
defectTypes: [],
+ // 校验状态下拉选项
+ states: [],
// 病害状态下拉选项
- states: [
- { label: "未处理", value: "untreated" },
- { label: "处理中", value: "in_process" },
- { label: "已处理", value: "processed" },
- // 添加更多病害状态
- ],
+ defectStatus: [],
// 新增/编辑打点数组
markers: [],
+ // 查看弹窗信息绑定
+ viewForm: {},
+ // 地图中心点
+ centerPoint: [123.30297096718999, 41.87942945541742],
};
},
created() {
this.getList();
- this.getTypeInfo();
this.getdefectTypes();
+ this.getSegmentList();
+ this.getTableDefect();
+ this.getStates();
+ this.getDefectStatusList();
},
methods: {
// 转换为按分类、子分类的label和value格式
@@ -663,6 +717,32 @@ export default {
return result;
},
+ /* 获取路段下拉数据 */
+ getSegmentList() {
+ getSegment().then(({ code, data }) => {
+ if (code === 200) {
+ this.segmentList = data;
+ }
+ });
+ },
+ /* 获取列表病害类型对应数据 */
+ getTableDefect() {
+ getDefectList().then(({ code, data }) => {
+ if (code === 200) {
+ this.tableDefect = data;
+ }
+ });
+ },
+ /* 过滤列表病害类型 */
+ filterDefect(value) {
+ let a = null;
+ [a] = this.tableDefect.filter((item) => {
+ return item.value === value;
+ });
+ if (a) {
+ return a.label;
+ }
+ },
/* 获取病害类型下拉数据 */
getdefectTypes() {
getDefectTypes().then((response) => {
@@ -675,56 +755,29 @@ export default {
});
});
},
- getTypeInfo() {
- listMetadata().then((response) => {
- // console.log(response);
- // console.log(
- // this.transformToDeepCategorizedLabelValue(JSON.parse(response.data))
- // );
+ /* 查询校验状态下拉数据 */
+ getStates() {
+ getStatesList().then(({ code, data }) => {
+ if (code === 200) {
+ this.states = data;
+ }
+ });
+ },
+ /* 查询病害状态下拉数据 */
+ getDefectStatusList() {
+ getDefectStatus().then(({ data, code }) => {
+ if (code === 200) {
+ this.defectStatus = data;
+ }
});
},
/** 查询缺陷列表 */
getList() {
// 处理日期范围
const params = { ...this.queryParams };
- if (params.dateTime && params.dateTime.length === 2) {
- params.startDate = params.dateTime[0];
- params.endDate = params.dateTime[1];
- }
- delete params.dateTime;
- delete params.lengthRange;
- delete params.areaRange;
-
listDefect(params)
.then((response) => {
- // this.defectList = response.rows;
- this.defectList = [
- {
- state: "1",
- media: [],
- segmentId: "7064484787674677248",
- segmentName: "testroad",
- createdTime: "2023-05-17T06:34:12.000Z",
- updatedTime: "2023-05-17T06:34:12.000Z",
- defectType: "0",
- stakeStart: "K000+000",
- stakeEnd: "K000+123",
- targetArea: 1,
- targetLen: 1,
- warningFlag: "0",
- inspectDirection: "0",
- geometry: {
- type: "Point",
- coordinates: [120, 30],
- },
- id: "7064488256724795392",
- snapshotId: "7064488256724795392",
- equipmentId: "123",
- transformation: "0",
- taskid: "123456",
- },
- ];
-
+ this.defectList = response.rows;
this.total = response.total;
this.loading = false;
})
@@ -735,6 +788,9 @@ export default {
/* 新增/编辑弹窗取消按钮 */
cancel() {
this.dialogVisible = false;
+ this.upload.fileList = [];
+ this.markers = [];
+ this.centerPoint = [123.30297096718999, 41.87942945541742];
this.resetFormData();
},
/* 重置表单方法 */
@@ -745,45 +801,43 @@ export default {
resetQuery() {
this.resetForm("queryForm");
this.queryParams = {
- pageNum: 1,
- pageSize: 10,
+ page: 1,
+ size: 10,
segmentName: "",
dateTime: [],
defectType: [],
taskId: "",
- state: [],
- inspectDirection: [],
+ state: "",
+ inspectDirection: "",
stakeStart: "",
stakeEnd: "",
warningFlag: null,
- minLen: null,
- maxLen: null,
- minArea: null,
- maxArea: null,
- minDistance: null,
- maxDistance: null,
+ minLen: undefined,
+ maxLen: undefined,
+ minArea: undefined,
+ maxArea: undefined,
};
this.getList();
},
- /** 搜索按钮操作 */
+ /** 点击搜索按钮操作 */
handleQuery() {
const phonereg = /^K\d{4}\+\d{3}$/;
if (this.queryParams.stakeStart) {
if (phonereg.test(this.queryParams.stakeStart)) {
- this.queryParams.pageNum = 1;
+ this.queryParams.page = 1;
this.getList();
} else {
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
}
} else if (this.queryParams.stakeEnd) {
if (phonereg.test(this.queryParams.stakeEnd)) {
- this.queryParams.pageNum = 1;
+ this.queryParams.page = 1;
this.getList();
} else {
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
}
} else {
- this.queryParams.pageNum = 1;
+ this.queryParams.page = 1;
this.getList();
}
},
@@ -795,7 +849,6 @@ export default {
},
/** 新增按钮操作 */
handleAdd() {
- // this.resetFormData();
this.dialogVisible = true;
this.dialogTitle = "添加缺陷";
this.$nextTick(() => {
@@ -804,29 +857,94 @@ export default {
},
/** 修改按钮操作 */
handleUpdate(row) {
- if (row) {
- this.modifyState([row.id]);
- }
+ this.dialogVisible = true;
+ this.dialogTitle = "修改缺陷";
+ this.centerPoint = [
+ row.geometry.coordinates[0],
+ row.geometry.coordinates[1],
+ ];
+ this.$nextTick(() => {
+ this.initMap("addMap");
+ const e = {
+ lnglat: {
+ lat: row.geometry.coordinates[1],
+ lng: row.geometry.coordinates[0],
+ },
+ };
+ this.onMapClick(e);
+ });
+ this.form = row;
+ this.fileList = row.media;
+ this.upload.fileList = row.media.map((item) => {
+ return {
+ ...item,
+ name: "文件",
+ url: item.img,
+ };
+ });
},
/* 批量确认操作 */
handleUpdateBatch() {
if (this.ids.length > 0) {
- this.modifyState(this.ids);
+ changeDefectStatus(this.ids).then(({ code, data }) => {
+ if (code === 200) {
+ this.$modal.msgSuccess(`修改${data}`);
+ this.$refs.defectTable.clearSelection();
+ this.ids = [];
+ }
+ });
} else {
this.$modal.msgWarning("请选择一条记录进行修改");
}
},
- /* 批量修改病害状态方法 */
- modifyState(item) {},
+ /* 文件提交处理 */
+ submitUpload() {
+ this.$refs.upload.submit();
+ },
+ /* 文件上传中处理 */
+ handleFileUploadProgress(event, file, fileList) {
+ this.upload.isUploading = true;
+ },
+ /* 文件上传成功处理 */
+ handleFileSuccess(response, file, fileList) {
+ this.fileList = fileList.map((item) => {
+ if (item.response) {
+ return { img: item.response.url };
+ }
+ return item;
+ });
+ this.upload.isUploading = false;
+ },
/** 提交按钮 */
submitForm() {
this.$refs["defectForm"].validate((valid) => {
if (valid) {
+ // 验证文件上传列表
+ if (this.fileList.length < 1) {
+ this.$modal.msgWarning("请上传图片");
+ return false;
+ }
+ // 验证点位
+ if (this.markers.length < 1) {
+ this.$modal.msgWarning("请选择病害位置");
+ return false;
+ }
+ const data = {
+ ...this.form,
+ media: this.fileList,
+ geometry: {
+ type: "Point",
+ coordinates: [this.markers[0].lng, this.markers[0].lat],
+ },
+ };
if (this.form.id) {
// 更新缺陷
- updateDefect(this.form)
+ updateDefect(data)
.then(() => {
this.$modal.msgSuccess("修改成功");
+ this.$refs["defectForm"].resetFields();
+ this.upload.fileList = [];
+ this.markers = [];
this.dialogVisible = false;
this.getList();
})
@@ -835,9 +953,12 @@ export default {
});
} else {
// 添加缺陷
- addDefect(this.form)
+ addDefect(data)
.then(() => {
this.$modal.msgSuccess("新增成功");
+ this.$refs["defectForm"].resetFields();
+ this.upload.fileList = [];
+ this.markers = [];
this.dialogVisible = false;
this.getList();
})
@@ -880,62 +1001,37 @@ export default {
resetFormData() {
this.form = {
id: null,
- segmentName: "",
+ segmentId: "",
defectType: "",
- equipmentType: "",
- createdTime: "",
- updatedTime: "",
+ dataStatus: "",
state: "",
stakeStart: "",
stakeEnd: "",
- geometry: {
- type: "Point",
- coordinates: [],
- },
- targetArea: null,
- targetLen: null,
- snapshotId: "",
- taskId: "",
- segmentId: "",
+ targetLen: undefined,
+ targetArea: undefined,
inspectDirection: "",
- dataFrom: "",
- warningFlag: 0,
- equipmentId: "",
- transformation: 0,
- dataStatus: 0,
- objDistance: null,
- isCalibrated: 0,
- count: 0,
media: [],
};
this.resetForm("defectForm");
},
-
- // 点击行列表查看事件
+ /* 点击行列表查看事件 */
viewDefect(defect) {
- this.loadDefect(defect.id);
- this.form = defect;
+ // this.loadDefect(defect.id);
this.openViewDialog = true;
+ this.viewForm = defect;
this.$nextTick(() => {
this.initMap("viewMap");
+ const e = {
+ lnglat: {
+ lat: defect.geometry.coordinates[1],
+ lng: defect.geometry.coordinates[0],
+ },
+ };
+ this.onMapClick(e);
+ // 移除点击事件
+ this.map.removeEventListener("click", this.onMapClick);
});
},
- /** 查看缺陷数据 */
- loadDefect(id) {
- getDefect(id)
- .then((response) => {
- this.form = { ...response.data };
- // 处理日期格式
- if (this.form.createdTime) {
- this.form.createdTime = new Date(this.form.createdTime);
- }
- // this.dialogVisible = true;
- // this.dialogTitle = "修改缺陷";
- })
- .catch(() => {
- this.$modal.msgError("加载缺陷数据失败");
- });
- },
/* 初始化天地图 */
initMap(ele) {
// if (this.map) {
@@ -944,30 +1040,15 @@ export default {
// 初始化天地图
this.map = new T.Map(ele);
- this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12); // 设置中心点和缩放级别
+ this.map.centerAndZoom(
+ new T.LngLat(this.centerPoint[0], this.centerPoint[1]),
+ 9
+ ); // 设置中心点和缩放级别
// 添加单击事件
this.map.on("click", this.onMapClick);
-
- // 设置中心点为病害的坐标
- // const coordinates = this.form.geometry.coordinates;
- // if (coordinates && coordinates.length === 2) {
- // const lon = coordinates[0];
- // const lat = coordinates[1];
-
- // // 设置地图中心点
- // const center = new T.LngLat(lon, lat);
- // this.map.centerAndZoom(center, 15);
-
- // // 添加病害位置标注
- // const marker = new T.Marker(center);
- // this.map.addOverLay(marker);
- // } else {
- // console.error("无效的病害坐标");
- // }
},
/* 新增/编辑地图单击事件 */
onMapClick(e) {
- // 绘制点
const marker = new T.Marker(e.lnglat);
if (this.markers.length > 0) {
this.markers.shift();
@@ -987,7 +1068,7 @@ export default {
};
-
diff --git a/src/views/xj/parameter/index.vue b/src/views/xj/parameter/index.vue
new file mode 100644
index 0000000..58790d3
--- /dev/null
+++ b/src/views/xj/parameter/index.vue
@@ -0,0 +1,319 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/vue.config.js b/vue.config.js
index 7befc0e..6565301 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -35,7 +35,7 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
- // target: `http://192.168.1.188:8080`
+ // target: `http://192.168.1.188:8080`,
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
+
+
+
+
+
+
+
+
+
+ 保存
+
+
+
+
+