|
|
|
@ -1,6 +1,8 @@ |
|
|
|
<template> |
|
|
|
<div class="app-container"> |
|
|
|
<div class="map">地图</div> |
|
|
|
<div class="map"> |
|
|
|
<img style="width: 100%" src="@/assets/image/map.jpg" alt="" /> |
|
|
|
</div> |
|
|
|
<div class="list"> |
|
|
|
<el-form |
|
|
|
:model="queryParams" |
|
|
|
@ -26,12 +28,13 @@ |
|
|
|
></el-button> |
|
|
|
</el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="标牌类型" prop="type"> |
|
|
|
<!-- <el-form-item label="标牌类型" prop="type"> |
|
|
|
<el-select |
|
|
|
v-model="queryParams.data.type" |
|
|
|
placeholder="请选择标牌类型" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
@change="handleQuery" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="dict in typeOptions" |
|
|
|
@ -40,6 +43,18 @@ |
|
|
|
:value="dict.dictValue" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
</el-form-item> --> |
|
|
|
<el-form-item label="行政区划" prop="adcd"> |
|
|
|
<el-cascader |
|
|
|
:options="areasOptions" |
|
|
|
v-model="queryParams.data.adcd" |
|
|
|
:props="areasOptionProps" |
|
|
|
placeholder="请选择行政区划" |
|
|
|
clearable |
|
|
|
size="small" |
|
|
|
@change="handleQuery" |
|
|
|
> |
|
|
|
</el-cascader> |
|
|
|
</el-form-item> |
|
|
|
<!-- <el-form-item label="标识类型" prop="markType"> |
|
|
|
<el-select |
|
|
|
@ -139,6 +154,7 @@ |
|
|
|
label="行政区划" |
|
|
|
align="center" |
|
|
|
prop="adcd" |
|
|
|
:formatter="formatAdcd" |
|
|
|
min-width="120" |
|
|
|
/> |
|
|
|
<el-table-column |
|
|
|
@ -517,6 +533,9 @@ import { |
|
|
|
} from "@/api/yg/dikeMark"; |
|
|
|
import { listDikeInfo } from "@/api/yg/dikeInfo"; |
|
|
|
import markForm from "./components/markForm.vue"; |
|
|
|
import { getAreasData } from "@/api/areas/index"; |
|
|
|
import { regionData, codeToText, TextToCode } from "element-china-area-data"; |
|
|
|
|
|
|
|
// import Vue from "vue"; |
|
|
|
|
|
|
|
export default { |
|
|
|
@ -526,6 +545,11 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
areasOptionProps: { |
|
|
|
emitPath: false, |
|
|
|
checkStrictly: true, //选择任意一级 |
|
|
|
}, |
|
|
|
areasOptions: [], |
|
|
|
isFirst: true, |
|
|
|
// 遮罩层 |
|
|
|
loading: true, |
|
|
|
@ -575,6 +599,7 @@ export default { |
|
|
|
comForm: { |
|
|
|
embankmentName: null, |
|
|
|
embankmentCode: null, |
|
|
|
adcd: null, |
|
|
|
}, |
|
|
|
noticeForm: {}, |
|
|
|
warnForm: {}, |
|
|
|
@ -589,7 +614,7 @@ export default { |
|
|
|
}, |
|
|
|
rules: { |
|
|
|
markName: [ |
|
|
|
// { required: true, message: "请输入标志名称", trigger: "blur" }, |
|
|
|
{ required: true, message: "请输入标志名称", trigger: "blur" }, |
|
|
|
], |
|
|
|
}, |
|
|
|
embankmentNameOptions: [], |
|
|
|
@ -603,6 +628,7 @@ export default { |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getList(); |
|
|
|
this.getTreeData(); |
|
|
|
this.getDicts("breastplate_type").then((response) => { |
|
|
|
this.typeOptions = response.data; |
|
|
|
}); |
|
|
|
@ -629,6 +655,51 @@ export default { |
|
|
|
// this.counter1[0] = this.noticeForm; |
|
|
|
// }, |
|
|
|
methods: { |
|
|
|
formatAdcd(row) { |
|
|
|
if (row.adcd) { |
|
|
|
let provinceCode = row.adcd.slice(0, 2); |
|
|
|
let cityCode = row.adcd.slice(2, 4); |
|
|
|
let areaCode = row.adcd.slice(4, 6); |
|
|
|
if (areaCode != "00") { |
|
|
|
return ( |
|
|
|
codeToText[provinceCode] + |
|
|
|
"-" + |
|
|
|
codeToText[provinceCode + cityCode] + |
|
|
|
"-" + |
|
|
|
codeToText[provinceCode + cityCode + areaCode] |
|
|
|
); |
|
|
|
} else if (cityCode != "00") { |
|
|
|
return ( |
|
|
|
codeToText[provinceCode] + "-" + codeToText[provinceCode + cityCode] |
|
|
|
); |
|
|
|
} else { |
|
|
|
return codeToText[provinceCode]; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
getTreeData() { |
|
|
|
getAreasData().then((items) => { |
|
|
|
// console.log("getAreasData", items.data); |
|
|
|
let res = []; |
|
|
|
let getChildren = (res, pid) => { |
|
|
|
for (const i of items.data) { |
|
|
|
if (i.parentid === pid) { |
|
|
|
const newItem = { |
|
|
|
label: i.name, |
|
|
|
value: i.id, |
|
|
|
}; |
|
|
|
if (i.layer != 3) newItem.children = []; |
|
|
|
res.push(newItem); |
|
|
|
getChildren(newItem.children, newItem.value); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
getChildren(res, items.data[0].parentid); |
|
|
|
console.log(66666666666, res); |
|
|
|
this.areasOptions = res; |
|
|
|
// return res; |
|
|
|
}); |
|
|
|
}, |
|
|
|
addForm(index, type, formName) { |
|
|
|
console.log("index和type", index, type); |
|
|
|
const counterType = "counter" + type; |
|
|
|
@ -708,6 +779,7 @@ export default { |
|
|
|
chooseEmbankmenName(data) { |
|
|
|
// embankmentCode |
|
|
|
this.comForm.embankmentCode = data.embankmentCode; |
|
|
|
this.comForm.adcd = data.adcd; |
|
|
|
// console.log(33333, this.comForm); |
|
|
|
// // 将第一个表单和后面新增的表单赋值，水闸编码和水闸名称 |
|
|
|
// this.$refs["noticeForm0"][0].form.embankmentName = data.embankmentName; |
|
|
|
@ -759,6 +831,7 @@ export default { |
|
|
|
this.comForm = { |
|
|
|
embankmentName: null, |
|
|
|
embankmentCode: null, |
|
|
|
adcd: null, |
|
|
|
}; |
|
|
|
this.noticeForm = { |
|
|
|
id: null, |
|
|
|
@ -905,11 +978,16 @@ export default { |
|
|
|
console.log("回显的数据", response); |
|
|
|
this.comForm.embankmentName = response.data[0].embankmentName; |
|
|
|
this.comForm.embankmentCode = response.data[0].embankmentCode; |
|
|
|
this.comForm.adcd = response.data[0].adcd; |
|
|
|
console.log("this.comForm", this.comForm); |
|
|
|
this.counter0 = response.data.filter((item) => item.type == 0); |
|
|
|
if (this.counter0.length == 0) this.counter0 = [{}]; |
|
|
|
this.counter1 = response.data.filter((item) => item.type == 1); |
|
|
|
if (this.counter1.length == 0) this.counter1 = [{}]; |
|
|
|
this.counter2 = response.data.filter((item) => item.type == 2); |
|
|
|
if (this.counter2.length == 0) this.counter2 = [{}]; |
|
|
|
this.counter3 = response.data.filter((item) => item.type == 3); |
|
|
|
if (this.counter3.length == 0) this.counter3 = [{}]; |
|
|
|
console.log("回显的数据时的counter0", this.counter0); |
|
|
|
console.log("回显的数据时的counter1", this.counter1); |
|
|
|
console.log("回显的数据时的counter2", this.counter2); |
|
|
|
@ -922,7 +1000,10 @@ export default { |
|
|
|
submitForm() { |
|
|
|
// console.log(1111111111, this.$refs.noticeForm0[0].$refs.form); |
|
|
|
// 表单校验 |
|
|
|
// 且运算 |
|
|
|
let isAllTrue = true; |
|
|
|
// 或预算 |
|
|
|
// let isAllTrue = false; |
|
|
|
this.counter0.forEach((item, index) => { |
|
|
|
this.counter0[index].photo = JSON.stringify( |
|
|
|
this.$refs["noticeForm" + index][0].fileList |
|
|
|
@ -963,19 +1044,27 @@ export default { |
|
|
|
const C0 = |
|
|
|
this.counter0.length > 1 |
|
|
|
? this.counter0 |
|
|
|
: [this.$refs["noticeForm0"][0].form]; |
|
|
|
: this.$refs["noticeForm0"][0].form.markName |
|
|
|
? [this.$refs["noticeForm0"][0].form] |
|
|
|
: []; |
|
|
|
const C1 = |
|
|
|
this.counter1.length > 1 |
|
|
|
? this.counter1 |
|
|
|
: [this.$refs["warnForm0"][0].form]; |
|
|
|
: this.$refs["warnForm0"][0].form.markName |
|
|
|
? [this.$refs["warnForm0"][0].form] |
|
|
|
: []; |
|
|
|
const C2 = |
|
|
|
this.counter2.length > 1 |
|
|
|
? this.counter2 |
|
|
|
: [this.$refs["guideForm0"][0].form]; |
|
|
|
: this.$refs["guideForm0"][0].form.markName |
|
|
|
? [this.$refs["guideForm0"][0].form] |
|
|
|
: []; |
|
|
|
const C3 = |
|
|
|
this.counter3.length > 1 |
|
|
|
? this.counter3 |
|
|
|
: [this.$refs["nameForm0"][0].form]; |
|
|
|
: this.$refs["nameForm0"][0].form.markName |
|
|
|
? [this.$refs["nameForm0"][0].form] |
|
|
|
: []; |
|
|
|
|
|
|
|
// console.log("C0C0", C0, C1); |
|
|
|
if (this.isEdit) { |
|
|
|
@ -1066,14 +1155,14 @@ export default { |
|
|
|
.map { |
|
|
|
min-width: 400px; |
|
|
|
height: 500px; |
|
|
|
border: 1px solid skyblue; |
|
|
|
background: skyblue; |
|
|
|
// border: 1px solid skyblue; |
|
|
|
// background: skyblue; |
|
|
|
margin-right: 20px; |
|
|
|
// flex: 1; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
.list { |
|
|
|
min-width: 800px; |
|
|
|
flex: 1; |
|
|
|
flex: 2; |
|
|
|
} |
|
|
|
} |
|
|
|
.listTitle { |
|
|
|
|
xzt
1 year ago
