<template>
|
<div class="wrapper">
|
<div class="top_nav">头部</div>
|
<div class="content_div">
|
<div class="left_menu">
|
<el-menu default-active="1" class="el-menu-vertical-demo">
|
<el-menu-item index="1">
|
<i class="el-icon-menu"></i>
|
<!-- <img src="../../assets/icon/sll.png" style="width:26px;height: 26px">-->
|
<span slot="title">渗流量监测</span>
|
</el-menu-item>
|
<el-menu-item index="2">
|
<i class="el-icon-setting"></i>
|
<span slot="title">渗流压力监测</span>
|
</el-menu-item>
|
<el-menu-item index="3">
|
<i class="el-icon-setting"></i>
|
<span slot="title">变形监测</span>
|
</el-menu-item>
|
</el-menu>
|
</div>
|
<div class="right_content">
|
<!--搜索条件-->
|
<div class="content_top">
|
<el-form :inline="true" :model="formSeach" class="demo-form-inline">
|
<el-form-item label="行政区划">
|
<el-select v-model="formSeach.region" placeholder="行政区划">
|
<el-option label="湖北省" value="hubei"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="水库名称">
|
<el-input v-model="formSeach.skName" placeholder="水库名称"></el-input>
|
</el-form-item>
|
<el-form-item label="测点名称">
|
<el-input v-model="formSeach.cdName" placeholder="水库名称"></el-input>
|
</el-form-item>
|
<el-form-item label="是否十四五期间计划建设">
|
<el-select v-model="formSeach.isNo" placeholder="是否十四五期间计划建设">
|
<el-option label="是" value="hubei"></el-option>
|
<el-option label="否" value="hubei"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<div class="content_table">
|
<el-table
|
:data="tableData"
|
style="width: 100%">
|
<el-table-column
|
prop="skName"
|
label="水库名称"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="czName"
|
label="测站名称"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="cdName"
|
label="测点名称"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="spwy"
|
label="水平位移"
|
>
|
</el-table-column>
|
<el-table-column
|
prop="jcDate"
|
label="监测时间"
|
>
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
width="100">
|
<template slot-scope="scope">
|
<el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
|
<el-button type="text" size="small">处理</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
tableData:[
|
{skName:'白云山水库',czName:'白云山测站',cdName:'白云山测点',jpwy:'801.62',jcDate:'2023-04-04 17:32:00'},
|
{skName:'白云山水库',czName:'白云山测站',cdName:'白云山测点',jpwy:'801.62',jcDate:'2023-04-04 17:32:00'},
|
{skName:'白云山水库',czName:'白云山测站',cdName:'白云山测点',jpwy:'801.62',jcDate:'2023-04-04 17:32:00'},
|
{skName:'白云山水库',czName:'白云山测站',cdName:'白云山测点',jpwy:'801.62',jcDate:'2023-04-04 17:32:00'},
|
{skName:'白云山水库',czName:'白云山测站',cdName:'白云山测点',jpwy:'801.62',jcDate:'2023-04-04 17:32:00'},
|
{skName:'白云山水库',czName:'白云山测站',cdName:'白云山测点',jpwy:'801.62',jcDate:'2023-04-04 17:32:00'},
|
{skName:'白云山水库',czName:'白云山测站',cdName:'白云山测点',jpwy:'801.62',jcDate:'2023-04-04 17:32:00'},
|
{skName:'白云山水库',czName:'白云山测站',cdName:'白云山测点',jpwy:'801.62',jcDate:'2023-04-04 17:32:00'},
|
{skName:'白云山水库',czName:'白云山测站',cdName:'白云山测点',jpwy:'801.62',jcDate:'2023-04-04 17:32:00'},
|
{skName:'白云山水库',czName:'白云山测站',cdName:'白云山测点',jpwy:'801.62',jcDate:'2023-04-04 17:32:00'}
|
],
|
formSeach:{}
|
}
|
},
|
methods: {}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.wrapper {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
background-color: white;
|
}
|
|
.top_nav {
|
height: 15%;
|
background-color: red;
|
}
|
|
.content_div {
|
display: flex;
|
height: 100%;
|
}
|
|
.left_menu {
|
width: 15%;
|
height: 85%;
|
|
.menu_view {
|
width: 288px;
|
height: 64px;
|
display: flex;
|
flex-wrap: nowrap;
|
flex-direction: column;
|
align-content: center;
|
justify-content: center;
|
}
|
|
.menu_view span {
|
font-size: 18px;
|
line-height: 25px;
|
}
|
}
|
|
.right_content {
|
width: 85%;
|
height: 85%;
|
.content_top {
|
height: 15%;
|
padding-top: 20px;
|
}
|
.content_table {
|
display: flex;
|
width: 80%;
|
height: 85%;
|
}
|
}
|
</style>
|
