|
|
@@ -13,6 +13,81 @@
|
|
|
<img v-else src="@/assets/yujing/map/area-active.png"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- 右边栏 -->
|
|
|
+ <div class="jiance-rightbox">
|
|
|
+ <div class="rightbox-title">
|
|
|
+ <img src="@/assets/yujing/img/右箭头.png" class="title-img"/>
|
|
|
+ <span>筛选条件</span>
|
|
|
+ </div>
|
|
|
+ <el-form :model="form" label-width="auto" label-position="right" size="small" class="jiance-form">
|
|
|
+ <el-form-item label="评价时间：">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.date"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择时间"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="是否达标：">
|
|
|
+ <el-checkbox-group v-model="form.status" v-for="item in statusCheckData">
|
|
|
+ <el-checkbox :value="item.value" style="margin-right: 10px;">
|
|
|
+ {{item.name}}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="水功能区：">
|
|
|
+ <el-select v-model="form.water" placeholder="请选择...">
|
|
|
+ <el-option label="Zone one" value="shanghai" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属流域：">
|
|
|
+ <el-checkbox-group v-model="form.type" v-for="check in liuYuCheckData">
|
|
|
+ <el-checkbox :value="check.value" style="margin-right: 10px;">
|
|
|
+ {{check.name}}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="所属省份：">
|
|
|
+ <el-select v-model="form.region" placeholder="请选择...">
|
|
|
+ <el-option label="Zone one" value="shanghai" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="关键字：">
|
|
|
+ <el-input v-model="form.name" placeholder="请输入关键字"/>
|
|
|
+ </el-form-item>
|
|
|
+ <div style="text-align: center;">
|
|
|
+ <el-button type="primary" @click="handleSearch">查询</el-button>
|
|
|
+ <el-button type="primary" @click="handleReset">重置</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <div class="right-table">
|
|
|
+ <el-table
|
|
|
+ :data="jianCeData"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ style="width: 100%;"
|
|
|
+ :height="heightAll"
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#d2eafa !important',
|
|
|
+ fontSize: '12px'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column type="index" align="center"/>
|
|
|
+ <el-table-column prop="name" label="名称"/>
|
|
|
+ </el-table>
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="pagination.currentPage"
|
|
|
+ v-model:page-size="pagination.pageSize"
|
|
|
+ :size="pagination.size"
|
|
|
+ :total="pagination.totalCount"
|
|
|
+ :disabled=false
|
|
|
+ background
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<!-- 图例 -->
|
|
|
<div class="jiance-tuli">
|
|
|
<div class="tuli-title">图例</div>
|
|
|
@@ -85,6 +160,29 @@ const mapPointData = [
|
|
|
cod:8.87,
|
|
|
},
|
|
|
];
|
|
|
+const statusCheckData = [
|
|
|
+ {name:"是",value:1},
|
|
|
+ {name:"否",value:2},
|
|
|
+];
|
|
|
+const liuYuCheckData = [
|
|
|
+ {name:"太湖流域",value:1},
|
|
|
+ {name:"东南诸河",value:2},
|
|
|
+];
|
|
|
+const form = ref({
|
|
|
+ date: '',
|
|
|
+ status: '',
|
|
|
+ water: '',
|
|
|
+ type: [],
|
|
|
+ region: '',
|
|
|
+ name: ''
|
|
|
+});
|
|
|
+const heightAll = 65.8 + 'vh';
|
|
|
+const jianCeData = ref([]);
|
|
|
+const pagination = ref({
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ totalCount: 0,
|
|
|
+});
|
|
|
|
|
|
onMounted(() => {
|
|
|
initMap();
|
|
|
@@ -153,6 +251,10 @@ const initMap = () => {
|
|
|
const handleMapTools = (name) => {
|
|
|
mapToolName.value = name;
|
|
|
}
|
|
|
+const handleSearch = () => {};
|
|
|
+const handleReset = () => {};
|
|
|
+const handleSizeChange = (val) => {};
|
|
|
+const handleCurrentChange = (val) => {};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -252,5 +354,47 @@ const handleMapTools = (name) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .jiance-rightbox{
|
|
|
+ height: 100%;
|
|
|
+ width: 320px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ .rightbox-title{
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ background: linear-gradient(to right, #a8d2fa, #fff);
|
|
|
+ box-shadow: 0 5px 5px #b2d3f9;
|
|
|
+ position: relative;
|
|
|
+ .title-img{
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ left: 2%;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'ALIMAMASHUHEITI';
|
|
|
+ color: #4a93f5;
|
|
|
+ line-height: 30px;
|
|
|
+ position: absolute;
|
|
|
+ left: 10%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .jiance-form{
|
|
|
+ width: 94%;
|
|
|
+ margin: 2% auto;
|
|
|
+ .el-form-item{
|
|
|
+ margin-bottom: 6px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-table{
|
|
|
+ width: 94%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
WQQ
