|
|
@ -3,36 +3,65 @@ |
|
|
|
<WgtTitle :title="'交通路段状态'"></WgtTitle> |
|
|
|
<div class="board"> |
|
|
|
<div class="searchPanel"> |
|
|
|
<div>起始桩号:k</div> |
|
|
|
<el-input class="inputZh" v-model="start" placeholder="55"></el-input> |
|
|
|
<span>+</span> |
|
|
|
<el-input |
|
|
|
class="inputZh inputJl" |
|
|
|
v-model="start1" |
|
|
|
placeholder="378" |
|
|
|
></el-input> |
|
|
|
<div>结束桩号:k</div> |
|
|
|
<el-input class="inputZh" v-model="start2" placeholder="208"></el-input> |
|
|
|
<span>+</span> |
|
|
|
<el-input |
|
|
|
class="inputZh inputJl" |
|
|
|
v-model="start3" |
|
|
|
placeholder="153" |
|
|
|
></el-input> |
|
|
|
<div>路段方向:</div> |
|
|
|
<el-select v-model="area" class="selectRoad" placeholder="请选择"> |
|
|
|
<el-option |
|
|
|
v-for="item in areaOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
<el-form :inline="true" :model="ruleForm" ref="ruleForm"> |
|
|
|
<el-form-item label="起始桩号:k" prop="start"> |
|
|
|
<!-- <div>起始桩号:k</div> --> |
|
|
|
<el-input |
|
|
|
class="inputZh" |
|
|
|
v-model="ruleForm.start" |
|
|
|
placeholder="55" |
|
|
|
></el-input> |
|
|
|
<span>+</span> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="" prop="start1"> |
|
|
|
<el-input |
|
|
|
class="inputZh inputJl" |
|
|
|
v-model="ruleForm.start1" |
|
|
|
placeholder="378" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="结束桩号:k" prop="start2"> |
|
|
|
<!-- <div>结束桩号:k</div> --> |
|
|
|
<el-input |
|
|
|
class="inputZh" |
|
|
|
v-model="ruleForm.start2" |
|
|
|
placeholder="208" |
|
|
|
></el-input> |
|
|
|
<span>+</span> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="" prop="start3"> |
|
|
|
<el-input |
|
|
|
class="inputZh inputJl" |
|
|
|
v-model="ruleForm.start3" |
|
|
|
placeholder="153" |
|
|
|
></el-input> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="路段方向:" prop="area"> |
|
|
|
<el-select |
|
|
|
v-model="ruleForm.area" |
|
|
|
class="selectRoad" |
|
|
|
placeholder="请选择" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in areaOptions" |
|
|
|
:key="item.value" |
|
|
|
:label="item.label" |
|
|
|
:value="item.value" |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item |
|
|
|
><el-button type="primary" class="btnSearch" @click="onSubmit" |
|
|
|
>搜索</el-button |
|
|
|
> |
|
|
|
<el-button class="btnReset" @click="onClose" |
|
|
|
>重置</el-button |
|
|
|
></el-form-item |
|
|
|
> |
|
|
|
</el-option> |
|
|
|
</el-select> |
|
|
|
<el-button type="primary" class="btnSearch" @click="onSubmit" |
|
|
|
>搜索</el-button |
|
|
|
> |
|
|
|
<el-button class="btnReset">重置</el-button> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<!-- <div>路段方向:</div> --> |
|
|
|
</div> |
|
|
|
<div class="tblResult"> |
|
|
|
<div class="tblTd"> |
|
|
@ -66,10 +95,13 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
start: "", |
|
|
|
start1: "", |
|
|
|
start2: "", |
|
|
|
start3: "", |
|
|
|
ruleForm: { |
|
|
|
start: "", |
|
|
|
start1: "", |
|
|
|
start2: "", |
|
|
|
start3: "", |
|
|
|
area: "济南", |
|
|
|
}, |
|
|
|
areaOptions: [ |
|
|
|
{ |
|
|
|
value: "济南", |
|
|
@ -80,7 +112,7 @@ export default { |
|
|
|
label: "菏泽", |
|
|
|
}, |
|
|
|
], |
|
|
|
area: "济南", |
|
|
|
|
|
|
|
list: [ |
|
|
|
{ |
|
|
|
name: "大学城-长清", |
|
|
@ -131,7 +163,11 @@ export default { |
|
|
|
created() {}, |
|
|
|
methods: { |
|
|
|
onSubmit() { |
|
|
|
console.log("submit!"); |
|
|
|
console.log("submit!", this.ruleForm); |
|
|
|
}, |
|
|
|
onClose() { |
|
|
|
this.$refs.ruleForm.resetFields(); |
|
|
|
console.log("submit!", this.ruleForm); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
@ -149,6 +185,17 @@ export default { |
|
|
|
color: #9f9f9f; |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .searchPanel .el-form-item__label { |
|
|
|
color: #fff; |
|
|
|
font-weight: normal; |
|
|
|
white-space: nowrap; |
|
|
|
margin-left: -2px; |
|
|
|
margin-right: -5px; |
|
|
|
font-size: 13px; |
|
|
|
line-height: 36px; |
|
|
|
} |
|
|
|
|
|
|
|
.heightway { |
|
|
|
width: 100%; |
|
|
|
.board { |
|
|
@ -192,8 +239,8 @@ export default { |
|
|
|
} |
|
|
|
.inputJl { |
|
|
|
// width: 60px; |
|
|
|
margin-left: 5px; |
|
|
|
margin-right: 10px; |
|
|
|
// margin-left: 5px; |
|
|
|
// margin-right: 10px; |
|
|
|
} |
|
|
|
.selectRoad { |
|
|
|
width: 87px; |
|
|
@ -207,7 +254,7 @@ export default { |
|
|
|
} |
|
|
|
.btnSearch { |
|
|
|
background-color: #00b3cc; |
|
|
|
margin-left: 10px; |
|
|
|
// margin-left: 10px; |
|
|
|
padding: 6px 15px; |
|
|
|
font-size: 13px; |
|
|
|
} |
|
|
|