更改

ruoyi-ui/src/views/JiHeExpressway/pages/perception/trafficFlow/components/heightway/index.vue

@@ -3,36 +3,65 @@
     <WgtTitle :title="'交通路段状态'"></WgtTitle>
     <div class="board">
       <div class="searchPanel">
-        <div>起始桩号：k</div>
+        <el-form :inline="true" :model="ruleForm" ref="ruleForm">
-        <el-input class="inputZh" v-model="start" placeholder="55"></el-input>
+          <el-form-item label="起始桩号：k" prop="start">
-        <span>+</span>
+            <!-- <div>起始桩号：k</div> -->
-        <el-input
+            <el-input
-          class="inputZh inputJl"
+              class="inputZh"
-          v-model="start1"
+              v-model="ruleForm.start"
-          placeholder="378"
+              placeholder="55"
-        ></el-input>
+            ></el-input>
-        <div>结束桩号：k</div>
+            <span>+</span>
-        <el-input class="inputZh" v-model="start2" placeholder="208"></el-input>
+          </el-form-item>
-        <span>+</span>
+          <el-form-item label="" prop="start1">
-        <el-input
+            <el-input
-          class="inputZh inputJl"
+              class="inputZh inputJl"
-          v-model="start3"
+              v-model="ruleForm.start1"
-          placeholder="153"
+              placeholder="378"
-        ></el-input>
+            ></el-input>
-        <div>路段方向：</div>
+          </el-form-item>
-        <el-select v-model="area" class="selectRoad" placeholder="请选择">
+          <el-form-item label="结束桩号：k" prop="start2">
-          <el-option
+            <!-- <div>结束桩号：k</div> -->
-            v-for="item in areaOptions"
+            <el-input
-            :key="item.value"
+              class="inputZh"
-            :label="item.label"
+              v-model="ruleForm.start2"
-            :value="item.value"
+              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-form>
-        </el-select>
+
-        <el-button type="primary" class="btnSearch" @click="onSubmit"
+        <!-- <div>路段方向：</div> -->
-          >搜索</el-button
-        >
-        <el-button class="btnReset">重置</el-button>
       </div>
       <div class="tblResult">
         <div class="tblTd">
@@ -66,10 +95,13 @@ export default {
   },
   data() {
     return {
-      start: "",
+      ruleForm: {
-      start1: "",
+        start: "",
-      start2: "",
+        start1: "",
-      start3: "",
+        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-left: 5px;
-        margin-right: 10px;
+        // 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;
       }