3/3

src/styles/common.scss

@@ -33,10 +33,18 @@
   flex-direction: column;
   // height: 880px;
 }
+// .leakage-box{
+//   height: 60px;
+// }
 .leakage-cable .leakage-top{
   padding-right: 10px;
-  transform: translateY(-40px);
+
+  
+}
+.el-button-group{
+  position: absolute;
 }
+
 .el-table{
   height: 613px;
   overflow-y: scroll;
@@ -57,16 +65,18 @@
   display: inline-block;
   margin-right: 20px;
   
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   .label{
+    color: teal;
   font-weight: 400px;
-  font-size: 14px;
+  font-size: 14px !important;
 }
 }
 .search-div{
   background: #EAF1FE;
-  padding-top: 16px;
+  padding: 15px 15px 0 15px;
   margin-bottom: 20px;
+  border-radius: 8px;
   }
   .none{
     display: none;
@@ -75,3 +85,4 @@
     color: #fff;
     background:rgba(122, 164, 251, 0.55);
   }
+ 
\ No newline at end of file

src/views/setting/statistics/comp/fsuTable.vue

@@ -11,50 +11,40 @@
           >删除</el-button
         >
         <el-button type="primary" @click="refresh">刷新</el-button>
-        <el-button type="primary" @click="query">查询</el-button>
+        <el-button type="primary" @click="block = !block">查询</el-button>
         <el-button type="primary" @click="exportData">导出</el-button>
       </div>
     </div>
-     <div :class="block==0?'search-div' : 'none'">
-      <div class="search-input-box">
-        <label>设备名称：</label>
+    <el-form
+      class="search-div"
+      v-if="block"
+      :model="FSUForm"
+      :inline="true"
+      size="mini"
+    >
+      <el-form-item label="设备名称：">
         <el-input
-          size="small"
           placeholder="请输入设备名称"
-          style="width: 180px"
           v-model="FSUForm.equipName"
           clearable
         >
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>FSU身份编号：</label>
+      </el-form-item>
+      <el-form-item label="FSU身份编号：">
         <el-input
-          size="small"
           placeholder="请输入FSU身份编号"
-          style="width: 180px"
           v-model="FSUForm.fsuCode"
           clearable
         >
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>IP地址：</label>
-        <el-input
-          size="small"
-          placeholder="请输入IP地址"
-          style="width: 180px"
-          v-model="FSUForm.ip"
-          clearable
-        >
+      </el-form-item>
+      <el-form-item label="IP地址：">
+        <el-input placeholder="请输入IP地址" v-model="FSUForm.ip" clearable>
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>所在铁路线：</label>
+      </el-form-item>
+      <el-form-item label="所在铁路线：">
         <el-select
-          size="small"
           placeholder="请选择所在铁路线"
-          style="width: 180px"
           v-model="FSUForm.wayId"
           clearable
           @change="changerailWay()"
@@ -66,13 +56,10 @@
             :value="item.id"
           ></el-option>
         </el-select>
-      </div>
-      <div class="search-input-box">
-        <label>所在站点：</label>
+      </el-form-item>
+      <el-form-item label="所在站点：">
         <el-select
-          size="small"
           placeholder="请选择所在站点"
-          style="width: 180px"
           v-model="FSUForm.siteId"
           clearable
         >
@@ -83,12 +70,12 @@
             :value="item.id"
           ></el-option>
         </el-select>
-      </div>
-       <div class="search-input-box">
-         <el-button class="seabtn" @click="searchQuery()">查询</el-button>
-         <el-button class="seabtn" @click="reset()">重置</el-button>
-       </div>
-    </div>
+      </el-form-item>
+      <el-form-item>
+        <el-button class="seabtn" @click="searchQuery()">查询</el-button>
+        <el-button class="seabtn" @click="reset()">重置</el-button>
+      </el-form-item>
+    </el-form>
     <el-table
       ref="multipleTable"
       class="statistics-table"
@@ -236,7 +223,7 @@ export default {
       total: 10,
       multipleSelection: [],
       ids: [],
-       block: 1,
+      block: 0,
     };
   },
   computed: {
@@ -278,16 +265,8 @@ export default {
       this.getTableData();
     },
     searchQuery() {},
-    reset() {
-      
-    },
-    query() {
-       if (this.block == 1) {
-        this.block = 0;
-      } else {
-        this.block = 1;
-      }
-    },
+    reset() {},
+
     exportData() {},
     handleSelectionChange(val) {
       this.multipleSelection = val;

src/views/setting/statistics/comp/leakyTable.vue

@@ -11,39 +11,36 @@
           >删除</el-button
         >
         <el-button type="primary" @click="refresh">刷新</el-button>
-        <el-button type="primary" @click="query()">查询</el-button>
+        <el-button type="primary" @click="block = !block">查询</el-button>
         <el-button type="primary" @click="exportData">导出</el-button>
       </div>
     </div>
-    <div :class="block == 0 ? 'search-div' : 'none'">
-      <div class="search-input-box">
-        <label>漏缆描述：</label>
+    <el-form
+      class="search-div"
+      v-if="block"
+      :model="leakyCableForm"
+      :inline="true"
+      size="mini"
+    >
+      <el-form-item label="漏缆描述：">
         <el-input
-          size="small"
           placeholder="请输入漏缆描述"
-          style="width: 180px"
           v-model="leakyCableForm.leakyCableDescribe"
           clearable
         >
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>漏缆编号：</label>
+      </el-form-item>
+      <el-form-item label="漏缆编号：">
         <el-input
-          size="small"
           placeholder="请输入漏缆编号"
-          style="width: 180px"
           v-model="leakyCableForm.leakyCableCode"
           clearable
         >
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>漏缆型号：</label>
+      </el-form-item>
+      <el-form-item label="漏缆型号：">
         <el-select
-          size="small"
           placeholder="请输入漏缆型号"
-          style="width: 180px"
           v-model="leakyCableForm.leakyCableMode"
           clearable
         >
@@ -54,13 +51,10 @@
             :value="item.id"
           ></el-option>
         </el-select>
-      </div>
-      <div class="search-input-box">
-        <label>所在铁路线：</label>
+      </el-form-item>
+      <el-form-item label="所在铁路线：">
         <el-select
-          size="small"
           placeholder="请选择所在铁路线"
-          style="width: 180px"
           v-model="leakyCableForm.wayId"
           clearable
           @change="changerailWay()"
@@ -72,13 +66,10 @@
             :value="item.id"
           ></el-option>
         </el-select>
-      </div>
-      <div class="search-input-box">
-        <label>所在站点：</label>
+      </el-form-item>
+      <el-form-item label="所在站点：">
         <el-select
-          size="small"
           placeholder="请选择所在站点"
-          style="width: 180px"
           v-model="leakyCableForm.siteId"
           @change="changesite()"
           clearable
@@ -90,13 +81,10 @@
             :value="item.id"
           ></el-option>
         </el-select>
-      </div>
-      <div class="search-input-box">
-        <label>所在FSU：</label>
+      </el-form-item>
+      <el-form-item label="所在FSU：">
         <el-select
-          size="small"
           placeholder="请选择所在FSU"
-          style="width: 180px"
           v-model="leakyCableForm.fsuId"
           @change="changefsu()"
           clearable
@@ -108,13 +96,10 @@
             :value="item.id"
           ></el-option>
         </el-select>
-      </div>
-      <div class="search-input-box">
-        <label>所在监测设备：</label>
+      </el-form-item>
+      <el-form-item label="所在监测设备：">
         <el-select
-          size="small"
           placeholder="请选择所在监测设备"
-          style="width: 180px"
           v-model="leakyCableForm.monitor"
           clearable
         >
@@ -125,12 +110,12 @@
             :value="item.id"
           ></el-option>
         </el-select>
-      </div>
-      <div class="search-input-box">
+      </el-form-item>
+      <el-form-item>
         <el-button class="seabtn" @click="searchQuery()">查询</el-button>
         <el-button class="seabtn" @click="reset()">重置</el-button>
-      </div>
-    </div>
+      </el-form-item>
+    </el-form>
     <el-table
       ref="multipleTable"
       class="statistics-table"
@@ -270,7 +255,7 @@ export default {
       total: 10,
       multipleSelection: [],
       ids: [],
-      block: 1,
+      block: 0,
     };
   },
   computed: {
@@ -339,13 +324,7 @@ export default {
         leakyCableMode: "",
       };
     },
-    query() {
-      if (this.block == 1) {
-        this.block = 0;
-      } else {
-        this.block = 1;
-      }
-    },
+
     exportData() {},
     handleSelectionChange(val) {
       this.multipleSelection = val;

src/views/setting/statistics/comp/monitorTable.vue

@@ -11,50 +11,40 @@
           >删除</el-button
         >
         <el-button type="primary" @click="refresh">刷新</el-button>
-        <el-button type="primary" @click="query">查询</el-button>
+        <el-button type="primary" @click="block = !block">查询</el-button>
         <el-button type="primary" @click="exportData">导出</el-button>
       </div>
     </div>
-     <div :class="block==0?'search-div' : 'none'">
-      <div class="search-input-box">
-        <label>设备名称：</label>
+    <el-form
+      class="search-div"
+      v-if="block"
+      :model="monitorForm"
+      :inline="true"
+      size="mini"
+    >
+      <el-form-item label="设备名称：">
         <el-input
-          size="small"
           placeholder="请输入设备名称"
-          style="width: 180px"
           v-model="monitorForm.equipName"
           clearable
         >
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>设备身份编号：</label>
+      </el-form-item>
+      <el-form-item label="设备身份编号：">
         <el-input
-          size="small"
           placeholder="请输入设备身份编号"
-          style="width: 180px"
           v-model="monitorForm.equipCode"
           clearable
         >
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>IP地址：</label>
-        <el-input
-          size="small"
-          placeholder="请输入IP地址"
-          style="width: 180px"
-          v-model="monitorForm.ip"
-          clearable
-        >
+      </el-form-item>
+      <el-form-item label="IP地址：">
+        <el-input placeholder="请输入IP地址" v-model="monitorForm.ip" clearable>
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>所在铁路线：</label>
+      </el-form-item>
+      <el-form-item label="所在铁路线：">
         <el-select
-          size="small"
           placeholder="请选择所在铁路线"
-          style="width: 180px"
           v-model="monitorForm.wayId"
           clearable
           @change="changerailWay()"
@@ -66,13 +56,10 @@
             :value="item.id"
           ></el-option>
         </el-select>
-      </div>
-      <div class="search-input-box">
-        <label>所在站点：</label>
+      </el-form-item>
+      <el-form-item label="所在站点：">
         <el-select
-          size="small"
           placeholder="请选择所在站点"
-          style="width: 180px"
           v-model="monitorForm.siteId"
           @change="changesite()"
           clearable
@@ -84,13 +71,11 @@
             :value="item.id"
           ></el-option>
         </el-select>
-      </div>
-      <div class="search-input-box">
-        <label>所在FSU：</label>
+      </el-form-item>
+      <el-form-item label="所在FSU：">
+        
         <el-select
-          size="small"
           placeholder="请选择所在FSU"
-          style="width: 180px"
           v-model="monitorForm.fsuId"
           clearable
         >
@@ -101,12 +86,12 @@
             :value="item.id"
           ></el-option>
         </el-select>
-      </div>
-       <div class="search-input-box">
-         <el-button class="seabtn" @click="searchQuery()">查询</el-button>
-         <el-button class="seabtn" @click="reset()">重置</el-button>
-       </div>
-    </div>
+      </el-form-item>
+      <el-form-item label="铁路名称：">
+        <el-button class="seabtn" @click="searchQuery()">查询</el-button>
+        <el-button class="seabtn" @click="reset()">重置</el-button>
+      </el-form-item>
+    </el-form>
     <el-table
       ref="multipleTable"
       class="statistics-table"
@@ -233,7 +218,7 @@ export default {
       total: 10,
       multipleSelection: [],
       ids: [],
-       block: 1,
+      block: 0,
     };
   },
   computed: {
@@ -282,16 +267,8 @@ export default {
       this.getTableData();
     },
     searchQuery() {},
-    reset() {
-      
-    },
-    query() {
-       if (this.block == 1) {
-        this.block = 0;
-      } else {
-        this.block = 1;
-      }
-    },
+    reset() {},
+
     exportData() {},
     handleSelectionChange(val) {
       this.multipleSelection = val;

src/views/setting/statistics/comp/railWayTable.vue

@@ -11,49 +11,55 @@
           >删除</el-button
         >
         <el-button type="primary" @click="refresh">刷新</el-button>
-        <el-button type="primary" @click="query()">查询</el-button>
+        <el-button type="primary" @click="block = !block">查询</el-button>
         <el-button type="primary" @click="exportData">导出</el-button>
       </div>
     </div>
-   <div :class="block==0?'search-div' : 'none'">
-      <div class="search-input-box">
-        <label>铁路名称：</label>
+    <el-form
+      class="search-div"
+      v-if="block"
+      :model="railData"
+      :inline="true"
+      size="mini"
+    >
+      <el-form-item label="铁路名称：">
         <el-input
-          size="small"
+          
           placeholder="请输入铁路名称"
           style="width: 180px"
           v-model="railData.name"
           clearable
         >
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>铁路起点站名：</label>
+      </el-form-item>
+
+      <el-form-item label="铁路起点站名：">
         <el-input
-          size="small"
+          
           placeholder="请输入起点站名"
           v-model="railData.startPointName"
           style="width: 180px"
           clearable
         >
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>铁路终点站名：</label>
+      </el-form-item>
+
+      <el-form-item label="铁路终点站名：">
         <el-input
-          size="small"
+          
           placeholder="请输入终点站名"
           v-model="railData.endPointName"
           style="width: 180px"
           clearable
         >
         </el-input>
-      </div>
-       <div class="search-input-box">
-         <el-button class="seabtn" @click="searchQuery()">查询</el-button>
-         <el-button class="seabtn" @click="reset()">重置</el-button>
-       </div>
-    </div>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button class="seabtn" @click="searchQuery()">查询</el-button>
+        <el-button class="seabtn" @click="reset()">重置</el-button>
+      </el-form-item>
+    </el-form>
     <el-table
       ref="multipleTable"
       class="statistics-table"
@@ -114,7 +120,12 @@
 </template>
 <script>
 import Pagination from "@/components/Pagination";
-import { railWaylist, railWaydetail, railWaybatchDelete,roleAdd } from "../../api";
+import {
+  railWaylist,
+  railWaydetail,
+  railWaybatchDelete,
+  roleAdd,
+} from "../../api";
 import { mapGetters, mapActions } from "vuex";
 import { successAlert, warningAlert } from "@/utils/alert";
 export default {
@@ -126,8 +137,8 @@ export default {
         endPointName: "",
         name: "ccc",
         startPointName: "",
-         current: 1,
-         size:10
+        current: 1,
+        size: 10,
       },
       visible: false,
       Info: [],
@@ -139,7 +150,7 @@ export default {
       total: 10,
       multipleSelection: [],
       ids: [],
-       block: 1,
+      block: 0,
     };
   },
   computed: {},
@@ -168,17 +179,9 @@ export default {
     refresh() {
       this.getTableData();
     },
-   searchQuery() {},
-    reset() {
-      
-    },
-    query() {
-       if (this.block == 1) {
-        this.block = 0;
-      } else {
-        this.block = 1;
-      }
-    },
+    searchQuery() {},
+    reset() {},
+
     exportData() {},
     handleSelectionChange(val) {
       this.multipleSelection = val;
@@ -207,13 +210,11 @@ export default {
       this.getTableData();
     },
     getTableData() {
-    
       let params = {
         current: this.params.pageNum,
         size: this.params.pageSize,
       };
       railWaylist(this.railData).then((res) => {
-       
         let list = res.records || [];
         this.tableData = list;
         this.total = res.total;

src/views/setting/statistics/comp/stationTable.vue

@@ -11,50 +11,44 @@
           >删除</el-button
         >
         <el-button type="primary" @click="refresh">刷新</el-button>
-        <el-button type="primary" @click="query()">查询</el-button>
+        <el-button type="primary" @click="block = !block">查询</el-button>
         <el-button type="primary" @click="exportData">导出</el-button>
       </div>
     </div>
-    <div :class="block==0?'search-div' : 'none'">
-      <div class="search-input-box">
-        <label>站名：</label>
+    <el-form
+      class="search-div"
+      v-if="block"
+      :model="siteForm"
+      :inline="true"
+      size="mini"
+    >
+      <el-form-item label="站名：">
         <el-input
-          size="small"
           placeholder="请输入站名"
-          style="width: 180px"
           v-model="siteForm.siteName"
           clearable
         >
         </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>站点编号：</label>
+      </el-form-item>
+      <el-form-item label="站点编号：">
         <el-input
-          size="small"
           placeholder="请输入起点编号"
-          style="width: 180px"
           v-model="siteForm.siteCode"
           clearable
         >
-        </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>站点地址：</label>
+        </el-input
+      ></el-form-item>
+      <el-form-item label="站点地址：">
         <el-input
-          size="small"
           placeholder="请输入站点地址"
-          style="width: 180px"
           v-model="siteForm.siteAddress"
           clearable
         >
-        </el-input>
-      </div>
-      <div class="search-input-box">
-        <label>所在铁路线：</label>
+        </el-input
+      ></el-form-item>
+      <el-form-item label="所在铁路线：">
         <el-select
-          size="small"
           placeholder="请选择所在铁路线"
-          style="width: 180px"
           v-model="siteForm.wayId"
           clearable
         >
@@ -63,14 +57,13 @@
             :key="item.id"
             :label="item.name"
             :value="item.id"
-          ></el-option>
-        </el-select>
-      </div>
-       <div class="search-input-box">
-         <el-button class="seabtn" @click="searchQuery()">查询</el-button>
-         <el-button class="seabtn" @click="reset()">重置</el-button>
-       </div>
-    </div>
+          ></el-option> </el-select
+      ></el-form-item>
+      <el-form-item>
+        <el-button class="seabtn" @click="searchQuery()">查询</el-button>
+        <el-button class="seabtn" @click="reset()">重置</el-button>
+      </el-form-item>
+    </el-form>
     <el-table
       ref="multipleTable"
       class="statistics-table"
@@ -171,9 +164,9 @@ export default {
         siteCode: "",
         siteName: "委屈",
         siteAddress: "",
-        siteId:'',
+        siteId: "",
         current: 1,
-        size:10,
+        size: 10,
       },
       railWaySelect: [],
       visible: false,
@@ -186,7 +179,7 @@ export default {
       total: 10,
       multipleSelection: [],
       ids: [],
-       block: 1,
+      block: 0,
     };
   },
   computed: {
@@ -220,17 +213,9 @@ export default {
     refresh() {
       this.getTableData();
     },
-  searchQuery() {},
-    reset() {
-      
-    },
-    query() {
-       if (this.block == 1) {
-        this.block = 0;
-      } else {
-        this.block = 1;
-      }
-    },
+    searchQuery() {},
+    reset() {},
+
     exportData() {},
     handleSelectionChange(val) {
       this.multipleSelection = val;
@@ -256,8 +241,8 @@ export default {
     },
     getTableData() {
       console.log(123);
-      let params = this.siteForm
-   
+      let params = this.siteForm;
+
       sitelist(params).then((res) => {
         let list = res.records || [];
         this.tableData = list;

src/views/setting/statistics/detail.vue

@@ -37,6 +37,7 @@ export default {
     },
   },
   created() {
+  
     this.getParams();
   },
   mounted() {},

src/views/setting/statistics/index.vue

 <template>
+
   <div class="leakage-cable">
     <el-button-group>
       <el-button
@@ -16,6 +17,7 @@
     <monitorTable v-if="activeName == '3'"></monitorTable>
     <leakyTable v-if="activeName == '4'"></leakyTable>
   </div>
+  
 </template>
 
 <script>