<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>
|
